Remove masking from splash screen

package.json

@@ -58,7 +58,6 @@
     "@react-native-clipboard/clipboard": "^1.10.0",
     "@react-native-community/blur": "^4.3.0",
     "@react-native-community/datetimepicker": "7.6.1",
-    "@react-native-masked-view/masked-view": "0.3.0",
     "@react-native-menu/menu": "^0.8.0",
     "@react-native-picker/picker": "2.5.1",
     "@react-navigation/bottom-tabs": "^6.5.7",

src/Splash.tsx

@@ -2,7 +2,6 @@ import React, {useCallback, useEffect} from 'react'
 import {View, StyleSheet, Image as RNImage} from 'react-native'
 import * as SplashScreen from 'expo-splash-screen'
 import {Image} from 'expo-image'
-import {platformApiLevel} from 'expo-device'
 import Animated, {
   interpolate,
   runOnJS,
@@ -11,7 +10,6 @@ import Animated, {
   withTiming,
   Easing,
 } from 'react-native-reanimated'
-import MaskedView from '@react-native-masked-view/masked-view'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import Svg, {Path, SvgProps} from 'react-native-svg'
 
@@ -53,7 +51,7 @@ export function Splash(props: React.PropsWithChildren<Props>) {
   const [isImageLoaded, setIsImageLoaded] = React.useState(false)
   const isReady = props.isReady && isImageLoaded
 
-  const logoAnimations = useAnimatedStyle(() => {
+  const logoAnimation = useAnimatedStyle(() => {
     return {
       transform: [
         {
@@ -72,6 +70,17 @@ export function Splash(props: React.PropsWithChildren<Props>) {
     }
   })
 
+  const logoWrapperAnimation = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(
+        outroAppOpacity.value,
+        [0, 0.15, 0.2, 1],
+        [1, 1, 0, 0],
+        'clamp',
+      ),
+    }
+  })
+
   const appAnimation = useAnimatedStyle(() => {
     return {
       transform: [
@@ -137,51 +146,24 @@ export function Splash(props: React.PropsWithChildren<Props>) {
         />
       )}
 
-      {platformApiLevel && platformApiLevel <= 25 ? (
-        // Use a simple fade on older versions of android (work around a bug)
-        <>
-          {!isAnimationComplete && (
-            <View
-              style={[
-                StyleSheet.absoluteFillObject,
-                {backgroundColor: 'white'},
-              ]}
-            />
-          )}
-          <Animated.View style={[{flex: 1}, appAnimation]}>
-            {props.children}
-          </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 style={[logoAnimations]} />
-            </Animated.View>
-          }>
-          {!isAnimationComplete && (
-            <View
-              style={[
-                StyleSheet.absoluteFillObject,
-                {backgroundColor: 'white'},
-              ]}
-            />
-          )}
-          <Animated.View style={[{flex: 1}, appAnimation]}>
-            {props.children}
-          </Animated.View>
-        </MaskedView>
+      <Animated.View style={[{flex: 1}, appAnimation]}>
+        {props.children}
+      </Animated.View>
+
+      {!isAnimationComplete && (
+        <Animated.View
+          style={[
+            StyleSheet.absoluteFillObject,
+            logoWrapperAnimation,
+            {
+              flex: 1,
+              justifyContent: 'center',
+              alignItems: 'center',
+              transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
+            },
+          ]}>
+          <AnimatedLogo style={[logoAnimation]} />
+        </Animated.View>
       )}
     </View>
   )

yarn.lock

@@ -4729,11 +4729,6 @@
   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.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@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@react-native-menu/menu/-/menu-0.8.0.tgz#dbf227c2081e5ffd3d2073ee68ecc84cf8639727"