Open In App

How to create a basic button in React Native ?

Last Updated : 10 May, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we will learn how to create a basic button in React Native. To build a React Native app, we will use the Expo CLI, which provides a smoother experience for running your applications.

Expo

It is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

Approach

We will create 3 types of buttons here.

  • Basic Button
  • Custom Coloured Button
  • Disabled Button

We will use the <Button> tag. Let's watch a demo video of what we are going to develop.

Demo Video


Syntax

<Button title= "setTitle" ></Button>


Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.


It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.


Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:


Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

  • For the Android users,
    • For the Android Emulator, press "a" as mentioned in the image below.
    • For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
  • For iOS users, simply scan the QR code using the Camera app.
  • If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.


Step 3: Start Coding

Below is the implementation of the code. In the App.js file, we simply create a button using the <Button> tag. We will also set its color using a color attribute.

- Import libraries: Import required libraries at the top of the file.

JavaScript 
import React from "react"; // Import React library
import {
  StyleSheet, // Import StyleSheet for styling components
  Button,     // Import Button component from React Native
  Text,       // Import Text component for displaying text
  Alert,      // Import Alert for showing alerts
  View        // Import View component for layout
} from "react-native";


- StyleSheet: Create a StyleSheet to style components like the header and setMargin.

JavaScript 
// Define styles for the components
const styles = StyleSheet.create({
  header: {
    fontSize: 20, // Set font size for the header text
    fontWeight: "bold" // Make the header text bold
  },
  setMargin: {
    marginTop: 50, // Add top margin to the container
    marginHorizontal: 20 // Add horizontal margin to the container
  }
})


- Buttons: This Button component is used to call an alert function when the user taps on it.

JavaScript 
// 1.Basic Button
<Button
title="Press me" // Set the button title
onPress={() => Alert.alert('Simple Button pressed')} // Show an alert when the button is pressed
/>

// 2.Custom Coloured Button
<Button
title="Press me" // Set the button title
color="#f194ff" // Set the button color
onPress={() => Alert.alert('Coloured Button pressed')} // Show an alert when the button is pressed
/>

// 3.Disabled Button
<Button
title="Press me" // Set the button title
disabled // Disable the button
onPress={() => Alert.alert('Cannot press this one')} // Show an alert (won't trigger since the button is disabled)
/>


- Text: This is used to display text data in the app.

JavaScript 
{/* Display header text for the simple button */}
<Text style={styles.header}>Simple Button</Text> 

{/* Display header text for the coloured button */}
<Text style={styles.header}>Coloured Button</Text> 

{/* Display header text for the disabled button */}
<Text style={styles.header}>Disabled Button</Text>


- alert function: This function is used to display an alert dialog box which contains a Title and message with two buttons.

JavaScript 
Alert.alert('Simple Button pressed')


- App Component: Wrap the Buttons and Texts with a View and return that inside the App function to render, also make sure to export the App.

JavaScript 
// Define the main App component
export default function App() {
  return (
    <View style={styles.setMargin}> {/* Apply margin style to the container */}
      <Text style={styles.header}>Simple Button</Text> {/* Display header text for the simple button */}
      <Button
        title="Press me" // Set the button title
        onPress={() => Alert.alert('Simple Button pressed')} // Show an alert when the button is pressed
      />
      <Text style={styles.header}>Coloured Button</Text> {/* Display header text for the coloured button */}
      <Button
        title="Press me" // Set the button title
        color="#f194ff" // Set the button color
        onPress={() => Alert.alert('Coloured Button pressed')} // Show an alert when the button is pressed
      />
      <Text style={styles.header}>Disabled Button</Text> {/* Display header text for the disabled button */}
      <Button
        title="Press me" // Set the button title
        disabled // Disable the button
        onPress={() => Alert.alert('Cannot press this one')} // Show an alert (won't trigger since the button is disabled)
      />
    </View>
  )
}


Complete Source Code

App.js:

App.js 
import React from "react";
import {StyleSheet, Button,Text, Alert ,View} from "react-native";

function App() {
  return (
    <View style={styles.setMargin}>
     <Text style={styles.header}>Simple Button</Text>
    <Button
    title="Press me"
    onPress={() => Alert.alert('Simple Button pressed')}
  />
  <Text style={styles.header}>Coloured Button</Text>
   <Button
    title="Press me"
    color="#f194ff"
    onPress={() => Alert.alert('Coloured Button pressed')}
  />
  <Text style={styles.header}>Disabled Button</Text>
   <Button
    title="Press me"
    disabled
        onPress={() => Alert.alert('Cannot press this one')}
  />
    </View>
    )
  }
const styles=StyleSheet.create({
  header:{
    fontSize: 20,
    fontWeight: "bold"
  },
  setMargin:{
    marginTop:50
  }
})
export default App;


Output:



Next Article
How to Implement Radio Button In React Native ?

A
akshitsaxenaa09
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox