Toggle button based on input (Native Base)

Question

I want to disable button when both or one of the inputs is empty. Btw, it is Native Base framework.

    <View style={styles.personal} key={data}>
        <Item floatingLabel>
          <Label>Your name:</Label>
          <Input />
        </Item>
        <Item floatingLabel style={{marginVertical: 20}}>
          <Label>Your age:</Label>
          <Input keyboardType="numeric"/>
        </Item>
        <Button style={{alignSelf: 'center'}} rounded disabled={false}
          onPress={() => this.refs.swiper.scrollBy(1)}>
            <Text style={{width: '70%', textAlign: 'center'}}>Next</Text>
          </Button>
      </View>

What I have tried:

state = {
  inputName: "",
  inputAge: "",
}
<Input value={this.setState({inputName: value})}/> 
<Input value={this.setState({inputAge: value})} keyboardType="numeric"/>
<Button style={{alignSelf: 'center'}} rounded 
          disabled={this.state.inputName==="" & this.state.inputAge==="" ? true:false }
          onPress={() => this.refs.swiper.scrollBy(1)}>
            <Text style={{width: '70%', textAlign: 'center'}}>Next</Text>
        </Button>

Error with variable value

Answer 1

You missed extra & in the condition.

Your condition should look like this,

disabled={this.state.inputName==="" || this.state.inputAge==="" ? true:false }

Because for logical AND operation the result will be true only when both the input is empty. If any of the input is not empty the result will be false and it will enable the button. So you need to use logical OR operation so that the condition will return true when any of the input is empty.

&& is the logical AND operation

& is the bitwise AND

Find the difference between & and && here.

You can do the following to save input values in state.

<Input onChangeText={val => this.setState({ inputName: val })} value={this.state.inputName}/> 
<Input onChangeText={val => this.setState({ inputAge: val })} value={this.state.inputAge} keyboardType="numeric"/>