React-navigation call function on screen change

I need to acquire data from the server to load user set settings when the user changes screen. It is done by a function in the class. I have tried:

componentWillMount(){
console.log("Sent to function");
this.onSaveCats('initialize');
}


What does not post anything to console log. I have not found a good solution for triggering a function when a new screen is changed. Is there something I am missing?

"dependencies": {
"expo": "^20.0.0",
"react": "16.0.0-alpha.12",
"react-native": "^0.47.0",
"react-native-radio-buttons": "^1.0.0",
"react-navigation": "^1.0.0-beta.11"
}


TabNavigator

1 Answer
1

In react navigation, we can subscribe to listeners and add corresponding callbacks.
The four events that we can subscribe to listeners on are:
willFocus, willBlur, didFocus and didBlur.

Usage in this case:

export default class AnyScreen extends Component{
constructor(props){
super(props);
const didBlurSubscription = this.props.navigation.addListener(
'didBlur',
payload => {
console.debug('didBlur', payload);
});
}
}


You can add similar subscription for didFocus as well by substituting 'didBlur' to any of the other options.

Once you're done listening, you can even remove the listener subscription:

didBlurSubscription.remove();


Hope this helps!

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.