Add splashiness

src/App.native.tsx

@@ -34,6 +34,7 @@ import {
 } from 'state/session'
 import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
 import * as persisted from '#/state/persisted'
+import {Splash} from '#/Splash'
 
 SplashScreen.preventAutoHideAsync()
 
@@ -53,27 +54,26 @@ function InnerApp() {
     resumeSession(account)
   }, [resumeSession])
 
-  // wait for session to resume
-  if (isInitialLoad) return null
-
   return (
-    <React.Fragment
-      // Resets the entire tree below when it changes:
-      key={currentAccount?.did}>
-      <LoggedOutViewProvider>
-        <UnreadNotifsProvider>
-          <ThemeProvider theme={colorMode}>
-            {/* All components should be within this provider */}
-            <RootSiblingParent>
-              <GestureHandlerRootView style={s.h100pct}>
-                <TestCtrls />
-                <Shell />
-              </GestureHandlerRootView>
-            </RootSiblingParent>
-          </ThemeProvider>
-        </UnreadNotifsProvider>
-      </LoggedOutViewProvider>
-    </React.Fragment>
+    <Splash isReady={isInitialLoad}>
+      <React.Fragment
+        // Resets the entire tree below when it changes:
+        key={currentAccount?.did}>
+        <LoggedOutViewProvider>
+          <UnreadNotifsProvider>
+            <ThemeProvider theme={colorMode}>
+              {/* All components should be within this provider */}
+              <RootSiblingParent>
+                <GestureHandlerRootView style={s.h100pct}>
+                  <TestCtrls />
+                  <Shell />
+                </GestureHandlerRootView>
+              </RootSiblingParent>
+            </ThemeProvider>
+          </UnreadNotifsProvider>
+        </LoggedOutViewProvider>
+      </React.Fragment>
+    </Splash>
   )
 }
 

src/Navigation.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import {StyleSheet} from 'react-native'
-import * as SplashScreen from 'expo-splash-screen'
 import {
   NavigationContainer,
   createNavigationContainerRef,
@@ -489,7 +488,6 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
       linking={LINKING}
       theme={theme}
       onReady={() => {
-        SplashScreen.hideAsync()
         logModuleInitTime()
         onReady()
       }}>

src/Splash.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import {View, Image, StyleSheet, Animated, Easing} from 'react-native'
+import Constants from 'expo-constants'
+import * as SplashScreen from 'expo-splash-screen'
+// @ts-ignore
+import splashImagePointer from '../assets/splash.png'
+
+const splashImageUri = Image.resolveAssetSource(splashImagePointer).uri
+
+type Props = {
+  isReady: boolean
+}
+
+SplashScreen.preventAutoHideAsync().catch(() => {})
+
+export function Splash(props: React.PropsWithChildren<Props>) {
+  const animation = React.useMemo(() => new Animated.Value(1), [])
+  const [isAnimationComplete, setIsAnimationComplete] = React.useState(false)
+
+  React.useEffect(() => {
+    if (props.isReady) {
+      Animated.timing(animation, {
+        toValue: 1.5,
+        duration: 500,
+        useNativeDriver: true,
+        easing: Easing.cubic,
+      }).start(() => setIsAnimationComplete(true))
+    }
+  }, [animation, props.isReady, setIsAnimationComplete])
+
+  const onLoadEnd = React.useCallback(() => {
+    SplashScreen.hideAsync().catch(() => {})
+  }, [])
+
+  return (
+    <View>
+      {props.children}
+
+      {!isAnimationComplete && (
+        <View style={[StyleSheet.absoluteFillObject]}>
+          <Animated.Image
+            onLoadEnd={onLoadEnd}
+            style={[
+              {
+                width: '100%',
+                height: '100%',
+                resizeMode: Constants.expoConfig?.splash?.resizeMode || 'cover',
+                transform: [
+                  {
+                    scale: animation,
+                  },
+                ],
+              },
+            ]}
+            source={{uri: splashImageUri}}
+          />
+        </View>
+      )}
+    </View>
+  )
+}