Perviously when I wanted to make some actions when screen is opened I put them inside componentDidMount
. For example I can fetch some data.
like this.
componentDidMount() {
this.updateData();
}
But with react-navigation
componentDidMount
occurs only one time when user open screen first time, and if later user open this page again it will not trigger componentDidMount.
What is proper way to detect when page(screen) is activated and do actions?
With react-navigation
, you can do that in 2 steps:
Add listeners in componentDidMount
or componentWillMount
, to hook events
Remove listeners in componentWillUnmount
, to avoid unexpected calling
API Reference Documents v3.x, v4.x, v5.x :
React-navigation v3.x, v4.x:
addListener
- Subscribe to updates to navigation lifecycleReact Navigation emits events to screen components that subscribe to them:
willFocus
- the screen will focusdidFocus
- the screen focused (if there was a transition, the transition completed)willBlur
- the screen will be unfocuseddidBlur
- the screen unfocused (if there was a transition, the transition completed)
React-navigation 3.x, 4.x example:
const didBlurSubscription = this.props.navigation.addListener(
'didBlur',
payload => {
console.debug('didBlur', payload);
}
);
// Remove the listener when you are done
didBlurSubscription.remove();
UPDATED v5.x
The events had been changed in v5.x
Screens can add listeners on the navigation prop like in React Navigation. By default, there are 2 events available:
- focus - This event is emitted when the screen comes into focus
- blur - This event is emitted when the screen goes out of focus
- state (advanced) - This event is emitted when the navigator's state changes
Sample code from reactnavigation.org
class Profile extends React.Component {
componentDidMount() {
this._unsubscribe = navigation.addListener('focus', () => {
// do something
});
}
componentWillUnmount() {
this._unsubscribe();
}
render() {
// Content of the component
}
}
Ref v5.x: https://reactnavigation.org/docs/navigation-events