react-nativebuttongroupreact-native-elements

React Native Elements ButtonGroup - Enable button when conditions are met


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

Solution

  • 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
      }}/>