Pressable Component in React native

Aniket Raj

10 October 2024

Pressable Component in React native

In this blog, we are going to learn about the new component in React Native: “Pressable.” We can think of it as an updated version of TouchableOpacity.

Like TouchableOpacity, Pressable is a component wrapper, meaning you need to define a child component within it. Pressable can detect various stages of pressing events.

Pressable provides more functions to handle click events, such as onPressIn, onPressOut, onPress, and onLongPress. I have used all the mentioned functions in the snippet below.

Implementation

Now we are implementing the Pressable Component in React-native Page, step by step.

Imports

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

import React from 'react';

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

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

React: The library for building user interfaces.

Pressable: A component that responds to touch interactions.

StatusBar: Used to control the app’s status bar appearance.

StyleSheet: For creating styles.

Text: To render text on the screen.

ToastAndroid: A module for displaying brief messages on Android.

View: A container for layout and style.

Colors: Provides default colors for the app.

Event Handlers

const onPressFunction = () => {
  ToastAndroid.show("onPressFunction()", ToastAndroid.SHORT);
};

const onLongPress = () => {
  ToastAndroid.show("onLongPress()", ToastAndroid.SHORT);
};

const pressIn = () => {
  ToastAndroid.show("pressIn()", ToastAndroid.SHORT);
};

const pressOut = () => {
  ToastAndroid.show("pressOut()", ToastAndroid.SHORT);
};

const onPressFunction = () => {

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

};

const onLongPress = () => {

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

};

const pressIn = () => {

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

};

const pressOut = () => {

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

};

These are four event handler functions that display toast messages when the corresponding press events occur:

onPressFunction: Triggered on a regular press.
onLongPress: Triggered on a long press.
pressIn: Triggered when the press is initiated.
pressOut: Triggered when the press is released.

JSX Layout

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

return (

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

</>

);

StatusBar: Sets the status bar style to dark content.
View: View is one of the basic components in the react native and in this for styles, a container that centers its children both vertically and horizontally.
Pressable: Wrapped around a Text component, it handles various press events.
- onPress: Calls onPressFunction when the button is pressed.
- style: Changes background color based on the pressed state (uses Colors.light or Colors.dark).
- onLongPress, onPressIn, onPressOut: Attaches the respective handlers to the Pressable.

Inside the Pressable, it conditionally renders the Text:

If pressed, it shows “Pressed!” with pressedTextStyle.
Otherwise, it shows “Press Me” with unPressedTextStyle.

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 = () => {
  const onPressFunction = () => {
    ToastAndroid.show("onPressFunction()", ToastAndroid.SHORT);
  };

  const onLongPress = () => {
    ToastAndroid.show("onLongPress()", ToastAndroid.SHORT);
  };

  const pressIn = () => {
    ToastAndroid.show("pressIn()", ToastAndroid.SHORT);
  };

  const pressOut = () => {
    ToastAndroid.show("pressOut()", ToastAndroid.SHORT);
  };

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

const styles = StyleSheet.create({
  container: {
    flex: 1, // Use flex to allow the container to fill the screen
    justifyContent: 'center',
    alignItems: 'center',
  },
  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 = () => {

const onPressFunction = () => {

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

};

const onLongPress = () => {

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

};

const pressIn = () => {

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

};

const pressOut = () => {

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

};

return (

<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: {

flex: 1, // Use flex to allow the container to fill the screen

justifyContent: 'center',

alignItems: 'center',

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;

Here Is The Output Of The Project:

Pressable Component in React-native

Creates a simple React Native application with a single button that responds to various press events, displaying different messages based on user interactions.

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

References

https://reactnative.dev/docs/pressable,

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

Conclusion

In this blog, we explored the new Pressable component in React Native, which serves as an enhanced alternative to TouchableOpacity.

By utilizing Pressable, we can easily manage various touch interactions, such as onPressIn, onPressOut, onPress, and onLongPress, allowing for a more responsive and engaging user experience.

The provided code snippet demonstrates how to implement these features effectively, showcasing the versatility of Pressable in handling user input.

You can also check other blogs from here.

Thank you for reading! ❤️

I hope this blog has helped you understand how to effectively use the Pressable component in React Native and leverage its capabilities to create interactive UIs.