React Native Button Component

Last Updated : 14 Jan, 2026

The Button component in React Native is a simple and built-in UI element used to trigger actions when users tap it, making it essential for handling user interactions in mobile applications.

  • Supports basic actions through the onPress event handler.
  • Allows customization using props like title, color, and disabled.
  • Provides accessibility and testing support with accessibilityLabel and testID.
JavaScript 
import React from 'react';
import { View, Button, Alert } from 'react-native';

const App = () => {
  return (
    <View style={{ marginTop: 50 }}>
      <Button
        title="Click Me"
        onPress={() => Alert.alert("Button Pressed")}
      />
    </View>
  );
};

export default App;
  • Displays a simple Button with the text "Click Me" inside a View container.
  • Shows an alert message saying "Button Pressed" when the button is tapped.

Syntax:

<Button
  onPress={function...}
  title="buttonText"
  color="buttonColor"
/>

Props for Button Component

These Button props in React Native provide control over appearance, behavior, accessibility, navigation, and testing of the Button component.

1. Interaction & Behavior

Controls how the button responds to user actions.

  • onPress: Executes a function when the button is tapped.
  • disabled: Prevents the button from being pressed.
  • touchSoundDisabled: Disables the system sound when the button is tapped.

2. Display & Content

Defines the visual text and color of the button.

  • title: Displays the text inside the button.
  • color: Sets the color of the button.

3. Accessibility

Improves usability for screen readers and assistive devices.

  • accessibilityLabel: Provides a readable label for screen readers.
  • hasTVPreferredFocus: Gives the button priority focus on TV devices.

4. Focus & Navigation

Improves usability for screen readers and assistive devices.

  • nextFocusUp: Specifies the next focusable view when navigating up.
  • nextFocusDown: Specifies the next focusable view when navigating down.
  • nextFocusLeft: Specifies the next focusable view when navigating left.
  • nextFocusRight: Specifies the next focusable view when navigating right.
  • nextFocusForward: Specifies the next focusable view when navigating forward.

5. Testing

Helps identify the button during automated testing.

  • testID: Identifies the button for automated testing.

Implementing Button Component

It involves using the React Native Button component to create interactive buttons that trigger actions and handle user input within an application.

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

This will launch the Expo DevTools and display a QR code in the terminal and browser.

How to run the app:

  • Android Emulator: Press a in the terminal to open the app in the Android emulator.
  • Android Physical Device: Install Expo Go from the Play Store, open it, tap Scan QR Code, and scan the QR code to run the app.
  • iOS Device: Open the Camera app and scan the QR code to launch the app.
  • Web Browser: Click the localhost link shown in the terminal or browser to run the app in the web.

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 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,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  // Style for the text displaying the count
  text: {
    fontSize: 40,
    marginBottom: 30,
  }
});

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

It brings together all the previously discussed parts into a single, complete App.js file that runs the application.

App.js 
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, 
    backgroundColor: '#fff',
    alignItems: 'center', 
    justifyContent: 'center', 
  },
  // Style for the text displaying the count
  text: {
    fontSize: 40,
    marginBottom: 30, 
  }
});


Output:

Comment
Article Tags:
React Native
React-Native

Explore