Multi tool use

componentDidMount not being called after goBack navigation call

I've set up a StackNavigator which will fire a redux action to fetch data on componentDidMount, after navigating to another screen and going back to the previous screen, componentDidMount is no longer firing and I'm presented with a white screen. I've tried to reset the StackNavigator using StackActions.reset but that just leads to my other screens not mounting as well and in turn presenting an empty screen. Is there a way to force componentDidMount after this.props.navigation.goBack()?

componentDidMount

componentDidMount

StackActions.reset

componentDidMount

this.props.navigation.goBack()

Go Back Function

_goBack = () => {
this.props.navigation.goBack();
};


Navigation function to new screen

_showQuest = (questId, questTitle ) => {
this.props.navigation.navigate("Quest", {
questId,
questTitle,
});
};


componentDidMount

componentDidMount

1 Answer
1

The components are not removed when the navigation changes, so componentDidMount will only be called the first time it is rendered.

componentDidMount

You could use this alternative approach instead:

class MyComponent extends React.Component {
state = {
isFocused: false
};

componentDidMount() {
this.subs = [
this.props.navigation.addListener("didFocus", () => this.setState({ isFocused: true })),
this.props.navigation.addListener("willBlur", () => this.setState({ isFocused: false }))
];
}

componentWillUnmount() {
this.subs.forEach(sub => sub.remove());
}

render() {
// ...
}
}


isFocused

didFocus

willBlur

componentDidMount

componentWillUnmount

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.