Is there any component focus event on react native?

Question

In react native after componentDidMount() its not call again when you navigate to other screens and return to your component (screen). so react native navigation suggest do it by bellow JS codes:

componentDidMount() {
    this._Reload = this.props.navigation.addListener('focus', () => {
        //do something to reset component
    });
}

componentWillUnmount() {
    this._Reload();
}

but now I get this error: undefined is not an object (evaluating 'this.props.navigation.addListener') because I use my component in a tab component(nested). how can I add a focus to my component to refresh? I think I must do it by prop drilling.

Vivek_Neel · Accepted Answer · 2020-09-28T08:03:21.843

1

I would suggest passing parent screen navigation object (so that you will have focus listener) via context and then in your tab component set the listener to that parent navigation.

Check this for ref on how to pass data to your tab component : Passing params to tab navigator React Navigation 5

Alternatively for a functional component you can use this hook: useFocusEffect from @react-navigation/native

edited Sep 28 '20 at 08:03

answered Sep 28 '20 at 07:40

Vivek_Neel

1,343
1
14
25

thank you. my component is a class component. I cant use Hook functions. – Mehrzad Tejareh Sep 28 '20 at 07:41
Oh i see. Are you sure navigation object is not null? – Vivek_Neel Sep 28 '20 at 07:48
yes because I use my component in a tab component.(nested) – Mehrzad Tejareh Sep 28 '20 at 07:53
1

I would suggest passing parent screen navigation object (so that you will have focus listener) via context and then in your tab component set the listener to that parent navigation. – Vivek_Neel Sep 28 '20 at 07:55
This might help you https://stackoverflow.com/questions/61258731/passing-params-to-tab-navigator-react-navigation-5 – Vivek_Neel Sep 28 '20 at 07:56

Is there any component focus event on react native?

1 Answers1