React Native Touchables Component - GeeksforGeeks

10 May, 2021
In this article, We are going to see how to create a Touchables in react-native. For this, we are going to use Touchable components. It is used to make any component touchable.
Syntax:
<TouchableHighlight onPress={}>
    // Inside Components        
</TouchableHighlight>
Components in Touchables:
TouchableHighlight: You can use it anywhere you would use a button or link on web. The view’s background will be darkened when the user presses down on the button.
TouchableOpacity: It can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.
TouchableNativeFeedback: It is used in android to display ink surface reaction ripples that respond to the user’s touch.
TouchableWithoutFeedback: If you need to handle a tap gesture but you don’t want any feedback to be displayed, use TouchableWithoutFeedback.
Now let’s start with the implementation:
Step 1: Open your terminal and install expo-cli by the following command.npm install -g expo-cli
Step 1: Open your terminal and install expo-cli by the following command.
npm install -g expo-cli
Step 2: Now create a project by the following command.expo init myapp
Step 2: Now create a project by the following command.
expo init myapp
Step 3: Now go into your project folder i.e. myappcd myapp
Step 3: Now go into your project folder i.e. myapp
cd myapp
Project Structure: It will look like the following.
Example: Now let’s implement the Touchable. Here we created our view as touchable.
App.js
App.js
import React from 'react';import { StyleSheet, View , TouchableHighlight , TouchableOpacity , Text , Alert } from 'react-native';export default function App() {  const pressAlert = (text) => {    Alert.alert("You " + text +  " me");  }  return (    <View style={styles.container}>        <TouchableHighlight style={styles.Touch}             onPress={() => pressAlert("Pressed")} >            <View style={styles.view}>              <Text style={styles.text}>Press Me</Text>            </View>        </TouchableHighlight>        <TouchableOpacity onLongPress={() =>                pressAlert("Long Pressed")} >            <View style={styles.view}>              <Text style={styles.text}>Long Press Me</Text>            </View>        </TouchableOpacity>    </View>  );}  const styles = StyleSheet.create({  container: {    flex: 1,    alignItems: 'center',    justifyContent: 'center',  },  view : {    width:250,    height:50,    backgroundColor : "lightgreen",    alignItems : "center",    justifyContent : "center",    borderColor : "black",    borderWidth : 0.2  },  text : {    fontSize : 20,    color : "white"  },  Touch : {    marginBottom : 30  }});
Start the server by using the following command.
npm run android
Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again. 
Reference: https://reactnative.dev/docs/handling-touches
Picked
React-Native
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Front End Developer Skills That You Need in 2022
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to redirect to another page in ReactJS ?
How to Insert Form Data into Database using PHP ?
How to pass data from child component to its parent in ReactJS ?
How to execute PHP code using command line ?
REST API (Introduction)