react-native-vision-camera/example/src/hooks/useIsScreenFocused.ts

58 lines
1.5 KiB
TypeScript
Raw Normal View History

2021-02-20 09:07:10 -07:00
import { useEffect, useMemo, useReducer } from 'react';
import { Navigation } from 'react-native-navigation';
2021-02-19 10:44:05 -07:00
type Action =
| {
2021-02-20 09:07:10 -07:00
action: 'push';
2021-02-19 10:44:05 -07:00
componentId: string;
}
| {
2021-02-20 09:07:10 -07:00
action: 'pop';
2021-02-19 10:44:05 -07:00
componentId: string;
};
const reducer = (stack: string[], action: Action): string[] => {
switch (action.action) {
2021-02-20 09:07:10 -07:00
case 'push': {
2021-02-19 10:44:05 -07:00
stack.push(action.componentId);
break;
}
2021-02-20 09:07:10 -07:00
case 'pop': {
2021-02-19 10:44:05 -07:00
const index = stack.indexOf(action.componentId);
if (index > -1) stack.splice(index, 1);
break;
}
}
return [...stack];
};
export const useIsScreenFocused = (componentId: string): boolean => {
const [componentStack, dispatch] = useReducer(reducer, [componentId]);
2021-02-20 09:07:10 -07:00
const isFocussed = useMemo(() => componentStack[componentStack.length - 1] === componentId, [componentStack, componentId]);
2021-02-19 10:44:05 -07:00
useEffect(() => {
2021-02-20 09:07:10 -07:00
const listener = Navigation.events().registerComponentDidAppearListener((event) => {
if (event.componentType !== 'Component') return;
dispatch({
action: 'push',
componentId: event.componentId,
});
});
2021-02-19 10:44:05 -07:00
return () => listener.remove();
}, []);
useEffect(() => {
2021-02-20 09:07:10 -07:00
const listener = Navigation.events().registerComponentDidDisappearListener((event) => {
if (event.componentType !== 'Component') return;
dispatch({
action: 'pop',
componentId: event.componentId,
});
});
2021-02-19 10:44:05 -07:00
return () => listener.remove();
}, []);
return isFocussed;
};