Open vpontis opened 4 years ago
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 (...) }
Hi.
Not sure why do you need such a hook. Can you explain? Particularly the part where you do the cleanup.
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.
And this is used like: