React Native Elements ButtonGroup - Enable button when conditions are met

Question

I am using react-native-elements ButtonGroup with 3 buttons. I need to disable all buttons when the application starts, when conditions are met, I need to enable specific buttons.

Ive disabled all buttons using the false flag but I'm not sure how to enable specific buttons with a conditional statement and state.

Any help would be appreciated.

<ButtonGroup
  onPress={this.updateIndex}
  selectedIndex={selectedIndex}
  buttons={buttons}
  containerStyle={{ height: 100 }}
  //disabled={[0, 1, 2]}
  disabled={true}
/>

ADD_DETAILS(index) {
  if (index === 0) {
    console.log("clicked 0");
    this.requestDetails();
  }
}

There would be a few conditions, basically when the state changes in a function, a button should be enabled. — Charl, Aug 26 '19 at 13:30

Auticcat · Answer 1 · 2019-08-26T13:43:00.093

As said by the docs, disable:

Controls if buttons are disabled. Setting true makes all of them disabled, while using an array only makes those indices disabled.

So creating a stucture like:

disabled={[1,2]}

would enable only the first button

To update it you should use a state variable and update it based off what you need, for example:

this.state={
   disabled=[0]
}

then the disabled prop would look like:

disabled={this.state.disabled}

And in your onPress function you should remove/add your buttons they way you need:

onPress={this.buttonGroupOnPress}

This will send to the function the index of the clicked button as a parameter:

buttonGroupOnPress = (index) =>{
   //your logic
   this.setState({ disabled: /* the new array of disabled buttons indexes */ })
}

Source: https://react-native-training.github.io/react-native-elements/docs/button_group.html#disabled

score 0 · Accepted Answer · answered Aug 26 '19 at 13:55

You can store your disabled buttons in your state for example:

this.state = {
  selectedIndex: 2,
  disabled:[], // you store your disabled buttons here
}

<ButtonGroup
 onPress={this.updateIndex}
 selectedIndex={selectedIndex}
 buttons={buttons}
 containerStyle={{height: 100}}
 disabled={this.state.disabled}
/>

if you have ButtonGroup like this, you can disable buttons (for example first and third on button click ) like this:

  <Button
  title={"disable first and third buttons"}
  onPress={()=>{
    this.setState({disabled:[0,2]}); // here you update which buttons you want to disable
  }}/>

React Native Elements ButtonGroup - Enable button when conditions are met

2 Answers2