button.md

id	title
button	Button

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. For inspiration, look at the source code for the Button component.

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

Example

import React from 'react';
import {StyleSheet, Button, View, Text, Alert} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const Separator = () => <View style={styles.separator} />;

const App = () => (
  <SafeAreaProvider>
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.title}>
          The title and onPress handler are required. It is recommended to set
          accessibilityLabel to help make your app usable by everyone.
        </Text>
        <Button
          title="Press me"
          onPress={() => Alert.alert('Simple Button pressed')}
        />
      </View>
      <Separator />
      <View>
        <Text style={styles.title}>
          Adjust the color in a way that looks standard on each platform. On
          iOS, the color prop controls the color of the text. On Android, the
          color adjusts the background color of the button.
        </Text>
        <Button
          title="Press me"
          color="#f194ff"
          onPress={() => Alert.alert('Button with adjusted color pressed')}
        />
      </View>
      <Separator />
      <View>
        <Text style={styles.title}>
          All interaction for the component are disabled.
        </Text>
        <Button
          title="Press me"
          disabled
          onPress={() => Alert.alert('Cannot press this one')}
        />
      </View>
      <Separator />
      <View>
        <Text style={styles.title}>
          This layout strategy lets the title define the width of the button.
        </Text>
        <View style={styles.fixToText}>
          <Button
            title="Left button"
            onPress={() => Alert.alert('Left button pressed')}
          />
          <Button
            title="Right button"
            onPress={() => Alert.alert('Right button pressed')}
          />
        </View>
      </View>
    </SafeAreaView>
  </SafeAreaProvider>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    marginHorizontal: 16,
  },
  title: {
    textAlign: 'center',
    marginVertical: 8,
  },
  fixToText: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  separator: {
    marginVertical: 8,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

export default App;

---

Reference

Props

Required

onPress

Handler to be called when the user taps the button.

Type
md ({nativeEvent: [PressEvent](pressevent)})

---

Required

title

Text to display inside the button. On Android the given title will be converted to the uppercased form.

Type
string

---

accessibilityLabel

Text to display for blindness accessibility features.

Type
string

---

accessibilityLanguage

iOS

A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the BCP 47 specification.

See the iOS accessibilityLanguage doc for more information.

Type
string

---

accessibilityActions

Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The accessibilityActions property should contain a list of action objects. Each action object should contain the field name and label.

See the Accessibility guide for more information.

Type	Required
array	No

---

onAccessibilityAction

Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.

See the Accessibility guide for more information.

Type	Required
function	No

---

color

Color of the text (iOS), or background color of the button (Android).

export function ColorDefaults() {
  return (
    <>
      <ins style={{ background: "#2196F3" }} className="color-box" />{" "}<code>'#2196F3'</code>
      {" "}<div className="label android">Android</div>
      <hr />
      <ins style={{ background: "#007AFF" }} className="color-box" />{" "}<code>'#007AFF'</code>
      {" "}<div className="label ios">iOS</div>
    </>
  );
}

Type	Default
color

---

disabled

If true, disable all interactions for this component.

Type	Default
bool	false

---

hasTVPreferredFocus

TV

TV preferred focus.

Type	Default
bool	false

---

nextFocusDown

Android

TV

Designates the next view to receive focus when the user navigates down. See the Android documentation.

Type
number

---

nextFocusForward

Android

TV

Designates the next view to receive focus when the user navigates forward. See the Android documentation.

Type
number

---

nextFocusLeft

Android

TV

Designates the next view to receive focus when the user navigates left. See the Android documentation.

Type
number

---

nextFocusRight

Android

TV

Designates the next view to receive focus when the user navigates right. See the Android documentation.

Type
number

---

nextFocusUp

Android

TV

Designates the next view to receive focus when the user navigates up. See the Android documentation.

Type
number

---

testID

Used to locate this view in end-to-end tests.

Type
string

---

touchSoundDisabled

Android

If true, doesn't play system sound on touch.

Type	Default
boolean	false