Last active
May 30, 2018 10:06
-
-
Save ThakurBallary/bf6e9fa4abc4b4bb0283431ee1bb3904 to your computer and use it in GitHub Desktop.
React Native Radio Buttons Group
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import { Text, View, StyleSheet } from 'react-native'; | |
import RadioGroup from 'react-native-radio-buttons-group'; | |
export default class Vertical extends Component { | |
state = { | |
data: [ | |
{ | |
label: 'Default value is same as label', | |
}, | |
{ | |
label: 'Value is different', | |
value: "I'm not same as label", | |
}, | |
{ | |
label: 'Color', | |
color: 'green', | |
}, | |
{ | |
disabled: true, | |
label: 'Disabled', | |
}, | |
{ | |
label: 'Size', | |
size: 32, | |
}, | |
], | |
}; | |
// update state | |
onPress = data => this.setState({ data }); | |
render() { | |
let selectedButton = this.state.data.find(e => e.selected == true); | |
selectedButton = selectedButton ? selectedButton.value : this.state.data[0].label; | |
return ( | |
<View style={styles.container}> | |
<Text style={{ fontSize: 18, marginBottom: 50 }}> | |
Value = {selectedButton} | |
</Text> | |
<RadioGroup radioButtons={this.state.data} onPress={this.onPress} /> | |
</View> | |
); | |
} | |
} | |
const styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
alignItems: 'center', | |
justifyContent: 'center', | |
}, | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment