Creating a basic button in React Native

Last Updated : 16 Feb, 2026

Creating a basic button in React Native allows users to perform actions when pressed, such as submitting data or showing alerts. React Native provides a built-in Button component for handling user interactions easily.

  • he Button component is used to create clickable buttons in React Native.
  • It uses the title prop to display text on the button.
  • The onPress prop is used to define the function that runs when the button is pressed.

Expo

Expo is a framework and platform used to build React Native applications easily. It provides tools and services to develop, run, and deploy apps for Android, iOS, and web using the same codebase.

  • It provides the Expo CLI to quickly create and run React Native projects.
  • It allows developers to build apps without writing native code (Java/Kotlin or Swift).
  • It supports fast development, testing, and deployment using tools like Expo Go.

Approach

We will create 3 types of buttons here.

  • Basic Button
  • Custom Coloured Button
  • Disabled Button

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.

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

2. For iOS users, simply scan the QR code using the Camera app.

3. 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:

Comment
Article Tags:
React Native
React-Native

Explore