React Native New Arch (#10980)

src/Splash.tsx

@@ -72,21 +72,26 @@ export function Splash(props: React.PropsWithChildren<Props>) {
   const isDarkMode = colorScheme === 'dark'
 
   const logoAnimation = useAnimatedStyle(() => {
+    const introScale = interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp')
+    const outroScale =
+      reduceMotion === true
+        ? 1
+        : interpolate(outroLogo.get(), [0, 0.08, 1], [1, 0.8, 500], 'clamp')
+
+    const introOpacity = interpolate(intro.get(), [0, 1], [0, 1], 'clamp')
+    const outroOpacity = interpolate(
+      outroAppOpacity.get(),
+      [0, 0.1, 0.2, 1],
+      [1, 1, 0, 0],
+      'clamp',
+    )
+
     return {
+      opacity: introOpacity * outroOpacity,
       transform: [
-        {
-          scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'),
-        },
-        {
-          scale: interpolate(
-            outroLogo.get(),
-            [0, 0.08, 1],
-            [1, 0.8, 500],
-            'clamp',
-          ),
-        },
+        {translateY: -(insets.top / 2)},
+        {scale: 0.1 * outroScale * introScale},
       ],
-      opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'),
     }
   })
   const bottomLogoAnimation = useAnimatedStyle(() => {
@@ -94,27 +99,6 @@ export function Splash(props: React.PropsWithChildren<Props>) {
       opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'),
     }
   })
-  const reducedLogoAnimation = useAnimatedStyle(() => {
-    return {
-      transform: [
-        {
-          scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'),
-        },
-      ],
-      opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'),
-    }
-  })
-
-  const logoWrapperAnimation = useAnimatedStyle(() => {
-    return {
-      opacity: interpolate(
-        outroAppOpacity.get(),
-        [0, 0.1, 0.2, 1],
-        [1, 1, 0, 0],
-        'clamp',
-      ),
-    }
-  })
 
   const appAnimation = useAnimatedStyle(() => {
     return {
@@ -126,7 +110,7 @@ export function Splash(props: React.PropsWithChildren<Props>) {
       opacity: interpolate(
         outroAppOpacity.get(),
         [0, 0.1, 0.2, 1],
-        [0, 0, 1, 1],
+        [0.02, 0.02, 1, 1], // first two values cant be 0 for the iOS blur/glass effects to work, the values obtained by trial and error
         'clamp',
       ),
     }
@@ -180,8 +164,6 @@ export function Splash(props: React.PropsWithChildren<Props>) {
     AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion)
   }, [])
 
-  const logoAnimations =
-    reduceMotion === true ? reducedLogoAnimation : logoAnimation
   // special off-spec color for dark mode
   const logoBg = isDarkMode ? '#0F1824' : '#fff'
 
@@ -224,17 +206,14 @@ export function Splash(props: React.PropsWithChildren<Props>) {
             <Animated.View
               style={[
                 StyleSheet.absoluteFillObject,
-                logoWrapperAnimation,
+                logoAnimation,
                 {
                   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>
+              <Logo fill={logoBg} />
             </Animated.View>
           )}
         </>