rm

package.json

@@ -80,7 +80,6 @@
     "@radix-ui/react-focus-guards": "^1.1.1",
     "@radix-ui/react-focus-scope": "^1.1.0",
     "@react-native-async-storage/async-storage": "1.23.1",
-    "@react-native-masked-view/masked-view": "0.3.0",
     "@react-native-menu/menu": "^1.1.0",
     "@react-native-picker/picker": "2.6.1",
     "@react-navigation/bottom-tabs": "^6.5.20",

src/Splash.tsx

@@ -18,9 +18,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import Svg, {Path, SvgProps} from 'react-native-svg'
 import {Image} from 'expo-image'
 import * as SplashScreen from 'expo-splash-screen'
-import MaskedView from '@react-native-masked-view/masked-view'
 
-import {isAndroid} from '#/platform/detection'
 import {Logotype} from '#/view/icons/Logotype'
 // @ts-ignore
 import splashImagePointer from '../assets/splash.png'
@@ -53,8 +51,6 @@ type Props = {
   isReady: boolean
 }
 
-const AnimatedLogo = Animated.createAnimatedComponent(Logo)
-
 export function Splash(props: React.PropsWithChildren<Props>) {
   'use no memo'
   const insets = useSafeAreaInsets()
@@ -81,40 +77,40 @@ export function Splash(props: React.PropsWithChildren<Props>) {
     return {
       transform: [
         {
-          scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'),
+          scale: interpolate(intro.value, [0, 1], [0.8, 1], 'clamp'),
         },
         {
           scale: interpolate(
-            outroLogo.get(),
+            outroLogo.value,
             [0, 0.08, 1],
             [1, 0.8, 500],
             'clamp',
           ),
         },
       ],
-      opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'),
+      opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
     }
   })
   const bottomLogoAnimation = useAnimatedStyle(() => {
     return {
-      opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'),
+      opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
     }
   })
   const reducedLogoAnimation = useAnimatedStyle(() => {
     return {
       transform: [
         {
-          scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'),
+          scale: interpolate(intro.value, [0, 1], [0.8, 1], 'clamp'),
         },
       ],
-      opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'),
+      opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
     }
   })
 
   const logoWrapperAnimation = useAnimatedStyle(() => {
     return {
       opacity: interpolate(
-        outroAppOpacity.get(),
+        outroAppOpacity.value,
         [0, 0.1, 0.2, 1],
         [1, 1, 0, 0],
         'clamp',
@@ -126,11 +122,11 @@ export function Splash(props: React.PropsWithChildren<Props>) {
     return {
       transform: [
         {
-          scale: interpolate(outroApp.get(), [0, 1], [1.1, 1], 'clamp'),
+          scale: interpolate(outroApp.value, [0, 1], [1.1, 1], 'clamp'),
         },
       ],
       opacity: interpolate(
-        outroAppOpacity.get(),
+        outroAppOpacity.value,
         [0, 0.1, 0.2, 1],
         [0, 0, 1, 1],
         'clamp',
@@ -146,37 +142,29 @@ export function Splash(props: React.PropsWithChildren<Props>) {
     if (isReady) {
       SplashScreen.hideAsync()
         .then(() => {
-          intro.set(() =>
+          intro.value = withTiming(
-            withTiming(
+            1,
-              1,
+            {duration: 400, easing: Easing.out(Easing.cubic)},
-              {duration: 400, easing: Easing.out(Easing.cubic)},
+            async () => {
-              async () => {
+              // set these values to check animation at specific point
-                // set these values to check animation at specific point
+              // outroLogo.value = 0.1
-                // outroLogo.set(0.1)
+              // outroApp.value = 0.1
-                // outroApp.set(0.1)
+              outroLogo.value = withTiming(
-                outroLogo.set(() =>
+                1,
-                  withTiming(
+                {duration: 1200, easing: Easing.in(Easing.cubic)},
-                    1,
+                () => {
-                    {duration: 1200, easing: Easing.in(Easing.cubic)},
+                  runOnJS(onFinish)()
-                    () => {
+                },
-                      runOnJS(onFinish)()
+              )
-                    },
+              outroApp.value = withTiming(1, {
-                  ),
+                duration: 1200,
-                )
+                easing: Easing.inOut(Easing.cubic),
-                outroApp.set(() =>
+              })
-                  withTiming(1, {
+              outroAppOpacity.value = withTiming(1, {
-                    duration: 1200,
+                duration: 1200,
-                    easing: Easing.inOut(Easing.cubic),
+                easing: Easing.in(Easing.cubic),
-                  }),
+              })
-                )
+            },
-                outroAppOpacity.set(() =>
-                  withTiming(1, {
-                    duration: 1200,
-                    easing: Easing.in(Easing.cubic),
-                  }),
-                )
-              },
-            ),
           )
         })
         .catch(() => {})
@@ -221,66 +209,31 @@ export function Splash(props: React.PropsWithChildren<Props>) {
         </View>
       )}
 
-      {isReady &&
+      {isReady && (
-        (isAndroid || reduceMotion === true ? (
+        <>
-          // Use a simple fade on older versions of android (work around a bug)
+          <Animated.View style={[{flex: 1}, appAnimation]}>
-          <>
+            {props.children}
-            <Animated.View style={[{flex: 1}, appAnimation]}>
+          </Animated.View>
-              {props.children}
-            </Animated.View>
 
-            {!isAnimationComplete && (
+          {!isAnimationComplete && (
-              <Animated.View
+            <Animated.View
-                style={[
+              style={[
-                  StyleSheet.absoluteFillObject,
+                StyleSheet.absoluteFillObject,
-                  logoWrapperAnimation,
+                logoWrapperAnimation,
-                  {
+                {
-                    flex: 1,
+                  flex: 1,
-                    justifyContent: 'center',
+                  justifyContent: 'center',
-                    alignItems: 'center',
+                  alignItems: 'center',
-                    transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
+                  transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
-                  },
+                },
-                ]}>
+              ]}>
-                <AnimatedLogo
+              <Animated.View style={[logoAnimations]}>
-                  fill={logoBg}
+                <Logo fill={logoBg} />
-                  style={[{opacity: 0}, logoAnimations]}
-                />
               </Animated.View>
-            )}
-          </>
-        ) : (
-          <MaskedView
-            style={[StyleSheet.absoluteFillObject]}
-            maskElement={
-              <Animated.View
-                style={[
-                  {
-                    // Transparent background because mask is based off alpha channel.
-                    backgroundColor: 'transparent',
-                    flex: 1,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
-                  },
-                ]}>
-                <AnimatedLogo fill={logoBg} style={[logoAnimations]} />
-              </Animated.View>
-            }>
-            {!isAnimationComplete && (
-              <View
-                style={[
-                  StyleSheet.absoluteFillObject,
-                  {
-                    backgroundColor: logoBg,
-                  },
-                ]}
-              />
-            )}
-            <Animated.View style={[{flex: 1}, appAnimation]}>
-              {props.children}
             </Animated.View>
-          </MaskedView>
+          )}
-        ))}
+        </>
+      )}
     </View>
   )
 }

yarn.lock

@@ -5655,11 +5655,6 @@
     prompts "^2.4.2"
     semver "^7.5.2"
 
-"@react-native-masked-view/masked-view@0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.3.0.tgz#bd29fae18d148a685331910a3c7b766ce87eafcc"
-  integrity sha512-qLyoObcjzrkpNcoJjXquUePXfL1dXjHtuv+yX0zZ0Q4kG5yvVqd620+tSh7WbRoHkjpXhFBfLwvGhcWB2I0Lpw==
-
 "@react-native-menu/menu@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@react-native-menu/menu/-/menu-1.1.0.tgz#e89c0850f7e5aa4c671c44a9c10edafadb23c35a"