Create media captured page

example/src/hooks/useCachedState.ts

@@ -0,0 +1,32 @@
+import { useCallback, useRef, useState } from "react";
+
+/**
+ * Same as `useState`, but swallow all calls to `setState` if the value didn't change (uses `===` comparator per default)
+ * @param initialValue The initial state
+ * @param comparator A custom comparator, useful if you want to only round numbers or use string locale for comparison. Make sure this function is memoized!
+ */
+export const useCachedState = <T>(
+  initialValue: T,
+  comparator?: (oldState: T, newState: T) => boolean
+): [T, (newState: T) => void] => {
+  const [state, setState] = useState(initialValue);
+  const cachedState = useRef(initialValue);
+
+  const dispatchState = useCallback(
+    (newState: T) => {
+      const areEqual =
+        comparator == null
+          ? cachedState.current === newState
+          : comparator(cachedState.current, newState);
+      if (areEqual) {
+        return;
+      } else {
+        cachedState.current = newState;
+        setState(newState);
+      }
+    },
+    [comparator]
+  );
+
+  return [state, dispatchState];
+};

example/src/hooks/useIsScreenFocused.ts

@@ -0,0 +1,64 @@
+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;
+};