[C-5378] Fade in mobile screen content on load (#10369)

Co-authored-by: amendelsohn <[email protected]>

packages/mobile/src/components/core/Screen/ScreenPrimaryContent.tsx

@@ -1,5 +1,8 @@
 import { useEffect, type ReactNode } from 'react'
 
+import { Platform } from 'react-native'
+import Animated, { FadeIn } from 'react-native-reanimated'
+
 import { useScreenContext } from './ScreenContextProvider'
 
 type ScreenPrimaryContentProps = {
@@ -23,5 +26,13 @@ export const ScreenPrimaryContent = (props: ScreenPrimaryContentProps) => {
     setIsPrimaryContentReady(true)
   }, [isScreenReady, setIsPrimaryContentReady])
 
-  return isScreenReady ? <>{children}</> : <>{skeleton ?? null}</>
+  // Note: not animating on Android because shadows are rendered natively behind the
+  // animated view and thus don't follow the animation.
+  return isScreenReady ? (
+    <Animated.View entering={Platform.OS === 'ios' ? FadeIn : undefined}>
+      {children}
+    </Animated.View>
+  ) : (
+    <>{skeleton ?? null}</>
+  )
 }

packages/mobile/src/components/core/Screen/ScreenSecondaryContent.tsx

@@ -1,5 +1,8 @@
 import type { ReactNode } from 'react'
 
+import { Platform } from 'react-native'
+import Animated, { FadeIn } from 'react-native-reanimated'
+
 import { useScreenContext } from './ScreenContextProvider'
 
 type ScreenSecondaryContentProps = {
@@ -18,5 +21,16 @@ export const ScreenSecondaryContent = (props: ScreenSecondaryContentProps) => {
   const { children, skeleton } = props
   const { isPrimaryContentReady } = useScreenContext()
 
-  return <>{isPrimaryContentReady ? children : skeleton ?? null}</>
+  // Note: not animating on Android because shadows are rendered natively behind the
+  // animated view and thus don't follow the animation.
+  return isPrimaryContentReady ? (
+    <Animated.View
+      entering={Platform.OS === 'ios' ? FadeIn : undefined}
+      style={{ flex: 1 }}
+    >
+      {children}
+    </Animated.View>
+  ) : (
+    <>{skeleton ?? null}</>
+  )
 }