useNavigationParams hook

[vpontis]

We implemented a hook that pulls in the params from the route and optionally clears them when we navigate away from the screen.

This was a common action for us and might be worth pulling into the react-navigation core.

export const useNavigationParams = <T extends object>({
  clearParamsOnBlur = true,
}: {
  clearParamsOnBlur: boolean;
}): T => {
  const [params, setParams] = useState<T>({} as T);
  const route = useRoute<any>();
  const navigation = useNavigation();

  useFocusEffect(
    useCallback(() => {
      if (route.params) {
        setParams(route.params);
      } else {
        setParams({} as T);
      }

      return () => {
        if (clearParamsOnBlur) {
          const nullifiedParams = {} as any;
          Object.keys(route.params || {}).forEach((paramKey) => (nullifiedParams[paramKey] = null));
          navigation.setParams(nullifiedParams);
        }
      };
    }, [route, navigation, clearParamsOnBlur])
  );

  return params;
};

And this is used like:

const Component = () => {
  const { onSuccess } = useNavigationParams({ clearParamsOnBlur: true });
  return (...)
}

[slorber]

Hi.

Not sure why do you need such a hook. Can you explain? Particularly the part where you do the cleanup.