Skip to main content

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 TouchableOpacity or TouchableWithoutFeedback. For inspiration, look at the source code for this button component. Or, take a look at the wide variety of button components built by the community.

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

Exampleโ€‹


Reference

Propsโ€‹

Required
onPressโ€‹

Handler to be called when the user taps the button.

Type
({ nativeEvent: 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

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.

TypeRequired
arrayNo

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.

TypeRequired
functionNo

colorโ€‹

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

TypeDefault
color `'#2196F3'`
Android

'#007AFF'
iOS

disabledโ€‹

If true, disable all interactions for this component.

TypeDefault
boolfalse

hasTVPreferredFocus
TV
โ€‹

TV preferred focus.

TypeDefault
boolfalse

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.

TypeDefault
booleanfalse