Example of onPressIn onPressOut in Pressable React Native

Hello friends, In today’s tutorial we would learn about Pressable component’s 2 methods onPressIn and onPressOut. As we all know Before pressable we usages Touchable Opacity or other Touchable components to make custom buttons in react native. But when Pressable came it all change. Pressable comes with so much customization options including Press events. We can handle 5 different types of touch events in Pressable. Two of them is onPressIn and onPressOut. So in this tutorial we would learn about Example of onPressIn onPressOut in Pressable React Native. You can learn more about them Here.

Explanation :-

  • onPressIn :- It calls immediately when user touch the Pressable but before onPress and onPressOut.
  • onPressOut :- It calls when user release the Touch button. But calls after onPress.

Contents in this project Example of onPressIn onPressOut in Pressable React Native :-

1. Open your project’s main App.js file and import useState, Alert, Pressable, SafeAreaView, StyleSheet, Text and View component.

2. Creating our main App component.

3. Creating a State named as onPressInActive with State update method SetOnPressInActive. We are using this state to set background color of Pressable button.

4. Creating a function named as callOnPress. In this function we’re simply printing a Alert.

5. Creating return() block, Now here we would make our main Pressable component with onPressIn and onPressOut methods.

6. Creating Style.

7. Complete Source Code for App.js File :-

Live Screenshot :-

Example of onPressIn onPressOut in Pressable React Native

Leave a Reply

Your email address will not be published. Required fields are marked *