How to Use Button in React Native: Simple Guide

In React Native, you use the Button component by importing it from 'react-native' and adding it to your JSX with properties like title for the button text and onPress for the action when pressed. This creates a simple clickable button that triggers a function when tapped.

Syntax

The Button component requires at least two props: title which sets the text shown on the button, and onPress which is a function called when the button is tapped. You can also customize the button color with the color prop.

javascript

import React from 'react';
import { Button } from 'react-native';

export default function App() {
  return (
    <Button
      title="Press me"
      onPress={() => alert('Button pressed!')}
      color="#007AFF"
    />
  );
}

Output

A blue button labeled 'Press me' that shows an alert saying 'Button pressed!' when tapped.

Example

This example shows a complete React Native app with a button that displays an alert when pressed. It demonstrates how to import, use the Button component, and handle the press event.

javascript

import React from 'react';
import { View, Button, Alert, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Button
        title="Click me"
        onPress={() => Alert.alert('You clicked the button!')}
        color="#2196F3"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  }
});

Output

A centered blue button labeled 'Click me' on a white screen. Tapping it shows a popup alert with the message 'You clicked the button!'.

Common Pitfalls

Common mistakes include forgetting to provide the onPress prop, which makes the button unresponsive, or passing a function call instead of a function reference (e.g., onPress={alert('Hi')} runs immediately instead of on press). Also, the Button component has limited styling options, so for custom styles use TouchableOpacity or other components.

javascript

/* Wrong: onPress runs immediately */
<Button title="Wrong" onPress={alert('Hi')} />

/* Right: onPress is a function reference */
<Button title="Right" onPress={() => alert('Hi')} />

Output

The first button triggers alert immediately on render (wrong). The second button triggers alert only when pressed (correct).

Quick Reference

Prop	Description	Type	Default
title	Text shown on the button	string	Required
onPress	Function called when button is pressed	function	Required
color	Button text color (iOS) or background color (Android)	string	Platform default
disabled	Disables the button if true	boolean	false
testID	Used for testing automation	string	undefined

Key Takeaways

Always provide both title and onPress props to make the Button work.

Use an arrow function or function reference for onPress to avoid immediate execution.

Button styling is limited; use other components for custom designs.

Import Button from 'react-native' before using it.

Button works well for simple clickable actions in React Native apps.