Touches In React Native

In this article, we are going to learn what is touches in React Native and their types also we will see how to create a custom button using touches in React Native.

What is Touches in React Native?

 
Button component in React Native comes with very limited properties and do not support much when it comes to the the appearance of the control. To overcome this problems, React Native offer touchable components. We can use these touchable components to add highlight, opacity, and other attributes to a control.
  • TouchableHighlight
  • TouchableOpacity
  • TouchableNativeFeedback
  • TouchableWithoutFeedback

TouchableHighlight

 
When a user presses a control with this component, the background of this component will get darker/lighter. underlayColor property - displays color on touch active.
 
How to use
 
To use this component, first import TouchableHighlight in code.
  1. import {TouchableHighlight} from 'react-native'  
For render, apply it on a control.
  1. <TouchableHighlight>  
  2.       <Text>Login</Text>  
  3. </TouchableHighlight>  
Example
 
Create a custom button using TouchableHighlight.
 
Step 1
 
Create a demo React Native project. Use this link for guidance.
   
Step 2
 
Open project in VS Code or in your favorite IDE.
 
Step 3
 
Create a custom button component. For that, add a JavaScript file with name “TouchableButton.js” in your project and add below code. 
  1. import React, {Component} from 'react';  
  2. import {View, Text, StyleSheet, TouchableHighlight, Alert} from "react-native";  
  3.   
  4. class TouchableButton extends Component {  
  5.     handleOnPress = () => {  
  6.         Alert.alert('Alert',  
  7.             'Hi, React Native!',  
  8.             [  
  9.                 { text: 'Cancel' },  
  10.                 { text: 'OK' },  
  11.             ],  
  12.             { cancelable: false })  
  13.     }  
  14.     render() {  
  15.         return (  
  16.             <View style={styles.container}>  
  17.                 <TouchableHighlight style={styles.button} onPress={this.handleOnPress} underlayColor="yellow" >  
  18.                     <Text style={styles.btnTextStyle}> Click Me </Text>  
  19.                 </TouchableHighlight>  
  20.             </View>  
  21.         );  
  22.     }  
  23. }  
  24.   
  25. const styles = StyleSheet.create({  
  26.     container: {  
  27.         flex: 1,  
  28.         justifyContent: 'center',  
  29.         paddingHorizontal: 10  
  30.     },  
  31.     button: {  
  32.         alignItems: 'center',  
  33.         backgroundColor: '#2980b6',  
  34.         padding: 10,  
  35.         borderRadius: 20,  
  36.     },  
  37.     btnTextStyle: {  
  38.         color: '#fff',  
  39.         textAlign: 'center',  
  40.         fontWeight: '700',  
  41.         fontSize: 25,  
  42.     }  
  43. })  
  44.   
  45. export default TouchableButton;  
You can see the in the code above, I have imported TouchableHighlight component from react native library for creating a custom button. Similarly, StyleSheet for button style and another component as well for the same.
 
Step 4
 
Open App.js file and remove existing code from it. Now, we need to import that created custom button component into it.
 
Add below lines of code into App.js file. 
  1. import React, { Component } from "react";  
  2. import TouchableButton from "./TouchableButton";  
  3.   
  4. class App extends Component {  
  5.   
  6.   render () {  
  7.     return (  
  8.       <TouchableButton />  
  9.     );  
  10.   }  
  11. }  
  12.   
  13. export default App;  
Output
 
Output 

TouchableOpacity

 
Opacity of an element will change, when the user touched this component/element. Default opacity is 0.2 and we can change the opacity of an element by setting a value of activeOpacity property.
 
How to use
 
Import TouchableHighlight in code,
  1. import {TouchableOpacity} from 'react-native'  
For Render,
  1. < TouchableOpacity>  
  2.         <Text>Login</Text>  
  3. </ TouchableOpacity>  

TouchableNativeFeedback

 
When a user presses this element/component, it will add a ripple effect to the background of an element/component. This component works only for Android OS.
 
How to use
 
Import TouchableHighlight in code,
  1. import {TouchableNativeFeedback} from 'react-native'  
For Render,
  1. <TouchableNativeFeedback>  
  2.         <Text>Login</Text>  
  3. </ TouchableNativeFeedback>  

TouchableWithoutFeedback

 
This component should be used when a user wants to fire an action or handle touch on element press or touch, but doesn’t want to show any animation or feedback. onPress, onPressIn, onPressOut are some important properties of this component.
 
How to use
      
Import TouchableWithoutFeedback in code,
  1. import {TouchableWithoutFeedback} from 'react-native'  
For Render,
  1. <TouchableWithoutFeedback>  
  2.         <Text>Login</Text>  
  3. </ TouchableWithoutFeedback>  
Example
 
By using the same example of TouchableHighlight component, we are going to create new custom buttons with TouchableOpacity, TouchableNativeFeedback and TouchableWithoutFeedback components.
 
Step 1
 
import TouchableOpacity, TouchableNativeFeedback and TouchableWithoutFeedback components into “TouchableButton.js” file.
 
Step 2
 
Replace below lines of code in “TouchableButton.js” file and run the application to check the output. 
  1. import React, { Component } from 'react';  
  2. import { View, Text, StyleSheet, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, Alert } from "react-native";  
  3.   
  4. class TouchableButton extends Component {  
  5.     handleOnPress = () => {  
  6.         Alert.alert('Alert',  
  7.             'Hi, React Native!',  
  8.             [  
  9.                 { text: 'Cancel' },  
  10.                 { text: 'OK' },  
  11.             ],  
  12.             { cancelable: false })  
  13.     }  
  14.     render() {  
  15.         return (  
  16.             <View style={styles.container}>  
  17.                 <TouchableOpacity style={styles.button} onPress={this.handleOnPress} activeOpacity={0.1}>  
  18.                     <Text style={styles.btnTextStyle}> Button - TouchableOpacity </Text>  
  19.                 </TouchableOpacity>  
  20.                 <TouchableNativeFeedback onPress={this.onPress}  
  21.                     background={TouchableNativeFeedback.SelectableBackground()}>  
  22.                     <View style={[styles.button, styles.buttonNativeFeedback]}>  
  23.                         <Text style={styles.btnTextStyle} >Button - TouchableNativeFeedback</Text>  
  24.                     </View>  
  25.                 </TouchableNativeFeedback>  
  26.                 <TouchableWithoutFeedback onPress={this.onPress}>  
  27.                     <View style={[styles.button, styles.buttonWithoutFeedback]}>  
  28.                         <Text style={styles.btnTextStyle}>Button - TouchableWithoutFeedback</Text>  
  29.                     </View>  
  30.                 </TouchableWithoutFeedback>  
  31.             </View>  
  32.         );  
  33.     }  
  34. }  
  35.   
  36. const styles = StyleSheet.create({  
  37.     container: {  
  38.         flex: 1,  
  39.         justifyContent: 'center',  
  40.         paddingHorizontal: 10  
  41.     },  
  42.     button: {  
  43.         alignItems: 'center',  
  44.         backgroundColor: '#2980b6',  
  45.         padding: 10,  
  46.         borderRadius: 20,  
  47.         margin: 10  
  48.     },  
  49.     buttonTouchableOpacity: {  
  50.         backgroundColor: '#2980b6',  
  51.   
  52.     },  
  53.     buttonNativeFeedback: {  
  54.         backgroundColor: '#00ff00',  
  55.   
  56.     },  
  57.     buttonWithoutFeedback: {  
  58.         backgroundColor: '#B08B83',  
  59.   
  60.     },  
  61.     btnTextStyle: {  
  62.         color: '#fff',  
  63.         textAlign: 'center',  
  64.         fontWeight: '700',  
  65.         fontSize: 15,  
  66.     }  
  67. })  
  68.   
  69. export default TouchableButton;  
Output - for Android platform
Buttons for Android platform
Output - for iOS platform
 
Buttons for iOS platform

Summary

 
In this article, I discussed what is touches and types of components for touches in React Native. Also, we saw how to create a custom button and how to use it in React Native.