Show button when 2 inputs are full and valid in react native - reactjs

Question

****I have a react native page app with 2 inputs. ****
I want to show the "submit" button once all of the 2 fields have a value.
(button is invisible until the 2 input fields have value)
this is my page code :
class Page3 extends Component {
render() {
const {navigate} = this.props.navigation;
return (
<View style={styles.container}>
<View style={styles.question1Stack}>
<Text style={styles.question1}>Question1</Text>
<ImageBackground
source={require("./assets/undraw_Friends_online_re_r7pq.png")}
resizeMode="contain"
style={styles.image}
imageStyle={styles.image_imageStyle}
>
<TouchableOpacity onPress={() =>{this.props.navigation.navigate('Page2')}}>
<Icon name="chevron-left" style={styles.icon1}></Icon>
</TouchableOpacity>
</ImageBackground>
</View>
<TouchableOpacity
title="submit"
onPress={() => {
this.props.navigation.navigate('Page4');
}}>
<Text style={styles.next}>
Next
</Text>
</TouchableOpacity>
<MaterialHelperTextBox
style={styles.materialHelperTextBox}
></MaterialHelperTextBox>
<MaterialHelperTextBox1
style={styles.materialHelperTextBox1}
></MaterialHelperTextBox1>
</View>
);
}
}
these are my input fields :
<MaterialHelperTextBox
style={styles.materialHelperTextBox}
></MaterialHelperTextBox>
<MaterialHelperTextBox1
style={styles.materialHelperTextBox1}
></MaterialHelperTextBox1>

Answer 1

you most define to two state for two TextInput , than set TextInput value in onChangeText check value is not null and valid , set true states for check, I don't know you use MaterialHelperTextBox1 by witch component but code maybe like this:
class Page3 extends Component {
constructor(props) {
super(props);
this.state = {
checkInput1:false,
checkInput2:false,
inputValue1:'',
inputValue2:'',
};
};
render() {
const {navigate} = this.props.navigation;
return (
<View style={styles.container}>
<View style={styles.question1Stack}>
<Text style={styles.question1}>Question1</Text>
<ImageBackground
source={require("./assets/undraw_Friends_online_re_r7pq.png")}
resizeMode="contain"
style={styles.image}
imageStyle={styles.image_imageStyle}
>
{checkInput1 && checkInput2 ?
<TouchableOpacity onPress={() =>
{this.props.navigation.navigate('Page2')}}>
<Icon name="chevron-left" style={styles.icon1}></Icon>
</TouchableOpacity>
:
null
}
</ImageBackground>
</View>
<TouchableOpacity
title="submit"
onPress={() => {
this.props.navigation.navigate('Page4');
}}>
<Text style={styles.next}>
Next
</Text>
</TouchableOpacity>
<MaterialHelperTextBox
style={styles.materialHelperTextBox}
onChangeText={value => {this.setstate({inputValue1:value});
_checkInputIsValid1();}}
defaultValue={this.state.inputValue1}
></MaterialHelperTextBox>
<MaterialHelperTextBox1
style={styles.materialHelperTextBox1}
onChangeText={value => {this.setstate({inputValue2:value});
_checkInputIsValid2();}}
defaultValue={this.state.inputValue1}
></MaterialHelperTextBox1>
</View>
);
}
}
_checkInputIsValid1(){
//check your rules for input1 there if true set state checkInput1 as true
}
_checkInputIsValid2(){
//check your rules for input2 there if true set state checkInput2 as true
}