React Native Set onPress onClick on View Component Android iOS Example Tutorial

Enable click on View component is always useful for mobile developers in react native but in react native this cannot be possible before react native 0.55.2 version. We have to use Touchable opacity or other touchable component and wrap the View component as Child then we can set click event on View using Touchable Opacity. But from react native version 0.55.3 react native provides us a prop named as onStartShouldSetResponder={} which could enable onClick event on View component. Now there is no need to use additional Touchable component to make this happen. So in this tutorial we would React Native Set onPress onClick on View Component Android iOS Example Tutorial.

Contents in this project React Native Set onPress onClick on View Component Android iOS Example Tutorial:

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

2. Create our main Export default App class extends Component.

3. Creating render’s return block and here we would make our Root View component. Now we would make a Child View with onStartShouldSetResponder={} prop to enable clicking functionality.

  • onStartShouldSetResponder={} : Setting up onPress event on View. We are printing a Alert message on Screen to see the effect.

4. Creating Style.

5. Complete Source Code for App.js file:

Screenshot in Android device:

React Native Set onPress onClick on View Component Android iOS Example Tutorial

Screenshots in iOS device:

Leave a Reply

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