How to Create Button in React-Native App ?

In this article, we will see how to create buttons in react-native, their syntax, and different types of buttons available in react native.

Creating a Button in react native is very simple. First, we have to import the button component from React Native.

import { Button } from 'react-native'

If you are not familiar with components of react native, then you can check out introductory article on React Native

Syntax:

import React, { Component } from 'react'
import { Button } from 'react-native'
const Test = () => {
    return(
        <Button
            // Define Button property
        />
    )
}
export default Test

The above syntax shows how a button is used in react native. It involves defining an XML tag with a button element, now according to our requirement different properties can be defined for a button.

Types of Button in React Native There are five types of Buttons which are listed below:

1. Basic Types: These fall into the basic category and can be of the following types:
   • Button: It is used for defining click buttons.
   • Submit: This type of button is used along with a form to submit details.
   • Reset: It is used to clear field contents on click of it.
2. Flat Button: It has a style of no background color. To create a flat button in react, set CSS class to e-flat.
3. Outline Button: This type of button contains a border with a transparent background. To create this type of button, set the CSS class as an e-outline.
4. Round Button: This button is in a circular shape. To create a round button set CSS class to e-round.
5. Toggle Button: Toggle button is a button whose state can be changed. Let us consider an example of a play and pause button. On Click of this button, its state is changed and after another click, it regains its original state. This state change function is achieved by click event of the button. To create a toggle we need to set isToggle property to true.

Steps to create Buttons:

• Write and export the code to make the button and put it in a reusable component.
• Import that component into the App.js file.
• Put that button in your file the same as any other component.
• Add some styling in the button file.

Complete code to create a Button in React Native:

import React from 'react';

// Import the essential components from react-native
import {
    StyleSheet, Button, View, SafeAreaView,
    Text, Alert
} from 'react-native';

// Function for creating button
export default function App() {
    return (
        <View style={styles.container}>

            // Create a button
            <Button

                // Some properties given to Button
                title="Geeks"
                onPress={() => Alert.alert(
                    'Its GeeksforGeeks !')}
            />
        </View>
    );
}

// Some styles given to button
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#71EC4C',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

Output:

• Before Click on Button:
  
• After Click on Button:
  

Steps to Run Project:

• Go to your project folder and type the following command on the terminal. The following command create your project.

  react-native init MyAppName

• Select App.js file and Paste the project code (complete code of project given above) then save the file.
• Start an emulator to run the project. The following command will launch the emulator.

  emulator -avd MyAVD

• Now, use run the project using the following command.

  react-native run-android

Another approach to Run Project:

• Open the terminal and jump into your project folder.

  cd ProjectName

• To run the project on Expo type the following command in your terminal.

  expo start

• Scan the Expo App Bar Code in your Expo App in your Mobile.