How to use Pressable in React Native? Code Example

<Pressable> is the core component to record different stages of press events. React Native recommends using this in place of TouchableHighlight, TouchableWithoutFeedback and TouchableOpacity.

Let’s see how pressable works –

1. User pressed the button normally –

The events will occur in this series –

onPressIn (When pressed)
⬇️
onPressOut (When button released)
⬇️
onPress (after onPressOut)

2. User long pressed the button

The press events will occur in this series for long-press –

onPressIn (When pressed)
⬇️ After 500ms
onLongPress
⬇️
onPressOut (When button released)

There are two important options in pressable component –

• HitRect – Suppose your component is small but you want users to give more room for tap then you can set a bigger area for tapping. This can be done using HitRect property. It is set by hitSlop prop.
• PressRect – If a user drags her finger away from clickable element then clicks do not register. But we can give some room for that. We can set a bond up to which if a user drags finger when button is in pressed state and release the finger, then it will still count as click. It is set by pressRetentionOffset prop.

Important Properties

1. In style prop, you will get current state of component – pressed or not pressed. Like this –

<Pressable
  style={({pressed}) => [{backgroundColor: pressed ? '#FF0000' : '#DDDDDD'}]}
>

</Pressable>

2. You will also get the pressed state for child component. Like this –

<Pressable>
 
  {({ pressed }) => (
       <Text>
         {pressed ? "I am currently Pressed" : "Not Pressed"}
       </Text>
  )}

</Pressable>

Code Example

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

const PressableComponent = () => {
  
  return (
    <View style={styles.container}>
      <Text>Simple Pressable</Text>
      <Pressable
        onPress={() => {Alert.alert('Simple Button Pressed')}}
      >
        <View style={styles.button}>
          <Text>
            I am Simple Button
          </Text>
        </View>
      </Pressable>

      <Text>TouchableOpacity from Pressable</Text>
      <Pressable
        onPress={() => {Alert.alert('TouchableOpacity Button Pressed')}}
        style={({pressed}) => [{
          opacity: pressed ? 0.2 : 1
        }]}
      >
        <View style={styles.button}>
          <Text>
            TouchableOpacity Way
          </Text>
        </View>
      </Pressable>

      <Text>TouchableHighlight from Pressable</Text>
      <Pressable
        onPress={() => {Alert.alert('TouchableOpacity Button Pressed')}}
        style={({pressed}) => [styles.button, {
          opacity: pressed ? 0.6 : 1,
          backgroundColor: pressed ? '#FF0000' : '#DDDDDD'
        }]}
      >
        <View>
          <Text>
            TouchableHighlight Way
          </Text>
        </View>
      </Pressable>
      
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  button: {
    padding:10,
    margin: 10,
    backgroundColor: '#DDDDDD',
  }
  
});

export default PressableComponent;

Output –

From the image you can see that we have 3 phones of iOS and Android OS. All of them are showing 3 buttons.

In the first phone, we have pressed the 1st button but nothing is visually different. This is due to the default styling of pressable. It appears like TouchableWithoutFeedback button.

In the second phone, we are pressing 2nd button and it’s opacity is reduced while it’s in pressed state. This is due to the opacity style we used in code at line 23. This button has emulated the functionality of TouchableOpacity.

In the third phone, we are pressing 3rd button. The opacity is reduced and there is a red background color, just like we saw in TouchableHighlight article. This is because of the style in code from line 36 to 39.

This proves that Pressable component can create any kind of styling and we don’t need to use previous touchable components.

Live Demo

Conclusion

Pressable is the core api which is used to wrap components and add press events for them. It is future proof and better than other touchable components. You can create any kind of styles because it provides pressed flag in style prop as well as to the child component.