React Native Button onPress Event Example

Apr 18, 2022 . Admin

Hi Guys,

Hello all! In this article, we will talk about how to use the button onPress event in react native. you will learn to react native button onPress event example. We will look at the example of how to add button onPress event in react native. We will look at the example of how to create a button onPress event using react native. Alright, let’s dive into the steps.

I will give you a simple example of a button onPress event example in react native. In this demo, we applied the onPress Event button and called onPress() function, when the user clicks on the button.

So, let's following example:

Step 1 - Create project

In the first step Run the following command for create project.

expo init ButtonOnPress

Step 2 - App.js

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

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

const Click = () => {
    alert('Mywebtuts.com');
};

export default function App() {
    return (
        <View style={styles.maincontainer}>
            <Text style={styles.title}>React Native Button onPress event</Text>
            <View style={styles.container}>
                <Button title="click me" onPress={Click} />
            </View>
            <View style={styles.container}>
                <Button
                    title="Press Me"
                    onPress={() => Alert.alert('Mywebtuts.com')}
                    color="green"
                />
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    maincontainer: {
        marginTop: 40,
    },
    title: {
        backgroundColor: 'red',
        textAlign: 'center',
        padding: 10,
        fontSize: 20,
        color: '#FFFF',
    },
    container: {
        marginTop: 40,
        alignItems: 'center',
    },
});

Step 3 - Run project

In the last step run your project using bellow command.