React Native - Touches

In this chapter we will show you touchable components in react Native. We are calling them 'touchable' because they offer built in animations and we can use onPress prop for handling touch event.

Touchable Highlight

When user press the element, it will get darker.

Example

<TouchableHighlight>
   <Text>
      Button
   </Text>
</TouchableHighlight>

Touchable Opacity

This element will change opacity of an element when touched.

Example

<TouchableOpacity>
   <Text>
      Button
   </Text>
</TouchableOpacity>

Touchable Native Feedback

This will simulate ink animation when element is pressed.

Example

<TouchableNativeFeedback>
   <Text>
      Button
   </Text>
</TouchableNativeFeedback>

Touchable Without Feedback

This should be used when you want to handle touch event without any animation.

Example

<TouchableWithoutFeedback>
   <Text>
      Button
   </Text>
</TouchableWithoutFeedback>