Pressable Component in React-native

Anand Kashyap

19 January 2024

Pressable Component in React-native

In this blog, we are going to learn about the new component in react-native “Pressable“. We can say that it is an updated version of TouchableOpacity. It is a component wrapper similarly to TouchableOpacity means you have to define a child component in it. Pressable can detect various stages of pressing events.

“Pressable” provides us more functions to detect click-event like onPressIn, onPressOut, onPress, and onLongPress. I have used all the mentioned functions in the below snippet.

Let’s do some code:

import React from 'react';
import { Pressable, StatusBar, StyleSheet, Text, ToastAndroid, View } from 'react-native';
import { Colors } from 'react-native/Libraries/NewAppScreen';


const App: () =&gt; React$Node = () =&gt; {

  function onPressFunction() {
    ToastAndroid.show("onPressFunction()",ToastAndroid.SHORT)
  }

  function onLongPress() {
    ToastAndroid.show("onLongPress()",ToastAndroid.SHORT)
  }
  function pressIn() {
    ToastAndroid.show("pressIn()",ToastAndroid.SHORT)
  }

  function pressOut() {
    ToastAndroid.show("pressOut()",ToastAndroid.SHORT)
  }



  return (
    &lt;&gt;
      &lt;StatusBar barStyle="dark-content" /&gt;
      &lt;View
        contentInsetAdjustmentBehavior="automatic"
        style={styles.container}&gt;
        &lt;Pressable onPress={onPressFunction} style={({ pressed }) =&gt; [
          { backgroundColor: pressed ? Colors.light : Colors.dark }, styles.pressableStyle]}
          onLongPress={onLongPress}
          onPressIn={pressIn}
          onPressOut={pressOut}
          &gt;
          {({ pressed }) =&gt; (
          &lt;Text style={ pressed ? styles.pressedTextStyle : styles.unPressedTextStyle}&gt;
            {pressed ? 'Pressed!' : 'Press Me'}
          &lt;/Text&gt;
        )}
        &lt;/Pressable&gt;

      &lt;/View&gt;
    &lt;/&gt;
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems:'center',
    height:'100%',
    width:'100%'
  },
  unPressedTextStyle: {
    padding:10,
    color: Colors.white,
  }, 
  pressedTextStyle: {
    padding:10,
    color: Colors.black,
  },
  pressableStyle: {
    borderRadius:5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 5,
  }
});

export default App;

import React from 'react';

import { Pressable, StatusBar, StyleSheet, Text, ToastAndroid, View } from 'react-native';

import { Colors } from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {

function onPressFunction() {

ToastAndroid.show("onPressFunction()",ToastAndroid.SHORT)

}

function onLongPress() {

ToastAndroid.show("onLongPress()",ToastAndroid.SHORT)

}

function pressIn() {

ToastAndroid.show("pressIn()",ToastAndroid.SHORT)

}

function pressOut() {

ToastAndroid.show("pressOut()",ToastAndroid.SHORT)

}

return (

<View

contentInsetAdjustmentBehavior="automatic"

style={styles.container}>

<Pressable onPress={onPressFunction} style={({ pressed }) => [

{ backgroundColor: pressed ? Colors.light : Colors.dark }, styles.pressableStyle]}

onLongPress={onLongPress}

onPressIn={pressIn}

onPressOut={pressOut}

{({ pressed }) => (

{pressed ? 'Pressed!' : 'Press Me'}

</Text>

)}

</Pressable>

</View>

</>

);

};

const styles = StyleSheet.create({

container: {

justifyContent: 'center',

alignItems:'center',

height:'100%',

width:'100%'

unPressedTextStyle: {

padding:10,

color: Colors.white,

pressedTextStyle: {

padding:10,

color: Colors.black,

pressableStyle: {

borderRadius:5,

shadowColor: '#000',

shadowOffset: { width: 0, height: 2 },

shadowOpacity: 0.5,

shadowRadius: 2,

elevation: 5,

}

});

export default App;

In conclusion, we will achieve this:

I hope it will help you to integrate the pressable component.

Reference link:- https://reactnative.dev/docs/pressable,

https://reactnative.dev/docs/getting-started