Radio Button | NativeBase

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

v2

v3

Copy
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>
    );
  }
}

Quick Nav

Radio Button | next | NativeBase | Universal Components for React and React Native