React Native Pressable Component Android iOS Example Tutorial

React Native launched its new Pressable component with version 0.63 Stable. The Pressable component is used to detect various stages of click events like onPress, onPressIn and onPressOut. Using then Pressable component we can easily change Button layout or Style on a particular event. So in this tutorial we would learn about React Native Pressable Component Android iOS Example Tutorial.

Contents in this project React Native Pressable Component Android iOS Example Tutorial:

1. Import Text, View, StyleSheet and Pressable component in your project’s main App.js file.

2. Creating our main Export default App class extends Component. This is our main Root parent View class.

3. Creating a function named as printLog(). Inside this function we would simply call a Console Log message. We would call this function on button Click event.

4. Creating render’s return block now here we would call our main Root Parent View.

5. Creating a Text component and 1 Pressable component in Root View.

• onPress :- Used to set click event on Component.
• pressed : Pressed contains a Boolean value which depends whether the Pressable component is clicked or Not. Using the pressed value we can easily change Style or Inside Text of Pressable component. So when user clicks on the button it will automatically change its layout and on releasing the button it will again change its layout.

6. Creating Style.

7. Complete Source Code for App.js file :

Screenshots: