Handle Touches in React Native

On a device the interaction with the UI mainly happens through a touch or tap. So when we use the app, we mostly tap the button to perform some action, or scroll the page by touching the screen, try to zoom the page etc. To handle these gestures like tap, touch reactnative has events that cap capture it or a touchable component to deal with touches it.

Let us see the example of what happens when a button is clicked.

Example 1: Handling Tap on Button

Here is a simple example of Button.

<Button
   onPress={() => {
      alert('You Tapped on Me!');
   }}
   title="Tap Me"
/>

The onPress event will get called when the user taps on the button. Here is a working example of it.

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
   return (
      <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
         <Button
            onPress={() => {
               alert('You Tapped on Me!');
            }}
            title="Tap Me"
         />
      </View>
   );
}
export default App;

Output

Touchable Component

React native touchable component helps to capture the tapping gesture in case there are any issues with the events like onPress() which is used on react native components like buttons.

The touchable component comes with following options to handle tapping gestures on any react native component

• Touchable Opacity
• Touchable Highlight
• Touchable Without Feedback

Touchable Opacity

This element will change the opacity of an element when touched.

You can use TouchableOpacity as follows −

<TouchableOpacity onPress={() => alert('You Tapped Me')}>
   <Text style = {styles.text}>
      Button
   </Text>
</TouchableOpacity>

Here is a working example −

import React from 'react'
import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'
const App = () => {
   return (
      <View style = {styles.container}>
         <TouchableOpacity onPress={() => alert('You Tapped Me')}>
            <Text style = {styles.text}>
               Button
            </Text>
         </TouchableOpacity>
      </View>
   )
}
export default App
const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
   },
   text: {
      borderWidth: 1,
      padding: 25,
      borderColor: 'black',
      backgroundColor: 'red'
   }
});

You will see the opacity when user touches the button −

Touchable Highlight

When a user presses the element, it will get darker and the underlying color will show through.

You have to import TouchableHighlight before using it as shown below −

import { TouchableHighlight } from 'react-native'

The Button component is wrapped inside the Text component and the Text is inside the TouchableHighlight component . You can add styles to the components as per your requirements. The onPress function is added on the TouchableHighlight and on tap the alert message will be shown.

<TouchableHighlight onPress={() => alert('You Tapped Me')} activeOpacity={0.6}>
   <Text style = {styles.text}>
      Button
   </Text>
</TouchableHighlight>

The full working example is as follows −

import React from 'react'
import { View, TouchableHighlight, Text, StyleSheet } from 'react-native'
const App = (props) => {
   return (
      <View style = {styles.container}>
         <TouchableHighlight onPress={() => alert('You Tapped Me')} activeOpacity={0.6}>
            <Text style = {styles.text}>
               Button
            </Text>
         </TouchableHighlight>
      </View>
   )
}
export default App
const styles = StyleSheet.create ({
   container: {
      padding:100,
      alignItems: 'center',
   },
   text: {
      borderWidth: 1,
      padding: 25,
      borderColor: 'black',
      backgroundColor: 'gray'
   }
})

Output

Touchable Without Feedback

This should be used when you want to handle the touch event and don’t need any feedback.

Here the Button is wrapped inside the TouchableWithoutFeedback component as shown below −

<TouchableWithoutFeedback onPress={() => alert('You Tapped Me')}>
   <Text style = {styles.text}>
      Button
   </Text>
</TouchableWithoutFeedback>

Example: Working with TouchableWithoutFeedback component

import React from 'react'
import { View, TouchableWithoutFeedback, Text, StyleSheet } from 'react-native'
const Home = (props) => {
   return (
      <View style = {styles.container}>
         <TouchableWithoutFeedback onPress={() => alert('You Tapped Me')}>
            <Text style = {styles.text}>
               Button
            </Text>
         </TouchableWithoutFeedback>
      </View>
   )
}
export default Home
const styles = StyleSheet.create ({
   container: {
      padding:100,
      alignItems: 'center',
   },
   text: {
      borderWidth: 1,
      padding: 25,
      borderColor: 'black',
      backgroundColor: 'gray'
   }
})

Output