A button for React apps
Install the button from npm with npm install react-native-button --save. Then, require it from your app's JavaScript files with import Button from 'react-native-button'.
import React, { Component } from 'react'; import Button from 'react-native-button'; export default class ExampleComponent extends Component { constructor(props, context) { super(props, context); } _handlePress() { console.log('Pressed!'); } render() { return ( <Button style={{fontSize: 20, color: 'green'}} styleDisabled={{color: 'red'}} onPress={() => this._handlePress()}> Press Me! </Button> ); } };The React packager will include the Button component in your app's JS package and make it available for your app to use.
You can control a button's state by setting disabled prop value in this way:
import React, { Component } from 'react'; import Button from 'react-native-button'; export default class ExampleComponent extends Component { constructor(props, context) { super(props, context); this.state = { isDisabled: false } } _handlePress() { this.setState({ isDisabled: true }); console.log('Now, button disabled'); } render() { const { isDisabled } = this.state; return ( <Button style={{ fontSize: 20, color: 'white' }} styleDisabled={{ color: 'white' }} disabled={isDisabled} containerStyle={{ padding: 10, height: 45, overflow: 'hidden', borderRadius: 4, backgroundColor: 'aqua' }} disabledContainerStyle={{ backgroundColor: 'pink' }} onPress={() => this._handlePress()} > Press Me! </Button> ); } };| Prop | Required | Type | Description |
|---|---|---|---|
| accessibilityLabel | No | String | VoiceOver will read this string when a user selects the associated element. |
| allowFontScaling | No | Bool | Specifies whether fonts should scale to respect Text Size accessibility settings. |
| Disabled | No | Bool | Disables the button |
| Style | No | View Style Prop | The style for the button |
| styleDisabled | No | View Style Prop | The style for the disabled button |
| containerStyle | No | View Style Prop | The style for the container |
| disabledContainerStyle | No | View Style Prop | The style for the container when the button is disabled |
| childGroupStyle | No | View Style Prop | The style for the child views |
| androidBackground | No | Background Prop Type | The background for andriod devices. |
| onPress | No | Function | Handler to be called when the user taps the button. |
You can make a button with rounded corners like this:
<Button containerStyle={{padding:10, height:45, overflow:'hidden', borderRadius:4, backgroundColor: 'white'}} disabledContainerStyle={{backgroundColor: 'grey'}} style={{fontSize: 20, color: 'green'}}> Press me! </Button>Contributions are welcome. Please verify that styling matches the latest version of iOS when you are changing the visual look of the buttons.