Skip to content
Related Articles
Get the best out of our app
Open App

Related Articles

React Native Touchables Component

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.


<TouchableHighlight onPress={}>
    // Inside Components        

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.



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>
        <TouchableOpacity onLongPress={() => 
               pressAlert("Long Pressed")} >
            <View style={styles.view}>
              <Text style={styles.text}>Long Press Me</Text>
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  view : {
    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. 


My Personal Notes arrow_drop_up
Last Updated : 10 May, 2021
Like Article
Save Article
Similar Reads
Related Tutorials