Version: 3.2.0

Radio Button

Migrating Radio to v3 will provide a lot more design, size, color and customisation option.

Overview#

Migrating Radio components can broadly described in these points:

  • In v3 Radio can only used along with Radio.Group.
  • selected is deprecated, instead v3 provides with value prop in Radio.Group.
  • Colors of the Radio: color and selectedColor props are deprecated, instead now in v3 color is controlled by colorScheme prop, and it accepts all the color available in the theme.
  • onPress prop is deprecated, instead v3 provides onChange which provides a callback when state of the checkbox change.

Code Comparison#

import React, { Component } from 'react';
import { ListItem, Container, Content, Header, Text, Radio } from 'native-base';
export default class RadioButtonExample extends Component {
constructor() {
super();
this.state = {
itemSelected: '',
};
}
render() {
return (
<Container>
<Header />
<Content>
<ListItem>
<Radio
onPress={() => this.setState({ itemSelected: 'one' })}
selected={this.state.itemSelected == 'one'}
/>
<Text>One</Text>
</ListItem>
<ListItem>
<Radio
onPress={() => this.setState({ itemSelected: 'two' })}
selected={this.state.itemSelected == 'two'}
/>
<Text>Two</Text>
</ListItem>
</Content>
</Container>
);
}
}