How to use pressable in React Native

React Native is an open-source JavaScript framework built on top of React. As React is mainly developed to build web applications, it is primarily designed to build natively rendering mobile applications for iOS and Android.

The `pressable` component

React Native provides a component named Pressable component that allows us to handle touch events on various UI elements. It helps us detect simple taps or more complex interactions like long presses.

Using the `pressable` component

Some of the essential propsThe props are properties passed to the React components as an arguments. of the Pressable component include:

onPressIn: It is called when the press is activated.
onPressOut: It is called when the press is deactivated.
onLongPress: It is called when the user presses the finger longer than 500 milliseconds.
onPress: It is called after the onPressOut.
delayLongPress: It is used to specify the delay (in milliseconds) before the onLongPress is triggered when the user presses down on the pressable component. By default, this value is set to 500 milliseconds.
disabled: When its value is set to true it disables the press functionality. By default, its value is false.

Working of the `pressable` component

When a user touches the pressable component, it triggers the onPressIn functions which leads to the following two possible scenarios.

If the user removes the touch immediately, the onPressOut function is triggered, which is followed by the onPress function.

import React, {useState} from 'react';
import { Pressable, StyleSheet, Text, View} from 'react-native';

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    padding: 100,
  },
  text: {
    fontSize: 17,
  },
  title: {
    fontSize: 17,
    paddingLeft: 10,
  },
  pressableButton: {
    width: 200,
    height: 50,
    borderRadius: 8,
    padding: 15,
    margin: 10,
    borderWidth: 1,
    borderColor: '#636363',
    backgroundColor: '#e3e3e3',
  },
  textBox: {
    padding: 15,
    margin: 10,
    borderWidth: 1,
    borderColor: '#636363',
    backgroundColor: '#f9f9f9',
  },
});

const PressableDemo = () => {
 
  const [pressCount, setPressCount] = useState(0);
  const [message, setMessage] = useState(' ');
 
  let pressLog = 'Pressed 0 time';
  if (pressCount == 1) {
    pressLog = 'Pressed 1 time';
  } else if (pressCount > 1) {
    pressLog = 'Pressed ' + pressCount + ' times';
  }

  return ( 
    <View style={styles.container}>
      <View>

      <Pressable style={styles.pressableButton}
        onPressIn={() => {
          setPressCount(current => current + 1);
          setMessage('Press in'); }}
          
        onPress={() => {
          setMessage('Press'); }} 
        
        onPressOut={() => {
          setMessage('Press out'); }}

        onLongPress={() => {
          setMessage('Long Press'); }}
        
        // 600 milliseconds delay in onLongPress
        delayLongPress={600} 
        
        // Whether press functionality is disbaled
        //disabled={true}
      >
      {({pressed}) => (
          <Text style={styles.text}>{pressed ? 'Pressed...' : 'Press me...'}</Text>
      )}
      </Pressable>
      </View>

      <View>
      <Text style={styles.title}>Touch event: </Text>
      <Text style={styles.textBox}>{message}</Text>
      </View>
      
      <View>
      <Text style={styles.title}>Press count: </Text>
      <Text style={styles.textBox}>{pressLog}</Text>
      </View>
     

    </View>
  );
}

export default PressableDemo;

Implementing the Pressable component

Code explanation

The code above is explained below:

Line 1: We import the React and useState component from the react library.
Line 2: We import the Pressable, StyleSheet, Text, and View component from the react-native library.
Lines 4–33: We add styling to the Pressable component for enhancing the UI experience using the StyleSheet component.
Line 35: We create a functional component PressableDemo that returns JSX.
Line 37: We create a pressCount variable to track the number of times the Pressable component is pressed.
Line 38: We create a message variable to display the triggered property.
Lines 40–45: We define a pressLog variable to display the number of times the Pressable component has been pressed.
Line 51–74: We create a Pressable component with the following properties.
- Lines 52–54: We increase the pressCount variable and set the message value to "PressIn" when the onPressIn prop is triggered.
- Lines 56–57: We set the message value to 'Press' when the onPress prop is triggered.
- Lines 59–60: We set the message value to 'Press out' when the onPressOut prop is triggered.
- Lines 62–63: We set the message value to 'Long press' when the onLongPress prop is triggered.
- Line 66: We add the delay of 600 milliseconds before the onLongPress prop is triggered using the delayLongPress prop.
- Line 69: We disabled the press functionality by setting the disabled prop to true. Uncomment the line to see the results.
Lines 71–73: We define a function which takes pressed property as an argument and displays text when when a Pressable component is pressed.
Lines 77–80: We displayed the message value using the text component to show which event is currently triggered.
Lines 82–85: We displayed the pressLog value using the text component to show the number of times the pressable component is pressed.
Line 92: We export the PressableDemo component as a default export.

The Pressable component is a very useful component to add interactivity in React Native. We can use different available props to handle press events (such as tapping or pressing a button) to effectively respond to user interaction, enhancing the overall user experience of the applications.

Free Resources

How to use pressable in React Native

The pressable component

Using the pressable component

Working of the pressable component

Implementing the Pressable component

Code explanation

The `pressable` component

Using the `pressable` component

Working of the `pressable` component

Implementing the `Pressable` component