How to Create Button in React-Native App ?

27 Apr, 2020
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:
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.Flat Button: It has a style of no background color. To create a flat button in react, set CSS class to e-flat.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.Round Button: This button is in a circular shape. To create a round button set CSS class to e-round.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.
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.
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.
Flat Button: It has a style of no background color. To create a flat button in react, set CSS class to e-flat.
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.
Round Button: This button is in a circular shape. To create a round button set CSS class to e-round.
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-nativeimport {    StyleSheet, Button, View, SafeAreaView,    Text, Alert} from 'react-native';  // Function for creating buttonexport 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 buttonconst 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
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
emulator -avd MyAVD
Now, use run the project using the following command.react-native run-android
react-native run-android
Another approach to Run Project:
Open the terminal and jump into your project folder.cd ProjectName
cd ProjectName
To run the project on Expo type the following command in your terminal.expo start
expo start
Scan the Expo App Bar Code in your Expo App in your Mobile.
react-js
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.