Fix automatic footer compensation in Layout.Content (#10526)

src/components/Layout/index.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-native'
 import Animated, {
   type AnimatedScrollViewProps,
-  useAnimatedProps,
+  useAnimatedStyle,
 } from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
@@ -88,14 +88,14 @@ export const Content = memo(
     const t = useTheme()
     const {footerHeight} = useShellLayout()
     const {isWithinSplitView} = useIsWithinSplitView()
-    const animatedProps = useAnimatedProps(() => {
+
+    // note - if we ever make the footer transparent in any way,
+    // we'll need to change this to use contentInsets/scrollIndicatorInsets
+    // on iOS and contentContainerStyle padding on Android -sfn
+    const animatedStyle = useAnimatedStyle(() => {
       return {
-        scrollIndicatorInsets: {
+        marginBottom: footerHeight.get(),
-          bottom: footerHeight.get(),
+      }
-          top: 0,
-          right: 1,
-        },
-      } satisfies AnimatedScrollViewProps
     })
 
     return (
@@ -104,10 +104,9 @@ export const Content = memo(
         id="content"
         automaticallyAdjustsScrollIndicatorInsets={false}
         indicatorStyle={t.scheme === 'dark' ? 'white' : 'black'}
-        // sets the scroll inset to the height of the footer
-        animatedProps={animatedProps}
         style={[
           a.w_full,
+          animatedStyle,
           isWithinSplitView &&
             web({
               flex: 1,