Fix blank screen after notification request

src/App.js

@@ -12,7 +12,6 @@ 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'
@@ -36,6 +35,8 @@ import { useNetService } from '/libs/services/NetService'
 import { withSentry } from '/libs/monitoring/Sentry'
 import { ThemeProvider } from '/app/theme/ThemeProvider'
 import { useInitI18n } from '/locales/useInitI18n'
+import { SecureBackgroundSplashScreenWrapper } from '/app/theme/SecureBackgroundSplashScreenWrapper'
+import { PermissionsChecker } from '/app/domain/nativePermissions/components/PermissionsChecker'
 
 // Polyfill needed for cozy-client connection
 if (!global.btoa) {
@@ -57,7 +58,6 @@ const App = ({ setClient }) => {
   const { initialRoute, isLoading } = useAppBootstrap(client)
 
   useGlobalAppState()
-  useSecureBackgroundSplashScreen()
   useCookieResyncOnResume()
   useNotifications()
   useCozyEnvironmentOverride()
@@ -156,11 +156,15 @@ const Wrapper = () => {
             <HttpServerProvider>
               <HomeStateProvider>
                 <SplashScreenProvider>
-                  <NetStatusBoundary>
-                    <ThemeProvider>
-                      <WrappedApp />
-                    </ThemeProvider>
-                  </NetStatusBoundary>
+                  <SecureBackgroundSplashScreenWrapper>
+                    <NetStatusBoundary>
+                      <ThemeProvider>
+                        <PermissionsChecker>
+                          <WrappedApp />
+                        </PermissionsChecker>
+                      </ThemeProvider>
+                    </NetStatusBoundary>
+                  </SecureBackgroundSplashScreenWrapper>
                 </SplashScreenProvider>
               </HomeStateProvider>
             </HttpServerProvider>

src/app/domain/nativePermissions/components/PermissionsChecker.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react'
+
+import { requestNotifications } from '/app/domain/nativePermissions'
+
+interface PermissionsCheckerProps {
+  children: JSX.Element
+}
+
+export const PermissionsChecker = ({
+  children
+}: PermissionsCheckerProps): JSX.Element | null => {
+  const [notificationPermissionAnswered, setNotificationPermissionAnswered] =
+    useState(false)
+
+  useEffect(() => {
+    const askNotificationPermission = async (): Promise<void> => {
+      await requestNotifications()
+      setNotificationPermissionAnswered(true)
+    }
+
+    void askNotificationPermission()
+  })
+
+  if (notificationPermissionAnswered) {
+    return children
+  }
+
+  return null
+}

src/app/domain/nativePermissions/services/nativePermissions.ts

@@ -1,6 +1,7 @@
 import {
   check,
   request,
+  checkNotifications as RNPCheckNotifications,
   requestNotifications as RNPRequestNotifications,
   PermissionStatus,
   RESULTS
@@ -24,6 +25,12 @@ export const requestNativePermission = async (
   return formatResult(result)
 }
 
+export const checkNotifications = async (): Promise<NativePermissionStatus> => {
+  const result = await RNPCheckNotifications()
+
+  return formatResult(result.status)
+}
+
 export const requestNotifications =
   async (): Promise<NativePermissionStatus> => {
     const result = await RNPRequestNotifications(['alert'])

src/app/theme/SecureBackgroundSplashScreenWrapper.ts

@@ -0,0 +1,13 @@
+import { useSecureBackgroundSplashScreen } from '/hooks/useSplashScreen'
+
+interface SecureBackgroundSplashScreenWrapperProps {
+  children: JSX.Element
+}
+
+export const SecureBackgroundSplashScreenWrapper = ({
+  children
+}: SecureBackgroundSplashScreenWrapperProps): JSX.Element => {
+  useSecureBackgroundSplashScreen()
+
+  return children
+}

src/hooks/useNotifications.ts

@@ -9,7 +9,7 @@ import {
   handleInitialNotification,
   handleNotificationOpening
 } from '/libs/notifications/notifications'
-import { requestNotifications } from '/app/domain/nativePermissions'
+import { checkNotifications } from '/app/domain/nativePermissions'
 
 export const useNotifications = (): void => {
   const client = useClient()
@@ -20,7 +20,7 @@ export const useNotifications = (): void => {
     const initializeNotifications = async (): Promise<void> => {
       if (!client) return
 
-      const permission = await requestNotifications()
+      const permission = await checkNotifications()
 
       if (permission.granted) {
         setAreNotificationsEnabled(true)