react native navigation via a button in a modal - react-native

Question

In my application, I want to navigate to another screen from a button in a modal. I tried the normal workout and it didn't work. The modal closes properly but the navigation doesn't happen. What am I doing wrong here? Im trying to navigate from navigateToMainFeed() and it stays in the same screen without navigating.
class TrainerRegistraionScreen extends Component {
constructor(props) {
super(props);
this.state = {
statement: {
value: "",
valid: false,
touched: false,
validationRules: {
minLength: 1
}
},
keyboardVisible: false,
buttonTouched: false,
displayModal: false
}
}
// handle statement changes
statementChangedHandler = value => {
this.setState(prevState => {
return {
statement: {
...prevState.statement,
value: value,
touched: true,
valid: validate(value, prevState.statement.validationRules)
},
buttonTouched: false
};
});
};
// check for empty fields of the screen
_getFiledsNotEmptyStatus = () => {
return this.state.statement.value.length > 0 ? true : false;
}
// display message
_displayMessage = () => {
let { keyboardVisible } = this.state;
let content = (
<View style={{ width: "90%", marginBottom: 10, alignSelf: 'center' }}>
<Text style={{ fontSize: 16, color: "#707070", fontWeight: "300" }}>
Please write a short statement about your focuses as a trainer.
It is important to show your capabilities and knowledge base in
exercise and nutrition science. Inclue all certification details.
</Text>
</View>
);
if (keyboardVisible) {
content = null;
}
return content;
}
// navigate to main feed
navigateToMainFeed = () => {
this.props.navigation.navigate("mainfeed");
this.setState({
displayModal: false
});
}
// register trainer
async registerTrainer() {
let {
firstName,
lastName,
email,
password
} = this.props;
this.setState({
buttonTouched: true
});
let trainer = {
firstName: firstName,
lastName: lastName,
email: email,
password: password
}
await this.props.registerTrainer(trainer);
if (!this.props.signUpHasError) {
this.setState({
displayModal: true
});
}
}
// render popup modal
_renderPopupModal() {
return (
<ModalPopup visible={this.state.displayModal}>
<TrainerMessage
onPress={() => this.navigateToMainFeed()}
/>
</ModalPopup>
);
}
// render
render() {
let { userRegistrationInProgress } = this.props;
return (
<View>
<ImageBackground source={BackgroundOnly} style={{ width: width, height: height }} >
<View style={{ marginTop: "5%" }}>
<ClickableIcon
source={BackArrow}
height={30}
width={30}
onIconPressed={() => {this.props.navigation.navigate("trainerExperience");}}
/>
</View>
<View style={styles.headerStyles}>
<HeadingText
fontSize={26}
fontWeight={300}
textAlign="left"
fontColor="#707070"
>
Personal Statement
</HeadingText>
</View>
<View>
{this._displayMessage()}
</View>
<View style={styles.detailInput}>
<DetailInput
inputStyle={styles.inputStyles}
height={120}
width={width - 40}
multiline={true}
numberOfLines={6}
underlineColorAndroid="transparent"
maxLength={500}
editable={!userRegistrationInProgress}
onChangeText={value => this.statementChangedHandler(value)}
/>
</View>
<View>
<RoundedButton
buttonStyle={styles.buttonStyle}
text="FINISH"
submitting={userRegistrationInProgress}
onPress={() => this.registerTrainer()}
disabled={!this._getFiledsNotEmptyStatus()}
/>
</View>
{this._renderPopupModal()}
</ImageBackground>
</View>
);
}
static navigationOptions = { header: null }
}

Answer 1

First close the modal and navigate the screen
this.setState({
displayModal: false
},()=>{
this.props.navigation.navigate("mainfeed");
});