149 lines
2.2 KiB
Markdown
149 lines
2.2 KiB
Markdown
|
---
|
||
|
|
id: button
|
||
|
|
title: Button
|
||
|
|
layout: docs
|
||
|
|
category: components
|
||
|
|
permalink: docs/button.html
|
||
|
|
next: checkbox
|
||
|
|
previous: activityindicator
|
||
|
|
---
|
||
|
|
A basic button component that should render nicely on any platform. Supports
|
||
|
|
a minimal level of customization.
|
||
|
|
|
||
|
|
<center><img src="img/buttonExample.png"></img></center>
|
||
|
|
|
||
|
|
If this button doesn't look right for your app, you can build your own
|
||
|
|
button using [TouchableOpacity](docs/touchableopacity.html)
|
||
|
|
or [TouchableNativeFeedback](docs/touchablenativefeedback.html).
|
||
|
|
For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js).
|
||
|
|
Or, take a look at the [wide variety of button components built by the community](https://js.coach/react-native?search=button).
|
||
|
|
|
||
|
|
Example usage:
|
||
|
|
|
||
|
|
```
|
||
|
|
import { Button } from 'react-native';
|
||
|
|
...
|
||
|
|
|
||
|
|
<Button
|
||
|
|
onPress={onPressLearnMore}
|
||
|
|
title="Learn More"
|
||
|
|
color="#841584"
|
||
|
|
accessibilityLabel="Learn more about this purple button"
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Props
|
||
|
|
|
||
|
|
- [`onPress`](docs/button.html#onpress)
|
||
|
|
- [`title`](docs/button.html#title)
|
||
|
|
- [`accessibilityLabel`](docs/button.html#accessibilitylabel)
|
||
|
|
- [`color`](docs/button.html#color)
|
||
|
|
- [`disabled`](docs/button.html#disabled)
|
||
|
|
- [`testID`](docs/button.html#testid)
|
||
|
|
- [`hasTVPreferredFocus`](docs/button.html#hastvpreferredfocus)
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
# Reference
|
||
|
|
|
||
|
|
## Props
|
||
|
|
|
||
|
|
### `onPress`
|
||
|
|
|
||
|
|
Handler to be called when the user taps the button
|
||
|
|
|
||
|
|
| Type | Required |
|
||
|
|
| - | - |
|
||
|
|
| function | Yes |
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### `title`
|
||
|
|
|
||
|
|
Text to display inside the button
|
||
|
|
|
||
|
|
| Type | Required |
|
||
|
|
| - | - |
|
||
|
|
| string | Yes |
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### `accessibilityLabel`
|
||
|
|
|
||
|
|
Text to display for blindness accessibility features
|
||
|
|
|
||
|
|
| Type | Required |
|
||
|
|
| - | - |
|
||
|
|
| string | No |
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### `color`
|
||
|
|
|
||
|
|
Color of the text (iOS), or background color of the button (Android)
|
||
|
|
|
||
|
|
| Type | Required |
|
||
|
|
| - | - |
|
||
|
|
| [color](docs/colors.html) | No |
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### `disabled`
|
||
|
|
|
||
|
|
If true, disable all interactions for this component.
|
||
|
|
|
||
|
|
| Type | Required |
|
||
|
|
| - | - |
|
||
|
|
| bool | No |
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### `testID`
|
||
|
|
|
||
|
|
Used to locate this view in end-to-end tests.
|
||
|
|
|
||
|
|
| Type | Required |
|
||
|
|
| - | - |
|
||
|
|
| string | No |
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### `hasTVPreferredFocus`
|
||
|
|
|
||
|
|
*(Apple TV only)* TV preferred focus (see documentation for the View component).
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
| Type | Required | Platform |
|
||
|
|
| - | - | - |
|
||
|
|
| bool | No | iOS |
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|