Selecting button in React Native ButtonGroup

Question

I have a small problem. I'm using a ButtonGroup which previously worked with two options but now I am offering 4 options.

It renders correctly on the screen but I can only select the first two options. How can I jump between the selections so that I can select different buttons.

Any help is welcome!

      <ButtonGroup
        selectedIndex={this.state.test === "First" ? 0 : 1}
        buttons={["First", "Second", "Third", "Fourth"]}
        containerStyle={{ height: 50 }}
        selectedButtonStyle={{ backgroundColor: "red" }}
        selectedTextStyle={{ color: "white" }}
        textStyle={{ fontSize: 18, fontWeight: '600' }}
        onPress={(selectedIndex) => 
          this.setState({
          test: buttons[selectedIndex]
        })}
      />

score 0 · Accepted Answer · answered Jul 23 '21 at 09:09

0

This happens because you setted selectedIndex={this.state.test === "First" ? 0 : 1} so you have just 2 indexes (and 4 buttons).

You could create a state variable to manage index. Something like:

this.state = {
    ...
    selectedIndex: 0
 }
...
<ButtonGroup
   selectedIndex={this.state.selectedIndex}
   buttons={["First", "Second", "Third", "Fourth"]}
   containerStyle={{ height: 50 }}
   selectedButtonStyle={{ backgroundColor: "red" }}
   selectedTextStyle={{ color: "white" }}
   textStyle={{ fontSize: 18, fontWeight: '600' }}
   onPress={(selectedIndex) => {
      this.setState({ test: buttons[selectedIndex] });
      this.setState({ selectedIndex: selectedIndex });
   }}
/>

answered Jul 23 '21 at 09:09

Giovanni Esposito

10,696
1
14
30

Hi there! thank you for your answer! I tried it there but I cannot figure out where I should put the this.state part. I am doing this in a .tsx file – Michael Jul 23 '21 at 09:15
@Michael exactly in the same part you defined `test`. – Giovanni Esposito Jul 23 '21 at 09:16
Happy to ear that. Have a nice coding =) – Giovanni Esposito Jul 23 '21 at 09:26

score 0 · Answer 2 · answered Jul 23 '21 at 09:21

Index can be maintained in state and then can be assigned to selectedIndex in onPress and it should work for the selection of different buttons

  this.state = {
   test: "First",
   btnIndex: 0
  }

  <ButtonGroup
    selectedIndex={this.state.btnIndex}
    buttons={["First", "Second", "Third", "Fourth"]}
    containerStyle={{ height: 50 }}
    selectedButtonStyle={{ backgroundColor: "red" }}
    selectedTextStyle={{ color: "white" }}
    textStyle={{ fontSize: 18, fontWeight: '600' }}
    onPress={(selectedIndex) => {
    this.setState({ 
    test: buttons[selectedIndex], 
    btnIndex: selectedIndex 
  });
    }}
  />

Hi there, I appreciate your answer but got it solved with a similar answer — Michael, Jul 23 '21 at 09:31

Selecting button in React Native ButtonGroup

2 Answers2