freeCodeCamp/guide/english/react-native/touchables/index.md

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.