Button Component in React Native

Button is a built-in React Native component used to create a simple interactive button.

import { Button } from "react-native";

When the user presses the button, the function provided to onPress is executed.

Button is imported from the react-native package.

import { Button } from "react-native";

You can import it with other components as well.

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

<Button
    title="Click Me"
    onPress={() => {
        alert("Button Pressed");
    }}
/>

The title prop specifies the text displayed on the button.

The title prop specifies the button's displayed text.

<Button
    title="Submit"
/>

For a useful button, you normally provide an onPress handler as well.

The onPress prop defines what should happen when the user presses the button.

function handlePress() {

    alert("Welcome!");

}

<Button
    title="Welcome"
    onPress={handlePress}
/>

Buttons are commonly placed inside View containers to create screen layouts.

<View>

    <Text>
        Student Dashboard
    </Text>

    <Button
        title="Open Dashboard"
        onPress={() =>
            alert("Dashboard")
        }
    />

</View>

A Button can call an alert when it is pressed.

import {
    Button,
    Alert
} from "react-native";

<Button
    title="Show Message"
    onPress={() => {

        Alert.alert(
            "Message",
            "Hello from React Native"
        );

    }}
/>

Instead of writing the function directly inside onPress, you can create a separate function.

function handleLogin() {

    console.log("Login button pressed");

}

return (
    <Button
        title="Login"
        onPress={handleLogin}
    />
);

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

function showStudent(name) {

    console.log(name);

}

<Button
    title="Student"
    onPress={() =>
        showStudent("Rahul")
    }
/>

The color prop can be used to specify the button's color on supported platforms.

<Button
    title="Submit"
    color="blue"
    onPress={() =>
        alert("Submitted")
    }
/>

The exact appearance of the color can vary between platforms.

The disabled prop can prevent the user from pressing the button.

<Button
    title="Submit"
    disabled={true}
    onPress={() =>
        alert("Submitted")
    }
/>

When disabled, the button cannot perform the press action.

The disabled state can be controlled using React state.

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

<Button
    title="Submit"
    disabled={disabled}
    onPress={() => {
        console.log("Submitted");
    }}
/>

A Button can update state when the user presses it.

import { useState } from "react";

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

return (
    <View>

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

        <Button
            title="Increase"
            onPress={() =>
                setCount(count + 1)
            }
        />

    </View>
);

The Button component can be used to create a simple counter.

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

<Text>
    {count}
</Text>

<Button
    title="Add"
    onPress={() =>
        setCount(count + 1)
    }
/>

Every press updates the state and causes the displayed value to change.

A screen can contain multiple Button components.

<View>

    <Button
        title="Login"
        onPress={() =>
            console.log("Login")
        }
    />

    <Button
        title="Register"
        onPress={() =>
            console.log("Register")
        }
    />

    <Button
        title="Help"
        onPress={() =>
            console.log("Help")
        }
    />

</View>

The built-in Button does not provide the same level of layout customization as Pressable. You can place it inside a View and use layout styles to control surrounding space.

const styles = StyleSheet.create({

    buttonContainer: {
        marginTop: 20
    }

});

<View style={styles.buttonContainer}>

    <Button
        title="Submit"
        onPress={() =>
            console.log("Submit")
        }
    />

</View>

Button can be used to submit or process form data.

<View>

    <Text>
        Name
    </Text>

    <TextInput
        placeholder="Enter name"
    />

    <Button
        title="Submit"
        onPress={() => {
            console.log(
                "Form submitted"
            );
        }}
    />

</View>

The value of a TextInput can be stored in state and processed when the Button is pressed.

const [name, setName] =
    useState("");

<TextInput
    value={name}
    onChangeText={setName}
    placeholder="Enter name"
/>

<Button
    title="Save"
    onPress={() => {
        console.log(name);
    }}
/>

When a navigation library is configured, a Button can trigger navigation to another screen.

<Button
    title="Open Profile"
    onPress={() =>
        navigation.navigate("Profile")
    }
/>

The exact navigation code depends on the navigation solution and screen configuration used by the application.

A Button can trigger a function that sends or retrieves data from an API.

async function loadData() {

    const response =
        await fetch(
            "https://example.com/api"
        );

    const data =
        await response.json();

    console.log(data);

}

<Button
    title="Load Data"
    onPress={loadData}
/>

Buttons are commonly used for actions such as logging out.

function handleLogout() {

    console.log("User logged out");

}

<Button
    title="Logout"
    onPress={handleLogout}
/>

In a real application, the logout function may clear authentication data and navigate to a login screen.

A Button can trigger a delete operation.

function deleteStudent() {

    console.log(
        "Student deleted"
    );

}

<Button
    title="Delete"
    color="red"
    onPress={deleteStudent}
/>

For important destructive actions, applications should normally ask the user for confirmation before deleting data.

A loading state can be used to prevent repeated actions while an operation is in progress.

const [loading, setLoading] =
    useState(false);

<Button
    title={
        loading
            ? "Please wait..."
            : "Submit"
    }
    disabled={loading}
    onPress={async () => {

        setLoading(true);

        // Perform operation

        setLoading(false);

    }}
/>

Buttons are interactive controls, so their purpose should be clear to users.

Use meaningful button titles such as:

• Save
• Submit
• Login
• Register
• Open Profile
• Logout

Clear labels make the purpose of an action easier to understand.

• Simple form submission
• Basic login buttons
• Simple actions
• Basic confirmation actions
• Simple navigation actions
• Quick prototypes
• Small applications where advanced button styling is not required

When you need detailed control over layout, pressed states or custom button content, Pressable may be more appropriate.

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

export default function App() {

    function handleLogin() {

        alert("Login button pressed");

    }

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

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

            <View style={styles.button}>

                <Button
                    title="Login"
                    onPress={handleLogin}
                />

            </View>

            <View style={styles.button}>

                <Button
                    title="Register"
                    onPress={() =>
                        alert("Register")
                    }
                />

            </View>

        </View>
    );
}

const styles = StyleSheet.create({

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

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

    button: {
        marginTop: 15
    }

});

• Forgetting to provide an onPress action when one is needed.
• Using unclear button titles.
• Allowing users to repeatedly submit the same action during loading.
• Expecting the built-in Button to provide highly customized layouts.
• Ignoring disabled states for actions that should temporarily be unavailable.
• Using too many buttons without clear organization.

• Use clear and meaningful titles.
• Keep button actions simple and predictable.
• Use onPress for the required action.
• Use disabled when the action is temporarily unavailable.
• Handle loading states for network operations.
• Use confirmation for important destructive actions.
• Use Pressable when advanced customization is required.
• Test buttons on the platforms supported by your application.

Button
 ↓
Set Title
 ↓
Add onPress
 ↓
Write Action
 ↓
Optional State
 ↓
Optional Disabled State
 ↓
Handle Loading
 ↓
Perform Action
 ↓
Update Screen
 ↓
Complete Button Interaction

The Button component is a simple way to add user actions to a React Native application. After learning Button, you can use Pressable when you need more control over the appearance and interaction behavior.