React Native Touchables Component

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 2: Now create a project by the following command.

  expo init 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