This article will present how you can add Radio buttons into your React Native app. I am using Expo to build the React Native app and Visual Studio code as the editor and IDE.
You can run this app by downloading the
Expo app from App Store and run the following sample by opening the Camera on your mobile and scan the QR code. This will launch Expo
app and run the app.
WidgetDemos - React Native app with radio buttons demo
First off, you can install Expo using npm and the following command:
npm install expo-cli --global
You can initialize a project using these two commands:
expo init MyRadioButtonProject
cd MyRadioButtonProject
expo start
Expo's website contains good documentation here:
We can use the built in React Native control
SegmentedControlIOS from React native and the following code:
import React, { Component } from 'react';
import { StyleSheet, Text, View, SegmentedControlIOS } from 'react-native';
export default class Widget extends Component {
constructor(props) {
super(props);
this.state = {
selectedMoreFruitIndex: 0,
};
}
setMoreFruitIndex(event) {
this.setState({ selectedMoreFruitIndex: event.nativeEvent.selectedSegmentIndex })
};
render(){
return (
<View>
<SegmentedControlIOS
values={['banana', 'apple']}
selectedIndex={this.state.selectedMoreFruitIndex}
onChange={(event) => this.setMoreFruitIndex(event)}
/>
</View >
);
};
..
The
SegmentControlIOS is simple to get started with, but it is not so easy to set up with compound objects, it only supports a string array. Hence, you cannot specify a label and a value to each
radio button item. Instead use the
SegmentedControls from the 'react-native-radio-buttons' package.
We import this npm package using:
npm install react-native-radio-buttons --save
The npm package has got a home and documentation here:
https://www.npmjs.com/package/react-native-radio-buttons
First off, we define an array of fruit objects and put these into a state variable (array of objects) inside the constructor
constructor(props) {
..
let moreFruits = [{ label: 'Strawberry', value: 'Strawberry' },
{ label: 'Melon', value: 'Melon' },
{ label: 'Pineapple', value: 'Pineapple' },
{ label: 'Grapes', value: 'Grapes' },
];
this.state = {
selectedFruit: 'Pick your favorite fruit',
selectedMoreFruitIndex: 0,
selectedMoreFruit: null,
moreFruits: moreFruits
}
.. }
We use the SegmentedControls by importing at the top and defining it inside the View returned in the
render method:
import RadioButtons, { SegmentedControls } from 'react-native-radio-buttons'; //RadioButtons not needed in this example
//..inside views of render
<SegmentedControls
options={this.state.moreFruits}
direction='row'
onSelection={option => this.setSelectedOption(option)}
selectedOption={this.state.selectedMoreFruit}
extractText={(option) => option.label}
></SegmentedControls>
The method setSelectedOption and more can be read in the code listing below of Widget.js. I include also App.js below, the starting component:
Widget.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Button, RadioGroup, TouchableWithoutFeedback, SegmentedControlIOS } from 'react-native';
import { Dropdown } from 'react-native-material-dropdown';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import RadioButtons, { SegmentedControls } from 'react-native-radio-buttons';
export default class Widget extends Component {
constructor(props) {
super(props);
let moreFruits = [{ label: 'Strawberry', value: 'Strawberry' },
{ label: 'Melon', value: 'Melon' },
{ label: 'Pineapple', value: 'Pineapple' },
{ label: 'Grapes', value: 'Grapes' },
];
this.state = {
selectedFruit: 'Pick your favorite fruit',
reasonFruit: '',
isFruitButtonClicked: 'no',
selectedMoreFruitIndex: 0,
moreFruits: moreFruits
}
}
setSelectedOption(selectedOption) {
var selectedMoreFruit = this.state.moreFruits.find(item => item.label == selectedOption.label);
this.setState({ selectedMoreFruit: selectedMoreFruit })
}
renderOption(option, selected, onSelect, index) {
const style = selected ? { backgroundColor: 'blue' } : { backgroundColor: 'red' };
return (
<TouchableWithoutFeedback onPress={onSelect} key={index}>
<Text style={style}>{option.label}</Text>
</TouchableWithoutFeedback>
);
}
renderContainer(optionNodes) {
return <View>optionNodes</View>;
}
setMoreFruitIndex(event) {
this.setState({ selectedMoreFruitIndex: event.nativeEvent.selectedSegmentIndex })
}
render() {
let data = [
{ label: 'Banana', value: 'Banana' },
{ label: 'Apple', value: 'Apple' },
{ label: 'Kiwi', value: 'Kiwi' }
];
return (
<View>
<SegmentedControlIOS
values={['one', 'two']}
selectedIndex={this.state.selectedMoreFruitIndex}
onChange={(event) => this.setMoreFruitIndex(event)}
/>
<Text>Selected option of react-native-radio-buttons: {this.state.selectedMoreFruit ? this.state.selectedMoreFruit.value : 'no fruit'}</Text>
<SegmentedControls
options={this.state.moreFruits}
direction='row'
onSelection={option => this.setSelectedOption(option)}
selectedOption={this.state.selectedMoreFruit}
extractText={(option) => option.label}
></SegmentedControls>
<Text style={{ fontWeight: 'bold' }}>Select favorite fruit then</Text>
<Dropdown onChangeText={(val) => this.setState({ selectedFruit: val })} style={{ backgroundColor: 'aliceblue' }} data={data} />
<Text>You selected: {this.state.selectedFruit}</Text>
<Text></Text>
<Text>Reason for fruit choice: {this.state.reasonFruit}</Text>
<TextInput onChangeText={(val) => this.setState({ reasonFruit: val })} style={{ borderColor: 'black', borderRadius: 4, borderWidth: 1, backgroundColor: 'aliceblue' }} value={this.state.reasonFruit}></TextInput>
<Text></Text>
{/* <Button color="#841584" accessibilityLabel="Click this button!" onPress={(val) => this.setState({ isFruitButtonClicked: 'yes' })} title="Fruit button" />
<Text>Is Fruit button clicked: {this.state.isFruitButtonClicked}</Text> */}
</View >
);
}
sayHello(val) {
this.setState({ selectedFruit: 'You selected: ' + val })
}
}
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Widget from './Widget'
import { Col, Row, Grid } from 'react-native-easy-grid';
export default class App extends React.Component {
render() {
return (
// Try setting `alignItems` to 'flex-start'
// Try setting `justifyContent` to `flex-end`.
// Try setting `flexDirection` to `row`.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'stretch',
}}>
<View style={{ width: '80%', height: 50 }}>
<Text style={{ fontSize: 18, flexWrap: 'wrap' }} >Welcome to the React Native apps demo!</Text>
</View>
<View style={{ height: 150 }}>
<Widget />
</View>
<View style={{ height: 100 }} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
flexDirection: 'column',
backgroundColor: '#fff',
alignItems: 'stretch'
},
});
Lastly, remember to set the selected object in the correct manner, using the find method for example on the state variable. This to ensure we are pointing at the right selected object in the SegmentedControls control.
setSelectedOption(selectedOption) {
var selectedMoreFruit = this.state.moreFruits.find(item => item.label == selectedOption.label);
this.setState({ selectedMoreFruit: selectedMoreFruit })
}
