From e58a09e0ca4061be6d687687ed84ec8552d58791 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 18 May 2026 12:57:06 +0100
Subject: [PATCH] Fix automatic footer compensation in `Layout.Content`
 (#10526)

---
 src/components/Layout/index.tsx | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index a09971ccbe..abda8fdf44 100644
--- a/src/components/Layout/index.tsx
+++ b/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: {
-          bottom: footerHeight.get(),
-          top: 0,
-          right: 1,
-        },
-      } satisfies AnimatedScrollViewProps
+        marginBottom: footerHeight.get(),
+      }
     })
 
     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,