Skip to main content
A basic button component that should render nicely on any platform. Supports a minimal level of customization. If this button doesn’t look right for your app, you can build your own button using Pressable or TouchableOpacity.

Example

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

const App = () => {
  return (
    <View>
      <Button
        title="Press me"
        onPress={() => Alert.alert('Button pressed')}
      />
      <Button
        title="Colored Button"
        color="#f194ff"
        onPress={() => Alert.alert('Button pressed')}
      />
      <Button
        title="Disabled Button"
        disabled
        onPress={() => Alert.alert('Cannot press this')}
      />
    </View>
  );
};

export default App;

Props

title
string
required
Text to display inside the button. On Android the given title will be converted to the uppercased form.
onPress
(event?: GestureResponderEvent) => void
Handler to be called when the user taps the button.
color
ColorValue
Color of the text (iOS), or background color of the button (Android).Default: #2196F3 on Android, #007AFF on iOS
disabled
boolean
default:false
If true, disable all interactions for this component.
touchSoundDisabled
boolean
default:false
If true, doesn’t play system sound on touch.Platform: Android
accessibilityLabel
string
Text to display for blindness accessibility features.
testID
string
Used to locate this view in end-to-end tests.
hasTVPreferredFocus
boolean
default:false
TV preferred focus.Platform: TVDeprecated: Use focusable instead
nextFocusDown
number
Designates the next view to receive focus when the user navigates down.Platform: Android, TV
nextFocusForward
number
Designates the next view to receive focus when the user navigates forward.Platform: Android, TV
nextFocusLeft
number
Designates the next view to receive focus when the user navigates left.Platform: Android, TV
nextFocusRight
number
Designates the next view to receive focus when the user navigates right.Platform: Android, TV
nextFocusUp
number
Designates the next view to receive focus when the user navigates up.Platform: Android, TV

Platform Differences

iOS

  • The color prop controls the text color
  • Text is displayed in sentence case
  • Default color is blue (#007AFF)

Android

  • The color prop controls the background color
  • Text is automatically converted to uppercase
  • Default color is Material Blue (#2196F3)
  • Has elevation/shadow effect

Build docs developers (and LLMs) love