test

package.json

@@ -54,6 +54,7 @@
     "@react-native-clipboard/clipboard": "^1.10.0",
     "@react-native-community/blur": "^4.3.0",
     "@react-native-community/datetimepicker": "7.2.0",
+    "@react-native-masked-view/masked-view": "^0.3.1",
     "@react-native-menu/menu": "^0.8.0",
     "@react-native-picker/picker": "2.4.10",
     "@react-navigation/bottom-tabs": "^6.5.7",

src/Splash.tsx

@@ -1,9 +1,17 @@
-import React from 'react'
+import React, {useCallback, useEffect} from 'react'
-import {View, Image, StyleSheet, Animated, Easing} from 'react-native'
+import {View, Image, StyleSheet} from 'react-native'
-import Constants from 'expo-constants'
 import * as SplashScreen from 'expo-splash-screen'
 // @ts-ignore
-import splashImagePointer from '../assets/splash.png'
+import splashImagePointer from '../assets/icon-android-foreground.png'
+import LinearGradient from 'react-native-linear-gradient'
+import Animated, {
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
+import MaskedView from '@react-native-masked-view/masked-view'
 
 const splashImageUri = Image.resolveAssetSource(splashImagePointer).uri
 
@@ -14,48 +22,107 @@ type Props = {
 SplashScreen.preventAutoHideAsync().catch(() => {})
 
 export function Splash(props: React.PropsWithChildren<Props>) {
-  const animation = React.useMemo(() => new Animated.Value(1), [])
+  const progress = useSharedValue(0)
   const [isAnimationComplete, setIsAnimationComplete] = React.useState(false)
 
-  React.useEffect(() => {
+  const onFinish = useCallback(() => {
-    if (props.isReady) {
+    SplashScreen.hideAsync().catch(() => {})
-      Animated.timing(animation, {
+    setIsAnimationComplete(true)
-        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 (
+  useEffect(() => {
-    <View>
+    if (props.isReady) {
-      {props.children}
+      progress.value = withTiming(1, {duration: 1000}, () => {
+        runOnJS(onFinish)()
+      })
+    }
+  }, [onFinish, progress, props.isReady])
 
-      {!isAnimationComplete && (
+  const imageScale = useAnimatedStyle(() => {
-        <View style={[StyleSheet.absoluteFillObject]}>
+    return {
-          <Animated.Image
+      transform: [
-            onLoadEnd={onLoadEnd}
+        {
-            style={[
+          scale: interpolate(
-              {
+            progress.value,
-                width: '100%',
+            [0, 0.2, 1],
-                height: '100%',
+            [1, 0.8, 100],
-                resizeMode: Constants.expoConfig?.splash?.resizeMode || 'cover',
+            'clamp',
-                transform: [
+          ),
-                  {
+        },
-                    scale: animation,
+      ],
-                  },
+    }
-                ],
+  })
-              },
+
-            ]}
+  const appScale = useAnimatedStyle(() => {
-            source={{uri: splashImageUri}}
+    return {
-          />
+      transform: [
-        </View>
+        {
+          scale: interpolate(progress.value, [0, 1], [1.1, 1]),
+        },
+      ],
+    }
+  })
+
+  const opacityScale = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(progress.value, [0, 0.15, 0.3], [0, 0, 1], 'clamp'),
+    }
+  })
+
+  return (
+    <View style={{flex: 1}}>
+      {isAnimationComplete ? null : (
+        <LinearGradient
+          colors={['#0A7AFF', '#59B9FF']}
+          style={[StyleSheet.absoluteFillObject]}
+        />
       )}
+      <MaskedView
+        style={{flex: 1}}
+        maskElement={
+          <View
+            style={{
+              // Transparent background because mask is based off alpha channel.
+              backgroundColor: 'transparent',
+              flex: 1,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            <Animated.Image
+              onLoadEnd={onLoadEnd}
+              style={[
+                {
+                  resizeMode: 'contain',
+                  width: '50%',
+                  height: '50%',
+                  position: 'absolute',
+                  top: '25%',
+                  left: '25%',
+                },
+                imageScale,
+              ]}
+              source={{uri: splashImageUri}}
+            />
+          </View>
+        }>
+        <Animated.View style={[{flex: 1}, opacityScale, appScale]}>
+          {props.children}
+        </Animated.View>
+      </MaskedView>
     </View>
   )
 }
+
+import Svg, {SvgProps, Path} from 'react-native-svg'
+const Logo = (props: SvgProps) => (
+  <Svg width={'100%'} height={'100%'} fill="none" {...props}>
+    <Path
+      fill="#fff"
+      d="M180 141.964c-16.301-31.702-60.692-90.782-101.965-119.92C38.497-5.868 23.414-1.032 13.526 3.436 2.081 8.608 0 26.178 0 36.516c0 10.338 5.667 84.756 9.364 97.178 12.215 41.044 55.696 54.913 95.74 50.462 2.047-.304 4.123-.584 6.225-.844-2.062.33-4.139.612-6.225.844-58.684 8.691-110.8 30.077-42.446 106.174 75.19 77.85 103.047-16.693 117.342-64.628 14.295 47.935 30.76 139.069 115.995 64.628 64.005-64.628 17.585-97.48-41.099-106.172a131.118 131.118 0 0 1-6.225-.843c2.102.259 4.178.54 6.225.843 40.044 4.452 83.525-9.418 95.74-50.461 3.697-12.422 9.364-86.84 9.364-97.178 0-10.338-2.081-27.909-13.526-33.08-9.888-4.468-24.971-9.305-64.509 18.608C240.692 51.184 196.301 110.262 180 141.964Z"
+    />
+  </Svg>
+)

yarn.lock

@@ -4434,6 +4434,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.3.0.tgz#9e558170c106bbafaa1ef502bd8e6d4651012bf9"
   integrity sha512-+zDZ20NUnSWghj7Ku5aFphMzuM9JulqCW+aPXT6IfIXFbb8tzYTTOSeRFOtuekJ99ibW2fUCSsjuKNlwDIbHFg==
 
+"@react-native-masked-view/masked-view@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.3.1.tgz#5bd76f17004a6ccbcec03856893777ee91f23d29"
+  integrity sha512-uVm8U6nwFIlUd1iDIB5cS+lDadApKR+l8k4k84d9hn+GN4lzAIJhUZ9syYX7c022MxNgAlbxoFLt0pqKoyaAGg==
+
 "@react-native-menu/menu@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@react-native-menu/menu/-/menu-0.8.0.tgz#dbf227c2081e5ffd3d2073ee68ecc84cf8639727"