change the button status on permission basis react native

Question

Here I am displaying three buttons invoices ,recharges and payments . by default 'invoice' button is selected active and rest two are disable when i come to this page . But if I hide this 'invoices' button through permission it should automatic shift to 'recharge' tab and recharge should be active . please suggest .

export default class Financial extends Component {
    constructor(props){
        super(props)
        this.state ={
            activeTab: 'invoices'
        }
    }

  render(){
    const { activeTab } = this.state;
    const { customer,rechargeDeatails,navigation,permission } = this.props;
    console.log("permission-------",permission);
    return (
        <View
          style={{
            flex: 1,
            paddingLeft: 10,
            paddingRight: 10,
            backgroundColor: '#f1f1f1',
            flexDirection: 'column'
          }}
        >
          <View style={{flexDirection:'row', padding: 10}}>
          {permission.invoiceTab &&
              <View style={{marginRight: 5}}>
                <TouchableOpacity onPress={()=>this.setState({activeTab:'invoices'})}>
                    <Button small rounded disabled={activeTab!=='invoices'} style={{padding:2, height: 28}}>
                      <Text style={styles.btnLabel}> Invoices </Text>
                    </Button>
                </TouchableOpacity>
              </View>}
              <View style={{marginRight: 5}}>
                <TouchableOpacity onPress={()=>this.setState({activeTab:'recharges'})}>
                    <Button small rounded disabled={activeTab!=='recharges'} style={{padding:2, height: 28}}>
                      <Text style={styles.btnLabel}> Recharges </Text>
                    </Button>
                </TouchableOpacity>
              </View>
              <View style={{marginRight: 5}}>
                <TouchableOpacity onPress={()=>this.setState({activeTab:'payments'})}>
                    <Button small rounded disabled={activeTab!=='payments'} style={{padding:2, height: 28}}>
                      <Text style={styles.btnLabel}> Payments </Text>
                    </Button>
                </TouchableOpacity>
              </View>
             </View>
          <View style={{flexDirection:'column'}}>
            { activeTab=='recharges' && <Recharges customer={customer} rechargeDeatails={rechargeDeatails}/>}
            { activeTab=='invoices' && <Invoices navigation={navigation}/>}
            { activeTab=='payments' && <Payments/>}
          </View>
        </View>
      );
  }
}

Answer 1

Well, if you are setting activeTab state based on props you can check that in constructor if you have permission.invoiceTab then set the activeTab to invoices else to recharges

like:

export default class Financial extends Component {
  constructor(props) {
    super(props)
    const { permission } = this.props
    let activeTab = 'invoices'
    if (permission.invoiceTab) {
      activeTab = 'invoices'
    } else if (permission.rechargeTab) {
      activeTab = 'recharges'
    } else {
      activeTab = 'payments'
    }
    this.state = {
      activeTab,
    }
  }

  render() {
    const { activeTab } = this.state;
    const { customer, rechargeDeatails, navigation, permission } = this.props;
    console.log("permission-------", permission);
    return (
      <View
        style={{
          flex: 1,
          paddingLeft: 10,
          paddingRight: 10,
          backgroundColor: '#f1f1f1',
          flexDirection: 'column'
        }}
      >
        <View style={{ flexDirection: 'row', padding: 10 }}>
          {permission.invoiceTab &&
            <View style={{ marginRight: 5 }}>
              <TouchableOpacity onPress={() => this.setState({ activeTab: 'invoices' })}>
                <Button small rounded disabled={activeTab !== 'invoices'} style={{ padding: 2, height: 28 }}>
                  <Text style={styles.btnLabel}> Invoices </Text>
                </Button>
              </TouchableOpacity>
            </View>}
          <View style={{ marginRight: 5 }}>
            <TouchableOpacity onPress={() => this.setState({ activeTab: 'recharges' })}>
              <Button small rounded disabled={activeTab !== 'recharges'} style={{ padding: 2, height: 28 }}>
                <Text style={styles.btnLabel}> Recharges </Text>
              </Button>
            </TouchableOpacity>
          </View>
          <View style={{ marginRight: 5 }}>
            <TouchableOpacity onPress={() => this.setState({ activeTab: 'payments' })}>
              <Button small rounded disabled={activeTab !== 'payments'} style={{ padding: 2, height: 28 }}>
                <Text style={styles.btnLabel}> Payments </Text>
              </Button>
            </TouchableOpacity>
          </View>
        </View>
        <View style={{ flexDirection: 'column' }}>
          {activeTab == 'recharges' && <Recharges customer={customer} rechargeDeatails={rechargeDeatails} />}
          {activeTab == 'invoices' && <Invoices navigation={navigation} />}
          {activeTab == 'payments' && <Payments />}
        </View>
      </View>
    );
  }
}