CODEWITHSUNDEEP
react-native
KimHau
KimHau

Reputation: 340

Make Button Group look like radio button

Is that any convenient way on do something similar to the attached image? I need the button group to be single selection and stay focused when click.

enter image description here

Upvotes: 2

Views: 4452

Answers (1)

Dan
Dan

Reputation: 8784

I am going to give you a simple answer, it does not look like the intended outcome but it will with a couple of CSS tweaks.

Create an Option component which accepts a list of options and a function that will report back your chosen option. 

<Option
  options={['A', 'B', 'C', 'D']}
  onChange={(option) => {
    console.log(option);
  }}
/>

Now inside of your Option component, you can create a component like so

class Option extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeOption: this.props.options[0],
    };
  }
  updateActiveOption = (activeOption) => {
    this.setState({
      activeOption,
    });
  };
  render() {
    return (
      <View
        style={{
          justifyContent: 'center',
          flexDirection: 'row',
          flexWrap: 'wrap',
          marginTop: 100,
          marginBottom: 100,
        }}
      >
        {this.props.options.map((option, index) => (
          <TouchableOpacity
            onPress={() => {
              this.props.onChange(option);
              this.updateActiveOption(option);
            }}
          >
            <Text
              style={{
                width: 150,
                borderWidth: 1,
                height: 50,
                color: this.state.activeOption === option ? 'red' : 'black',
              }}
            >
              {option}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  }
}

This code is messy right now and you could neaten it up with a StyleSheet object.

Here's how that looks right now: enter image description here

Upvotes: 3

Related Questions