React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms.

Prerequisites:

• Basic knowledge of ReactJs.
• Html, CSS, and javascript with ES6 syntax.
• NodeJs should be installed in your system (install).
• Jdk and android studio for testing your app on the emulator (install).

In this article, We are going to see how to use Pressable component of react-native. Pressable acts a wrapper to the component inside it. Pressable uses React Native’s Pressability API. 

In our project we will wrap text and image separately with Pressable component to show its functionality. We will see the approach step-by-step.

Creating React Native App:

Step 1: Create a react-native project:

npx react-native init DemoProject

Step 2: Start the server using the following command:

npx react-native run-android

Step 3: Now go to your project and create a components folder. Inside the components folder, create a file PressableComponent.js.

Project Structure: The project should look like this:

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

const PressableExample = () => {
  return (
    <View style={styles.container}>
      <Pressable
        onPress={() => {
          Alert.alert('Text Pressable Example');
        }}>
        <Text style={styles.text}>Press Me</Text>
      </Pressable>

      <Pressable
        onPress={() => {
          Alert.alert('Image Pressable Example');
        }}>
        <Image
          source={{
uri: 'https://media.geeksforgeeks.org/wp-content/uploads/20220217151648/download3.png',
          }}
          style={styles.image}
        />
      </Pressable>
    </View>
  );
};

export default PressableExample;

const styles = StyleSheet.create({
  text: {
    fontSize: 30,
    fontWeight: 'bold',
  },
  container: {
    padding: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    marginTop: 40,
    height: 200,
    width: 200,
  },
});

import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
import PressableExample from './components/PressableComponent';

const App: () => Node = () => {
  return (
    <View>
      <PressableExample />
    </View>
  );
};

export default App;

Step to run the application: Run the application using the following command:

npx react-native run-android

Output: