58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { useEffect, useMemo, useReducer } from 'react';
|
|
import { Navigation } from 'react-native-navigation';
|
|
|
|
type Action =
|
|
| {
|
|
action: 'push';
|
|
componentId: string;
|
|
}
|
|
| {
|
|
action: 'pop';
|
|
componentId: string;
|
|
};
|
|
|
|
const reducer = (stack: string[], action: Action): string[] => {
|
|
switch (action.action) {
|
|
case 'push': {
|
|
stack.push(action.componentId);
|
|
break;
|
|
}
|
|
case 'pop': {
|
|
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]);
|
|
const isFocussed = useMemo(() => componentStack[componentStack.length - 1] === componentId, [componentStack, componentId]);
|
|
|
|
useEffect(() => {
|
|
const listener = Navigation.events().registerComponentDidAppearListener((event) => {
|
|
if (event.componentType !== 'Component') return;
|
|
dispatch({
|
|
action: 'push',
|
|
componentId: event.componentId,
|
|
});
|
|
});
|
|
|
|
return () => listener.remove();
|
|
}, []);
|
|
useEffect(() => {
|
|
const listener = Navigation.events().registerComponentDidDisappearListener((event) => {
|
|
if (event.componentType !== 'Component') return;
|
|
dispatch({
|
|
action: 'pop',
|
|
componentId: event.componentId,
|
|
});
|
|
});
|
|
|
|
return () => listener.remove();
|
|
}, []);
|
|
|
|
return isFocussed;
|
|
};
|