React Native Pressable Component

Pressable is a React Native component used to detect and handle different types of press interactions on UI elements. It provides more control and flexibility compared to other touchable components.

Detects press events like onPress, onLongPress, onPressIn, and onPressOut.
Allows custom styling based on press state.
Used to create interactive buttons and touchable UI elements.

JavaScript

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

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      
      <Pressable onPress={() => Alert.alert("Pressed!")}>
        <Text style={{ fontSize: 18 }}>Press Me</Text>
      </Pressable>

    </View>
  );
}

Pressable makes the Text pressable.
onPress runs when the user taps it.
Used to handle press interactions.

Syntax

<Pressable onPress={function}>    
      {/* Child Component like Text, View, Image */}
</Pressable>

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo.

cd app-name

Project Structure

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

1. For the Android users,

For the Android Emulator, press "a" as mentioned in the image below.
For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.

2. For iOS users, simply scan the QR code using the Camera app.

3. If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Create a new component folder (optional)

You can create a new folder called "components" to organize all component files better, as mentioned in the image below. Alternatively, you can write the component code directly in App.js.

Step 4: Working with PressableComponent.js

- Import libraries: Import required libraries at the top of the file.

JavaScript

// Import necessary libraries and components
import React from 'react';
// Import Text, View, StyleSheet, Alert, Pressable, and Image from react-native
import { Text, View, StyleSheet, Alert, Pressable, Image } from 'react-native';

- StyleSheet: Create a StyleSheet to style components like text, container, and image.

JavaScript

// Define styles for the component
const styles = StyleSheet.create({
  text: {
    fontSize: 30, // Font size for the text
    fontWeight: 'bold', // Bold font weight
  },
  container: {
    padding: 100, // Padding around the container
    justifyContent: 'center', // Center content vertically
    alignItems: 'center', // Center content horizontally
  },
  image: {
    marginTop: 40, // Margin above the image
    height: 200, // Height of the image
    width: 200, // Width of the image
  },
});

- Pressable: This is a React Native component that makes its child components interactive for the user. For example, we can wrap a Text and an Image component with a Pressable component. When the user taps on either the Text or the Image, it will respond with an Alert message as specified in the code below.

JavaScript

{/* Pressable component with a Text element */}
<Pressable
    onPress={() => {
        
        Alert.alert('Text Pressable Example'); // Show an alert when pressed
        
        }}>
        
    <Text style={styles.text}>Press Me</Text>
    
</Pressable>


{/* Pressable component with an Image element */}
<Pressable
onPress={() => {
    
    Alert.alert('Image Pressable Example'); // Show an alert when pressed
    
    }}>
    
    <Image
    source={{
    uri: 'https://media.geeksforgeeks.org/wp-content/uploads/20220217151648/download3.png', // Image source URL
    }}
    style={styles.image} // Apply styles to the image
    />
    
</Pressable>

Now, wrap the two Pressable components with a View component and return from the PressableExample component. Also, ensure to export the PressableExample.

PressableComponent.js:

PressableComponent.js

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

// Define the PressableExample component
const PressableExample = () => {
  return (
    <View style={styles.container}>
      {/* Pressable component with a Text element */}
      <Pressable
        onPress={() => {
          console.log('Pressable Example'); // Log message to console
          Alert.alert('Text Pressable Example'); // Show an alert when pressed
        }}>
        <Text style={styles.text}>Press Me</Text>
      </Pressable>

      {/* Pressable component with an Image element */}
      <Pressable
        onPress={() => {
          Alert.alert('Image Pressable Example'); // Show an alert when pressed
        }}>
        <Image
          source={{
            uri: 'https://media.geeksforgeeks.org/wp-content/uploads/20220217151648/download3.png', // Image source URL
          }}
          style={styles.image} // Apply styles to the image
        />
      </Pressable>
    </View>
  );
};

export default PressableExample;

// Define styles for the component
const styles = StyleSheet.create({
  text: {
    fontSize: 30, // Font size for the text
    fontWeight: 'bold', // Bold font weight
  },
  container: {
    padding: 100, // Padding around the container
    justifyContent: 'center', // Center content vertically
    alignItems: 'center', // Center content horizontally
  },
  image: {
    marginTop: 40, // Margin above the image
    height: 200, // Height of the image
    width: 200, // Width of the image
  },
});

Step 5: Working with App.js

Now call this PressableExample Component in the main "App" Component in App.js.

App.js:

JavaScript

// Import React library to use React components
import React from 'react';
// Import View component from react-native for layout purposes
import { View } from 'react-native';
// Import the custom PressableExample component from the components folder
import PressableExample from './components/PressableComponent';

// Define the main App component
const App = () => {
  return (
    // Render a View container
    <View>
      {/* Render the PressableExample component inside the View */}
      <PressableExample />
    </View>
  );
};

// Export the App component as the default export of this file
export default App;

Or

You can write the whole code in one file, i.e, App.js.

App.js:

JavaScript

// Import necessary libraries and components
import React from 'react';
// Import Text, View, StyleSheet, Alert, Pressable, and Image from react-native
import { Text, View, StyleSheet, Alert, Pressable, Image } from 'react-native';

// Define the main App component
const App = () => {
  return (
    // Render a View container
    <View>
      {/* Render the PressableExample component inside the View */}
      <PressableExample />
    </View>
  );
};

// Define the PressableExample component
const PressableExample = () => {
  return (
    <View style={styles.container}>
      {/* Pressable component with a Text element */}
      <Pressable
        onPress={() => {
          console.log('Pressable Example'); // Log message to console
          Alert.alert('Text Pressable Example'); // Show an alert when pressed
        }}>
        <Text style={styles.text}>Press Me</Text>
      </Pressable>

      {/* Pressable component with an Image element */}
      <Pressable
        onPress={() => {
          Alert.alert('Image Pressable Example'); // Show an alert when pressed
        }}>
        <Image
          source={{
            uri: 'https://media.geeksforgeeks.org/wp-content/uploads/20220217151648/download3.png', // Image source URL
          }}
          style={styles.image} // Apply styles to the image
        />
      </Pressable>
    </View>
  );
};
// Export the App component as the default export of this file
export default App;

// Define styles for the component
const styles = StyleSheet.create({
  text: {
    fontSize: 30, // Font size for the text
    fontWeight: 'bold', // Bold font weight
  },
  container: {
    padding: 100, // Padding around the container
    justifyContent: 'center', // Center content vertically
    alignItems: 'center', // Center content horizontally
  },
  image: {
    marginTop: 40, // Margin above the image
    height: 200, // Height of the image
    width: 200, // Width of the image
  },
});

Output:

React Native Pressable Component

Syntax

Step-by-Step Implementation

Step 1: Create a React Native Project

Project Structure

Step 2: Run Application

Step 3: Create a new component folder (optional)

Step 4: Working with PressableComponent.js

Step 5: Working with App.js

Or

App.js:

Explore