useFocusEffect / useIsFocused

src/Hooks.ts

@@ -1,6 +1,7 @@
 import {
   useState,
   useContext,
+  useEffect,
   useLayoutEffect,
   useRef,
   useCallback,
@@ -15,6 +16,7 @@ import {
   NavigationEventPayload,
   EventType,
 } from 'react-navigation';
+import { BackHandler } from 'react-native';
 
 export function useNavigation<S>(): NavigationScreenProp<S & NavigationRoute> {
   const navigation = useContext(NavigationContext) as any; // TODO typing?
@@ -143,3 +145,75 @@ export function useFocusState() {
 
   return focusState;
 }
+
+type EffectCallback = (() => void) | (() => () => void);
+
+// Inspired by same hook from react-navigation v5
+// See https://github.com/react-navigation/hooks/issues/39#issuecomment-534694135
+export const useFocusEffect = (callback: EffectCallback) => {
+  const navigation = useNavigation();
+  const getCallback = useGetter(callback);
+
+  useEffect(() => {
+    let isFocused = false;
+    let cleanup: (() => void) | void;
+
+    if (navigation.isFocused()) {
+      cleanup = getCallback()();
+      isFocused = true;
+    }
+
+    const focusSubscription = navigation.addListener('willFocus', () => {
+      // If callback was already called for focus, avoid calling it again
+      // The focus event may also fire on intial render, so we guard against runing the effect twice
+      if (isFocused) {
+        return;
+      }
+
+      cleanup && cleanup();
+      cleanup = getCallback()();
+      isFocused = true;
+    });
+
+    const blurSubscription = navigation.addListener('willBlur', () => {
+      cleanup && cleanup();
+      cleanup = undefined;
+      isFocused = false;
+    });
+
+    return () => {
+      cleanup && cleanup();
+      focusSubscription.remove();
+      blurSubscription.remove();
+    };
+  }, [getCallback, navigation]);
+};
+
+export const useIsFocused = () => {
+  const navigation = useNavigation();
+  const [focused, setFocused] = useState(navigation.isFocused());
+
+  useEffect(() => {
+    const focusSubscription = navigation.addListener('willFocus', () =>
+      setFocused(true),
+    );
+    const blurSubscription = navigation.addListener('willBlur', () =>
+      setFocused(false),
+    );
+    return () => {
+      focusSubscription.remove();
+      blurSubscription.remove();
+    };
+  }, [setFocused]);
+
+  return focused;
+};
+
+export const useBackHandler = (backHandler: () => boolean) => {
+  useFocusEffect(() => {
+    BackHandler.addEventListener('hardwareBackPress', backHandler);
+    return () => {
+      BackHandler.removeEventListener('hardwareBackPress', backHandler);
+    };
+  });
+};