50 lines
1.7 KiB
Markdown
50 lines
1.7 KiB
Markdown
|
---
|
||
|
|
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:
|
||
|
|
|
||
|
|
```js
|
||
|
|
<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:
|
||
|
|
|
||
|
|
```js
|
||
|
|
// 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.
|
||
|
|
|
||
|
|
```js
|
||
|
|
<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](https://github.com/facebook/react-native/tree/master/Libraries/Components/Touchable).
|
||
|
|
|