expo-template-default 57.0.0 → 57.0.1

package/app.json

@@ -29,10 +29,8 @@
         "expo-splash-screen",
         {
           "backgroundColor": "#208AEF",
-          "android": {
-            "image": "./assets/images/splash-icon.png",
-            "imageWidth": 76
-          }
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 76
         }
       ]
     ],

package/package.json

@@ -2,17 +2,17 @@
   "name": "expo-template-default",
   "license": "0BSD",
   "main": "expo-router/entry",
-  "version": "57.0.0",
+  "version": "57.0.1",
   "dependencies": {
-    "@expo/ui": "~57.0.0",
-    "expo": "~57.0.0-preview.0",
-    "expo-constants": "~57.0.0",
+    "@expo/ui": "~57.0.1",
+    "expo": "~57.0.0-preview.1",
+    "expo-constants": "~57.0.1",
     "expo-device": "~57.0.0",
     "expo-font": "~57.0.0",
     "expo-glass-effect": "~57.0.0",
     "expo-image": "~57.0.0",
     "expo-linking": "~57.0.0",
-    "expo-router": "~57.0.0",
+    "expo-router": "~57.0.1",
     "expo-splash-screen": "~57.0.0",
     "expo-status-bar": "~57.0.0",
     "expo-symbols": "~57.0.0",

package/src/app/_layout.tsx

@@ -1,9 +1,12 @@
 import { DarkTheme, DefaultTheme, ThemeProvider } from 'expo-router';
+import * as SplashScreen from 'expo-splash-screen';
 import { useColorScheme } from 'react-native';
 
 import { AnimatedSplashOverlay } from '@/components/animated-icon';
 import AppTabs from '@/components/app-tabs';
 
+SplashScreen.preventAutoHideAsync();
+
 export default function TabLayout() {
   const colorScheme = useColorScheme();
   return (

package/src/components/animated-icon.tsx

@@ -1,4 +1,5 @@
 import { Image } from 'expo-image';
+import * as SplashScreen from 'expo-splash-screen';
 import { useState } from 'react';
 import { Dimensions, StyleSheet, View } from 'react-native';
 import Animated, { Easing, Keyframe } from 'react-native-reanimated';
@@ -8,13 +9,14 @@ const INITIAL_SCALE_FACTOR = Dimensions.get('screen').height / 90;
 const DURATION = 600;
 
 export function AnimatedSplashOverlay() {
+  const [animate, setAnimate] = useState(false);
   const [visible, setVisible] = useState(true);
 
   if (!visible) return null;
 
   const splashKeyframe = new Keyframe({
     0: {
-      transform: [{ scale: INITIAL_SCALE_FACTOR }],
+      transform: [{ scale: 1 }],
       opacity: 1,
     },
     20: {
@@ -31,7 +33,9 @@ export function AnimatedSplashOverlay() {
     },
   });
 
-  return (
+  const image = <Image style={styles.image} source={require('@/assets/images/expo-logo.png')} />;
+
+  return animate ? (
     <Animated.View
       entering={splashKeyframe.duration(DURATION).withCallback((finished) => {
         'worklet';
@@ -39,8 +43,19 @@ export function AnimatedSplashOverlay() {
           scheduleOnRN(setVisible, false);
         }
       })}
-      style={styles.backgroundSolidColor}
-    />
+      style={styles.splashOverlay}>
+      {image}
+    </Animated.View>
+  ) : (
+    <View
+      onLayout={() => {
+        SplashScreen.hideAsync().finally(() => {
+          setAnimate(true);
+        });
+      }}
+      style={styles.splashOverlay}>
+      {image}
+    </View>
   );
 }
 
@@ -113,7 +128,6 @@ const styles = StyleSheet.create({
     zIndex: 100,
   },
   image: {
-    position: 'absolute',
     width: 76,
     height: 71,
   },
@@ -124,9 +138,11 @@ const styles = StyleSheet.create({
     height: 128,
     position: 'absolute',
   },
-  backgroundSolidColor: {
+  splashOverlay: {
     ...StyleSheet.absoluteFill,
     backgroundColor: '#208AEF',
+    alignItems: 'center',
+    justifyContent: 'center',
     zIndex: 1000,
   },
 });