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
|
1 2 3 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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> </> ); |
- 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
Textcomponent, it handles various press events.- onPress: Calls
onPressFunctionwhen the button is pressed. - style: Changes background color based on the
pressedstate (usesColors.lightorColors.dark). - onLongPress, onPressIn, onPressOut: Attaches the respective handlers to the
Pressable.
- onPress: Calls
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
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; |
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.
Be the first to comment.