65 lines
1.5 KiB
TypeScript
65 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;
|
||
|
|
};
|