Don't use mask for android at all (#2445)

* Don't use mask for android at all

* Remove old Android check

1 files changed, 33 insertions, 7 deletions

diff --git a/src/Splash.tsx b/src/Splash.tsx
index 4b480b7a4..d3b21dd63 100644
--- a/src/Splash.tsx
+++ b/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,
@@ -15,6 +14,8 @@ 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'
 
+import {isAndroid} from '#/platform/detection'
+
 // @ts-ignore
 import splashImagePointer from '../assets/splash.png'
 const splashImageUri = RNImage.resolveAssetSource(splashImagePointer).uri
@@ -54,7 +55,7 @@ export function Splash(props: React.PropsWithChildren<Props>) {
   const [isLayoutReady, setIsLayoutReady] = React.useState(false)
   const isReady = props.isReady && isImageLoaded && isLayoutReady
 
-  const logoAnimations = useAnimatedStyle(() => {
+  const logoAnimation = useAnimatedStyle(() => {
     return {
       transform: [
         {
@@ -64,7 +65,7 @@ export function Splash(props: React.PropsWithChildren<Props>) {
           scale: interpolate(
             outroLogo.value,
             [0, 0.08, 1],
-            [1, 0.8, 400],
+            [1, 0.8, 500],
             'clamp',
           ),
         },
@@ -72,6 +73,16 @@ export function Splash(props: React.PropsWithChildren<Props>) {
       opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
     }
   })
+  const logoWrapperAnimation = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(
+        outroAppOpacity.value,
+        [0, 0.1, 0.2, 1],
+        [1, 1, 0, 0],
+        'clamp',
+      ),
+    }
+  })
 
   const appAnimation = useAnimatedStyle(() => {
     return {
@@ -82,7 +93,7 @@ export function Splash(props: React.PropsWithChildren<Props>) {
       ],
       opacity: interpolate(
         outroAppOpacity.value,
-        [0, 0.08, 0.15, 1],
+        [0, 0.1, 0.2, 1],
         [0, 0, 1, 1],
         'clamp',
       ),
@@ -137,16 +148,31 @@ export function Splash(props: React.PropsWithChildren<Props>) {
         />
       )}
 
-      {platformApiLevel && platformApiLevel <= 25 ? (
+      {isAndroid ? (
         // Use a simple fade on older versions of android (work around a bug)
         <>
           <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={[{opacity: 0}, logoAnimation]} />
+            </Animated.View>
+          )}
         </>
       ) : (
         <MaskedView
-          androidRenderingMode="software"
           style={[StyleSheet.absoluteFillObject]}
           maskElement={
             <Animated.View
@@ -160,7 +186,7 @@ export function Splash(props: React.PropsWithChildren<Props>) {
                   transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
                 },
               ]}>
-              <AnimatedLogo style={[logoAnimations]} />
+              <AnimatedLogo style={[logoAnimation]} />
             </Animated.View>
           }>
           {!isAnimationComplete && (