React Native Button Component

Last Updated : 10 May, 2025

The following approach covers how to use the Button in react-native. For this, we are going to use the Button component. It is basically a clickable component that is used to perform some action when clicked by the user. Let's watch a demo video of what we are going to develop.

Demo Video:

Syntax

<Button
    onPress={}
    title="Button"
    color="#841584"
/>

Props

Prop	Description
onPress	It is called when the user taps on the button.
title	It is the text that displays inside the button.
accessibilityLabel	Text to display for blindness accessibility features.
color	It is used to set the color of the button.
disabled	If it is true, then the user wasn't able to press the button.
hasTVPreferredFocus	TV preferred focus, which is only available for TV.
nextFocusDown	Designates the next view to receive focus when the user navigates down.
nextFocusForward	Designates the next view to receive focus when the user navigates forward.
nextFocusLeft	Designates the next view to receive focus when the user navigates left.
nextFocusRight	Designates the next view to receive focus when the user navigates right.
nextFocusUp	Designates the next view to receive focus when the user navigates up.
testID	It is used to locate this view in end-to-end tests.
touchSoundDisabled	If true, it doesn't play system sound on touch.

Now let’s start with the implementation.

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

Now let's implement the Button. Here we created a Button, and when someone clicks on that button, the count will change.

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

JavaScript

// Import necessary modules from React and React Native
import React, { useState } from 'react';
// Import StyleSheet, Text, View, and Button components from React Native
import { StyleSheet, Text, View, Button } from 'react-native';

- StyleSheet: Create a StyleSheet to style components like container, text.

JavaScript

// Define styles for the components
const styles = StyleSheet.create({
  // Style for the main container
  container: {
    flex: 1, // Take up the full height of the screen
    backgroundColor: '#fff', // Set background color to white
    alignItems: 'center', // Center items horizontally
    justifyContent: 'center', // Center items vertically
  },
  // Style for the text displaying the count
  text: {
    fontSize: 40, // Set font size to 40
    marginBottom: 30, // Add margin below the text
  }
});

- Button: Create a button component and name it as "Click Me" to call a function that will increment the count value.

JavaScript

{/* Button to trigger the changeCount function when pressed */}
<Button
    title={"Click Me"}
    onPress={changeCount}
/>

- ChangeCount function: It is used to increment the count value by 1 and update the state i.e, count by calling setcount.

JavaScript

// Function to increment the count value by 1
const changeCount = () => {
    setcount(count + 1);
};

- useState: It is used to declare a state variable 'count' with an initial value of 0 and a function 'setcount' to update it.

JavaScript

// Declare a state variable 'count' with an initial value of 0 and a function 'setcount' to update it
const [count, setcount] = useState(0);

- Text: It is used to represent the count coming from useState.

JavaScript

{/* Display the current count value */}
<Text style={styles.text}>{count}</Text>

- App Component: Wrap the Text and Button with a View and return that inside the App function to render and place the changeCount function and useState inside the App function, also make sure to export the App.

JavaScript

// Define the main App component as the default export
export default function App() {
  // Declare a state variable 'count' with an initial value of 0 and a function 'setcount' to update it
  const [count, setcount] = useState(0);

  // Function to increment the count value by 1
  const changeCount = () => {
    setcount(count + 1);
  };

  // Render the UI
  return (
    <View style={styles.container}>
      {/* Display the current count value */}
      <Text style={styles.text}>{count}</Text>
      {/* Button to trigger the changeCount function when pressed */}
      <Button
        title={"Click Me"}
        onPress={changeCount}
      />
    </View>
  );
}

Complete Source Code:

App.js

App.js

// Import necessary modules from React and React Native
import React, { useState } from 'react';
// Import StyleSheet, Text, View, and Button components from React Native
import { StyleSheet, Text, View, Button } from 'react-native';

// Define the main App component as the default export
export default function App() {
  // Declare a state variable 'count' with an initial value of 0 and a function 'setcount' to update it
  const [count, setcount] = useState(0);

  // Function to increment the count value by 1
  const changeCount = () => {
    setcount(count + 1);
  };

  // Render the UI
  return (
    <View style={styles.container}>
      {/* Display the current count value */}
      <Text style={styles.text}>{count}</Text>
      {/* Button to trigger the changeCount function when pressed */}
      <Button
        title={"Click Me"}
        onPress={changeCount}
      />
    </View>
  );
}

// Define styles for the components
const styles = StyleSheet.create({
  // Style for the main container
  container: {
    flex: 1, // Take up the full height of the screen
    backgroundColor: '#fff', // Set background color to white
    alignItems: 'center', // Center items horizontally
    justifyContent: 'center', // Center items vertically
  },
  // Style for the text displaying the count
  text: {
    fontSize: 40, // Set font size to 40
    marginBottom: 30, // Add margin below the text
  }
});

Output:

How to style React Native Application ?

iamabhishekkalra

Improve

Article Tags :

React Native Button Component

Demo Video:

Syntax

Props

Step-by-Step Implementation

Step 1: Create a React Native Project

Project Structure:

Step 2: Run Application

Step 3: Start Coding

Complete Source Code:

Similar Reads

React Native Basics

React Native Components

React Native UI Elements

React Native API

React Native Questions

React Native Projects

Thank You!

What kind of Experience do you want to share?