1.7 KiB
title |
---|
Touchables |
React Native - Touchables
Some of the main features of mobile devices revolve around user touch interactions. How a mobile app handles and responds to these interactions can make or break the user's experience.
React Native ships with a Button
component which works for many standard onPress
interactions. By default, it will give the user feedback by changing the opacity to show the button was pressed. Usage:
<Button onPress={handlePress} title="Submit" />
For more complex use cases, React Native has APIs build in to handle press interactions called Touchables
.
TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback
Each of these Touchable components can be styled and used with a library, like the built-in Animated
, allowing you to make your own types of custom user feedback.
Some examples of using these components:
// with images
<TouchableHighlight onPress={this.handlePress}>
<Image
style={styles.button}
source={require('./logo.png')}
/>
</TouchableHighlight>
// with text
<TouchableHighlight onPress={this.handlePress}>
<Text>Hello</Text>
</TouchableHighlight>
You can handle different types of button presses as well. By default, buttons and touchables are configured to handle regular taps, but you can also denote a function to call for press and hold interactions for example.
<TouchableHighlight onPress={this.handlePress} onLongPress={this.handleLongPress}>
To see all of the available props and how these components work, you can look at the JavaScript source code for Touchables here.