How to Set onPress on a View in React Native?

Nov 18, 2022 . Admin

Now, let's see an example of how to set on press function to view in react native. it's a simple example of how to set on press on a view in react native. you can see on press function react native. I explained simply about the call function on press react native. follow below step for how to use on press in react native.

In this example, We will set to onpress event to view parts in react native.you can use to onStartShouldSetResponder attribute to view components in react native app.below's this example.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp
Step 2: App.js

In this step, You will open the App.js file and put the code.

import React from 'react';
import {View, Alert, StyleSheet} from 'react-native';

const Home = () => {
  return (
    <View style={styles.container}>
      <View
        style={styles.view}
        onStartShouldSetResponder={() =>
          Alert.alert('OnPress', 'Clicked on View Part')
        }
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  view: {
    height: 200,
    width: '100%',
    backgroundColor: 'yellow',
  },
});

export default Home;
Step 3: Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output:

It will help you...

#React Native