refactor(lens): reuse reactive app state hook

Author: nickskalkin

src/app/Scenes/Lens/Screens/LensCamera.tsx

@@ -18,7 +18,7 @@ import { LensPermissionPlaceholder } from "app/Scenes/Lens/Components/LensPermis
 import { LensNavigationStack } from "app/Scenes/Lens/types"
 import { goBack } from "app/system/navigation/navigate"
 import { requestPhotos } from "app/utils/requestPhotos"
-import { useIsForeground } from "app/utils/useIsForeground"
+import useAppState from "app/utils/useAppState"
 import { useRef, useState } from "react"
 import { Linking } from "react-native"
 
@@ -39,8 +39,8 @@ export const LensCamera: React.FC<Props> = ({ navigation }) => {
   const [containerSize, setContainerSize] = useState({ width: 0, height: 0 })
 
   const isFocused = useIsFocused()
-  const isForeground = useIsForeground()
-  const isActive = isFocused && isForeground
+  const { appState } = useAppState({})
+  const isActive = isFocused && appState === "active"
 
   const reportError = (context: string, error: unknown) => {
     if (__DEV__) {

src/app/utils/__tests__/useAppState.tests.ts

@@ -0,0 +1,73 @@
+import { act, renderHook } from "@testing-library/react-native"
+import useAppState from "app/utils/useAppState"
+import { AppState, AppStateStatus } from "react-native"
+
+const originalCurrentState = Object.getOwnPropertyDescriptor(AppState, "currentState")
+
+describe("useAppState", () => {
+  let handleStateChange: (state: AppStateStatus) => void
+  const remove = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.spyOn(AppState, "addEventListener").mockImplementation((_type, handler) => {
+      handleStateChange = handler
+      return { remove }
+    })
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+    if (originalCurrentState) {
+      Object.defineProperty(AppState, "currentState", originalCurrentState)
+    }
+  })
+
+  it("returns the current app state and updates it when the app state changes", () => {
+    Object.defineProperty(AppState, "currentState", {
+      configurable: true,
+      value: "background",
+    })
+
+    const { result } = renderHook(() => useAppState({}))
+
+    expect(result.current.appState).toBe("background")
+
+    act(() => handleStateChange("active"))
+
+    expect(result.current.appState).toBe("active")
+  })
+
+  it("preserves the foreground, background, and change callbacks", () => {
+    Object.defineProperty(AppState, "currentState", {
+      configurable: true,
+      value: "active",
+    })
+    const onForeground = jest.fn()
+    const onBackground = jest.fn()
+    const onChange = jest.fn()
+
+    const { result } = renderHook(() => useAppState({ onForeground, onBackground, onChange }))
+
+    act(() => handleStateChange("inactive"))
+    expect(result.current.appState).toBe("inactive")
+    expect(onBackground).not.toHaveBeenCalled()
+
+    act(() => handleStateChange("active"))
+    expect(onForeground).toHaveBeenCalledTimes(1)
+
+    act(() => handleStateChange("background"))
+    expect(onBackground).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenNthCalledWith(1, "inactive")
+    expect(onChange).toHaveBeenNthCalledWith(2, "active")
+    expect(onChange).toHaveBeenNthCalledWith(3, "background")
+  })
+
+  it("removes the app state listener on unmount", () => {
+    const { unmount } = renderHook(() => useAppState({}))
+
+    unmount()
+
+    expect(remove).toHaveBeenCalledTimes(1)
+  })
+})

src/app/utils/useAppState.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react"
+import { useEffect, useRef, useState } from "react"
 import { AppState, AppStateStatus } from "react-native"
 
 export interface AppStateProps {
@@ -14,37 +14,43 @@ export default function useAppState({ onForeground, onBackground, onChange }: Ap
    * background - The app is running in the background. The user is either in another app or on the home screen
    * inactive [iOS] - This is a transition state that currently never happens for typical React Native apps.
    */
-  const appState = useRef(AppState.currentState)
+  const previousAppState = useRef(AppState.currentState)
+  const [appState, setAppState] = useState(AppState.currentState)
 
   useEffect(() => {
     const _handleAppStateChange = (nextAppState: AppStateStatus) => {
       // App has come to the foreground
       if (
-        appState.current.match(/inactive|background/) &&
+        previousAppState.current.match(/inactive|background/) &&
         nextAppState === "active" &&
         onForeground
       ) {
         onForeground()
       }
 
       // App has come to the background
-      if (appState.current.match(/active/) && nextAppState === "background" && onBackground) {
+      if (
+        previousAppState.current.match(/active/) &&
+        nextAppState === "background" &&
+        onBackground
+      ) {
         onBackground()
       }
 
       if (onChange) {
         onChange(nextAppState)
       }
 
-      appState.current = nextAppState
+      previousAppState.current = nextAppState
+      setAppState(nextAppState)
     }
 
     const sub = AppState.addEventListener("change", _handleAppStateChange)
 
     return () => {
       sub.remove()
     }
-  }, [appState.current, onForeground, onBackground])
+  }, [onForeground, onBackground, onChange])
 
-  return { appState: appState.current }
+  return { appState }
 }