diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index d98766470b512d..d4efafff3c4edf 100644
--- a/Libraries/Components/Button.js
+++ b/Libraries/Components/Button.js
@@ -6,6 +6,7 @@
*
* @format
* @flow
+ * @generate-docs
*/
'use strict';
@@ -25,107 +26,224 @@ import type {ColorValue} from '../StyleSheet/StyleSheet';
type ButtonProps = $ReadOnly<{|
/**
- * Text to display inside the button
+ Text to display inside the button. On Android the given title will be
+ converted to the uppercased form.
*/
title: string,
/**
- * Handler to be called when the user taps the button
+ Handler to be called when the user taps the button.
*/
onPress: (event?: PressEvent) => mixed,
/**
- * If true, doesn't play system sound on touch (Android Only)
- **/
+ If `true`, doesn't play system sound on touch.
+
+ @platform android
+
+ @default false
+ */
touchSoundDisabled?: ?boolean,
/**
- * Color of the text (iOS), or background color of the button (Android)
+ Color of the text (iOS), or background color of the button (Android).
+
+ @default {@platform android} '#2196F3'
+ @default {@platform ios} '#007AFF'
*/
color?: ?ColorValue,
/**
- * TV preferred focus (see documentation for the View component).
+ TV preferred focus.
+
+ @platform tv
+
+ @default false
*/
hasTVPreferredFocus?: ?boolean,
/**
- * TV next focus down (see documentation for the View component).
- *
- * @platform android
+ Designates the next view to receive focus when the user navigates down. See
+ the [Android documentation][android:nextFocusDown].
+
+ [android:nextFocusDown]:
+ https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown
+
+ @platform android, tv
*/
nextFocusDown?: ?number,
/**
- * TV next focus forward (see documentation for the View component).
- *
- * @platform android
+ Designates the next view to receive focus when the user navigates forward.
+ See the [Android documentation][android:nextFocusForward].
+
+ [android:nextFocusForward]:
+ https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward
+
+ @platform android, tv
*/
nextFocusForward?: ?number,
/**
- * TV next focus left (see documentation for the View component).
- *
- * @platform android
+ Designates the next view to receive focus when the user navigates left. See
+ the [Android documentation][android:nextFocusLeft].
+
+ [android:nextFocusLeft]:
+ https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft
+
+ @platform android, tv
*/
nextFocusLeft?: ?number,
/**
- * TV next focus right (see documentation for the View component).
- *
- * @platform android
+ Designates the next view to receive focus when the user navigates right. See
+ the [Android documentation][android:nextFocusRight].
+
+ [android:nextFocusRight]:
+ https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight
+
+ @platform android, tv
*/
nextFocusRight?: ?number,
/**
- * TV next focus up (see documentation for the View component).
- *
- * @platform android
+ Designates the next view to receive focus when the user navigates up. See
+ the [Android documentation][android:nextFocusUp].
+
+ [android:nextFocusUp]:
+ https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp
+
+ @platform android, tv
*/
nextFocusUp?: ?number,
/**
- * Text to display for blindness accessibility features
+ Text to display for blindness accessibility features.
*/
accessibilityLabel?: ?string,
/**
- * If true, disable all interactions for this component.
+ If `true`, disable all interactions for this component.
+
+ @default false
*/
disabled?: ?boolean,
/**
- * Used to locate this view in end-to-end tests.
+ Used to locate this view in end-to-end tests.
*/
testID?: ?string,
|}>;
/**
- * 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](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';
- * ...
- *
- *
- * ```
- *
+ 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](touchableopacity) or
+ [TouchableWithoutFeedback](touchablewithoutfeedback). For inspiration, look at
+ the [source code for this button component][button:source]. Or, take a look at
+ the [wide variety of button components built by the community]
+ [button:examples].
+
+ [button:source]:
+ https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js
+
+ [button:examples]:
+ https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button
+
+ ```jsx
+
+ ```
+
+ ```SnackPlayer name=Button%20Example
+ import React from 'react';
+ import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';
+
+ const Separator = () => (
+
+ );
+
+ const App = () => (
+
+
+
+ The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone.
+
+
+
+
+
+ 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.
+
+
+
+
+
+ All interaction for the component are disabled.
+
+
+
+
+
+ This layout strategy lets the title define the width of the button.
+
+
+
+
+
+ );
+
+ 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;
+ ```
*/
class Button extends React.Component {
