diff --git a/src/App.native.tsx b/src/App.native.tsx
index d11d05e705..993e8c037e 100644
--- a/src/App.native.tsx
+++ b/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 (
-
-
-
-
- {/* All components should be within this provider */}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {/* All components should be within this provider */}
+
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index 3f6b5ba20c..a00f7b3530 100644
--- a/src/Navigation.tsx
+++ b/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()
}}>
diff --git a/src/Splash.tsx b/src/Splash.tsx
new file mode 100644
index 0000000000..9fc6b3fd99
--- /dev/null
+++ b/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) {
+ 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 (
+
+ {props.children}
+
+ {!isAnimationComplete && (
+
+
+
+ )}
+
+ )
+}