fix: Handle hiding secure_background SplashScreen

We want the app to correctly hide the new `secure_background`
SplashScreen when the app goes active

The `secure_background` is a new SplashScreen that is displayed when
the app is on OS background so the app's content is hiden when in this
state

Related PR: cozy/react-native-bootsplash#1

src/App.js

@@ -12,6 +12,7 @@ import { CozyProvider, useClient } from 'cozy-client'
 import { NativeIntentProvider } from 'cozy-intent'
 
 import { RootNavigator } from '/AppRouter'
+import { useSecureBackgroundSplashScreen } from '/hooks/useSplashScreen'
 import * as RootNavigation from '/libs/RootNavigation'
 import NetStatusBoundary from '/libs/services/NetStatusBoundary'
 import { IconChangedModal } from '/libs/icon/IconChangedModal'
@@ -56,6 +57,7 @@ const App = ({ setClient }) => {
   const { initialRoute, isLoading } = useAppBootstrap(client)
 
   useGlobalAppState()
+  useSecureBackgroundSplashScreen()
   useCookieResyncOnResume()
   useNotifications()
   useCozyEnvironmentOverride()

src/app/theme/SplashScreenService.ts

@@ -9,11 +9,11 @@ export class SplashScreenService {
   hide = hideSplashScreen
 }
 
-export const showSplashScreen = (): Promise<void> => {
+export const showSplashScreen = (bootsplashName?: string): Promise<void> => {
   devlog('☁️ showSplashScreen called')
-  return RNBootSplash.show({ fade: true })
+  return RNBootSplash.show({ fade: true, bootsplashName })
 }
-export const hideSplashScreen = (): Promise<void> => {
+export const hideSplashScreen = (bootsplashName?: string): Promise<void> => {
   // On the default page (home), we want to reset the UI state at first render
   // so we get correct OS theme and status bar color
   const isDefaultRoute =
@@ -27,7 +27,7 @@ export const hideSplashScreen = (): Promise<void> => {
     devlog('☁️ hideSplashScreen called with non-default route')
   }
 
-  return RNBootSplash.hide({ fade: true })
+  return RNBootSplash.hide({ fade: true, bootsplashName })
 }
 
 export const getSplashScreenStatus = (): Promise<VisibilityStatus> => {

src/hooks/useSplashScreen.ts

@@ -1,6 +1,9 @@
-import { useContext } from 'react'
+import { useContext, useEffect } from 'react'
+import { AppState } from 'react-native'
 
+import { hideSplashScreen } from '/app/theme/SplashScreenService'
 import { SplashScreenContext } from '/libs/contexts/SplashScreenContext'
+import { safePromise } from '/utils/safePromise'
 
 export const useSplashScreen = (): {
   hideSplashScreen: () => Promise<void>
@@ -9,3 +12,17 @@ export const useSplashScreen = (): {
   hideSplashScreen: useContext(SplashScreenContext).hide,
   showSplashScreen: useContext(SplashScreenContext).show
 })
+
+export const useSecureBackgroundSplashScreen = (): void => {
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      if (nextAppState === 'active') {
+        safePromise(hideSplashScreen)('secure_background')
+      }
+    })
+
+    return () => {
+      subscription.remove()
+    }
+  }, [])
+}