How to trigger an event when a component is shown when using react-native-navigation?

Daryn picture Daryn · Oct 17, 2016 · Viewed 40.9k times · Source

I am using react-native with react-native-navigation. I would like to reload data when a component is shown. The component is shown when a user clicks on a tab navigation button.

Should I use react life cycle events or is there something in react-native-navigation that can trigger a function when a user navigates back to a component?

I am using redux, I am not sure if that could be used to help?

This issue refers to onDisplay which seems like what I am looking for. However I can't find any official documentation about it - https://github.com/wix/react-native-navigation/issues/130

Answer

dctucker picture dctucker · Jun 21, 2018

I like the solution proposed by Bruno Reis. I tweaked mine to make it a bit simpler.

class Whatever extends Component {
    componentDidMount(){
        this.load()
        this.props.navigation.addListener('willFocus', this.load)
    }
    load = () => {
        ...
    }

}