javascriptreact-nativeexporeact-navigation-v5react-lifecycle-hooks

Drawer navigator screens strange behavior


I'm using react-navigation v5 in my expo managed workflow project and the thing that I noticed is that every second time I visit a screen that is attached to a drawer navigator, lifecycle methods are not being invoked...

Here is the example:

- DrawerNavigator
  - Screen1
  - Screen2

The first time I visit "Screen1" useEffect hook is being invoked and all of my data is being fetched. Once I navigate from it ( navigate to a "Screen2" ) and go back to "Screen1", nothing is happening ( data is not being fetched again )... Is there something that I'm missing because I want on every visit of the "Screen*" my data to be restarted ( fetched again )?

Thanks!


Solution

  • You will have to use the 'useFocusEffect' which will run everytime the screen is loaded.

    You can find the reference here https://reactnavigation.org/docs/use-focus-effect/

    useEffect doesnt work like that so when you come back to screen1 which is already mounted and in the stack the effect wont run.