React Navigation 5 - navigate to nested screen, useFocusEffect and clearing the params

325 Views Asked by At

I have problems clearing the params for a route. I'm not sure if this is even a valid pattern of passing data to a screen then performing an action.

This is my flow:

First im navigating to the specific screen:

navigation.navigate('DrawerMain', {
      screen: 'Drawer',
      params: {
        screen: 'Main',
        params: {
          screen: 'Home',
          params: {
            screen: 'Home',
            params: {
              screen: 'FoodTab',
              params: {
                post: post
              },
            },
          },
        },
      },
    });
  };

Then inside the FoodTab I've a useFocusEffect hook to pick up on the data and then call an api:

 useFocusEffect(
    React.useCallback(() => {
    
    savePost(route.params.post);
  }, [route.params?.post]))

Now the problem is whenever I navigate to another tab or open a modal screen (nested at the root of the screen hierachy) from the FoodTab TavNavigator Screen, the params for my FoodTab stays and the useFocusEffect runs again resulting in the post being added again.

I tried to do the following to clear it the params out but just resulted in a infinite loop happening inside the useFocusEffect.

navigation.setParams(null)

Any help is very much needed!

0

There are 0 best solutions below