Pressable Component in React Native

Pressable is a React Native component that detects press interactions from the user.

import { Pressable } from "react-native";

It can be used to create custom buttons and other interactive components.

Import Pressable from the react-native package.

import { Pressable } from "react-native";

It can also be imported together with View and Text.

import {
    View,
    Text,
    Pressable
} from "react-native";

<Pressable
    onPress={() => alert("Hello")}
>

    <Text>
        Press Me
    </Text>

</Pressable>

The onPress event runs when the user presses the component.

The onPress prop is the most commonly used Pressable event.

function handlePress() {

    alert("Button Pressed!");

}

return (
    <Pressable onPress={handlePress}>

        <Text>
            Click Me
        </Text>

    </Pressable>
);

Text is commonly placed inside Pressable to create a button-like interface.

<Pressable
    onPress={() => alert("Welcome")}
>

    <Text>
        Welcome
    </Text>

</Pressable>

A Pressable can be styled using the style prop.

const styles = StyleSheet.create({

    button: {
        backgroundColor: "black",
        padding: 15,
        borderRadius: 8
    }

});

<Pressable
    style={styles.button}
    onPress={() => alert("Pressed")}
>

    <Text>
        Submit
    </Text>

</Pressable>

The Text inside Pressable can have its own style.

const styles = StyleSheet.create({

    buttonText: {
        color: "white",
        textAlign: "center",
        fontWeight: "bold"
    }

});

<Pressable style={styles.button}>

    <Text style={styles.buttonText}>
        Submit
    </Text>

</Pressable>

Pressable can contain a View and multiple child components.

<Pressable
    onPress={() => alert("Card Pressed")}
>

    <View style={styles.card}>

        <Text>
            Student Profile
        </Text>

        <Text>
            Open Profile
        </Text>

    </View>

</Pressable>

This approach is useful for creating clickable cards.

A mobile application should provide visual feedback when the user presses an interactive element.

Pressable supports a function-based style prop that receives information about the current press state.

<Pressable
    style={({ pressed }) => ({
        opacity: pressed ? 0.5 : 1
    })}
>

    <Text>
        Press Me
    </Text>

</Pressable>

The pressed value tells you whether the Pressable is currently being pressed.

style={({ pressed }) => ({

    backgroundColor:
        pressed ? "gray" : "black"

})}

This can be used to change the appearance while the user is pressing the element.

The onPressIn event is called when the press interaction starts.

<Pressable
    onPressIn={() => {
        console.log("Press started");
    }}
>

    <Text>
        Press Me
    </Text>

</Pressable>

The onPressOut event is called when the press interaction ends.

<Pressable
    onPressOut={() => {
        console.log("Press ended");
    }}
>

    <Text>
        Press Me
    </Text>

</Pressable>

The onLongPress event runs when the user holds the Pressable for a longer period.

<Pressable
    onLongPress={() => {
        alert("Long Press");
    }}
>

    <Text>
        Hold Me
    </Text>

</Pressable>

The delayLongPress prop can be used to specify how long the user needs to press before the long-press event is triggered.

<Pressable
    onLongPress={() => {
        alert("Long Press");
    }}
    delayLongPress={1000}
>

    <Text>
        Hold for a Moment
    </Text>

</Pressable>

The value is specified in milliseconds.

Pressable can be used with an alert for simple demonstrations.

import {
    Alert,
    Pressable,
    Text
} from "react-native";

<Pressable
    onPress={() => {
        Alert.alert(
            "Message",
            "Button pressed!"
        );
    }}
>

    <Text>
        Show Message
    </Text>

</Pressable>

Instead of writing the complete function inside onPress, you can define a separate function.

function handleSubmit() {

    console.log("Form submitted");

}

return (
    <Pressable
        onPress={handleSubmit}
    >

        <Text>
            Submit
        </Text>

    </Pressable>
);

You can pass values to a function using an arrow function.

function showStudent(name) {

    console.log(name);

}

return (
    <Pressable
        onPress={() =>
            showStudent("Rahul")
        }
    >

        <Text>
            Rahul
        </Text>

    </Pressable>
);

Pressable can update React state when the user interacts with it.

import { useState } from "react";

const [count, setCount] =
    useState(0);

return (
    <View>

        <Text>
            Count: {count}
        </Text>

        <Pressable
            onPress={() =>
                setCount(count + 1)
            }
        >

            <Text>
                Increase
            </Text>

        </Pressable>

    </View>
);

A simple counter demonstrates how Pressable and state work together.

const [count, setCount] =
    useState(0);

<Text>
    {count}
</Text>

<Pressable
    style={styles.button}
    onPress={() =>
        setCount(count + 1)
    }
>

    <Text style={styles.buttonText}>
        + Add
    </Text>

</Pressable>

A Pressable can be disabled when the user should not be able to interact with it.

<Pressable
    disabled={true}
    onPress={() => {
        alert("Pressed");
    }}
>

    <Text>
        Disabled
    </Text>

</Pressable>

When disabled, the press interaction is not triggered.

The disabled prop can be controlled using state or other application conditions.

const [disabled, setDisabled] =
    useState(false);

<Pressable
    disabled={disabled}
    onPress={() => {
        console.log("Pressed");
    }}
>

    <Text>
        Submit
    </Text>

</Pressable>

Pressable is commonly used to build custom buttons instead of depending only on a standard button appearance.

const styles = StyleSheet.create({

    button: {
        backgroundColor: "black",
        padding: 15,
        borderRadius: 10,
        marginTop: 20
    },

    buttonText: {
        color: "white",
        textAlign: "center",
        fontSize: 18,
        fontWeight: "bold"
    }

});

<Pressable
    style={styles.button}
    onPress={() =>
        alert("Submitted")
    }
>

    <Text style={styles.buttonText}>
        Submit
    </Text>

</Pressable>

A complete card can be made interactive by wrapping it with Pressable.

<Pressable
    onPress={() =>
        alert("Course selected")
    }
>

    <View style={styles.card}>

        <Text style={styles.title}>
            React Native
        </Text>

        <Text>
            Learn Mobile App Development
        </Text>

    </View>

</Pressable>

Pressable can contain an icon and text together.

<Pressable
    style={styles.button}
    onPress={() =>
        console.log("Profile")
    }
>

    <Text style={styles.buttonText}>
        👤 Profile
    </Text>

</Pressable>

You can also use an icon library when your project includes one.

Pressable can trigger navigation when a navigation library is being used in the application.

<Pressable
    onPress={() =>
        navigation.navigate("Profile")
    }
>

    <Text>
        Open Profile
    </Text>

</Pressable>

The exact navigation code depends on the navigation setup used by the application.

Pressable can be used for actions such as submitting forms.

<Pressable
    style={styles.button}
    onPress={() => {

        console.log(
            "Form submitted"
        );

    }}
>

    <Text style={styles.buttonText}>
        Submit Form
    </Text>

</Pressable>

import {
    View,
    Text,
    Pressable,
    StyleSheet
} from "react-native";

export default function App() {

    function handlePress() {

        alert("Button Pressed!");

    }

    return (
        <View style={styles.container}>

            <Text style={styles.title}>
                Student Dashboard
            </Text>

            <Pressable
                style={({ pressed }) => [

                    styles.button,

                    {
                        opacity:
                            pressed ? 0.6 : 1
                    }

                ]}
                onPress={handlePress}
                onLongPress={() =>
                    alert("Long Press")
                }
            >

                <Text style={styles.buttonText}>
                    Open Dashboard
                </Text>

            </Pressable>

        </View>
    );
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: "center",
        padding: 20
    },

    title: {
        fontSize: 26,
        fontWeight: "bold",
        textAlign: "center",
        marginBottom: 20
    },

    button: {
        backgroundColor: "black",
        padding: 16,
        borderRadius: 10
    },

    buttonText: {
        color: "white",
        fontSize: 17,
        fontWeight: "bold",
        textAlign: "center"
    }

});

Pressable is especially useful when you need more control over the appearance and behavior of an interactive element.

• Use meaningful press actions.
• Provide clear visual feedback.
• Use onPress for normal tap actions.
• Use onLongPress only when long-press behavior is useful.
• Disable the component when an action should not be available.
• Keep button text clear and concise.
• Make interactive areas easy to touch.
• Consider accessibility for interactive elements.
• Use reusable custom button components when the same design appears repeatedly.

Pressable
 ↓
Create Interactive Element
 ↓
Add onPress
 ↓
Add Styling
 ↓
Add Press Feedback
 ↓
Handle onPressIn / onPressOut
 ↓
Optional onLongPress
 ↓
Use State if Required
 ↓
Disable When Necessary
 ↓
Create Interactive UI

Pressable is one of the most useful components for creating custom interactive interfaces. You will use it for buttons, cards, menus, actions and many other interactive elements throughout a React Native application.