From 2f10be2cfe0567516e6df06b0ca6429726a3e858 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Mon, 2 Dec 2024 16:16:39 -0800
Subject: remove masked view dependency (#6886)

---
 src/Splash.tsx | 85 +++++++++++++++-------------------------------------------
 1 file changed, 22 insertions(+), 63 deletions(-)

(limited to 'src/Splash.tsx')

diff --git a/src/Splash.tsx b/src/Splash.tsx
index a52b8837d..c31723aaa 100644
--- a/src/Splash.tsx
+++ b/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()
@@ -152,8 +148,6 @@ export function Splash(props: React.PropsWithChildren<Props>) {
               {duration: 400, easing: Easing.out(Easing.cubic)},
               async () => {
                 // set these values to check animation at specific point
-                // outroLogo.set(0.1)
-                // outroApp.set(0.1)
                 outroLogo.set(() =>
                   withTiming(
                     1,
@@ -221,66 +215,31 @@ export function Splash(props: React.PropsWithChildren<Props>) {
         </View>
       )}
 
-      {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>
+      {isReady && (
+        <>
+          <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
-                  fill={logoBg}
-                  style={[{opacity: 0}, logoAnimations]}
-                />
+          {!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
+                },
+              ]}>
+              <Animated.View style={[logoAnimations]}>
+                <Logo fill={logoBg} />
               </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>
   )
 }
-- 
cgit 1.4.1