How to Create Button in React-Native App ?

React Native provides pre-defined components like button and TouchableOpacity to create buttons in a 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.

Approach

To create Button in React Native app we will use the React Native Button Component. Import the button component and define custom properties to create a button with required functionalities.

Step to Create React Native Application

Step 1: Open your terminal and run the below command.

npx create-expo-app project-name

Step 2: Now go into the created folder and start the server by using the following command.

cd "project-name"

Step 3: To start the react-native program, execute this command in the terminal of the project folder.

npx expo start

Then press ‘a’ or ‘i’ to open it in your android or ios emulator respectively.

Project Structure:

Button 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.

Example: This example demonstrates Creating Button in React Native

// Filename - App.js

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',
    },
});

Steps 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.

Output: