Skip to content

Update the documentation of the Button component #29155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ayushjainrksh wants to merge 4 commits into from
Closed

Update the documentation of the Button component #29155

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5147bb0
Update the button component
ayushjainrksh Jun 11, 2020
d028fae
Wrap comments to 80 characters
ayushjainrksh Jun 30, 2020
cc92ab4
Refactor comments to use reference style links
ayushjainrksh Jul 7, 2020
d6db2af
Sync the latest documentation changes with Button component
ayushjainrksh Jul 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 136 additions & 49 deletions Libraries/Components/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,107 +25,194 @@ 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. The first function argument is an event in form of [PressEvent](pressevent).
*/
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](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](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](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](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](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.
*
* <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"
* />
* ```
*
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](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/?menu%5Bcollections%5D=React%20Native&page=1&query=button).

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

@example ```SnackPlayer name=Button%20Example
import React from 'react';
import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';
Comment thread
ayushjainrksh marked this conversation as resolved.

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

const App = () => (
<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>
);

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<ButtonProps> {
Expand Down