From b779b5c07dbbe680e23307ce5c66730d896636f5 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Mon, 18 Aug 2025 12:22:53 +0200
Subject: [PATCH] fix: animate container rather then children in
 `ActionSheetAwareScrollView`

---
 .../ActionSheetAwareScrollView/index.ios.tsx  | 28 +++++++++------
 ....tsx => useActionSheetKeyboardSpacing.tsx} | 36 +++++--------------
 2 files changed, 26 insertions(+), 38 deletions(-)
 rename src/components/ActionSheetAwareScrollView/{ActionSheetKeyboardSpace.tsx => useActionSheetKeyboardSpacing.tsx} (90%)

diff --git a/src/components/ActionSheetAwareScrollView/index.ios.tsx b/src/components/ActionSheetAwareScrollView/index.ios.tsx
index 9c465b966daf..ce223dbdd028 100644
--- a/src/components/ActionSheetAwareScrollView/index.ios.tsx
+++ b/src/components/ActionSheetAwareScrollView/index.ios.tsx
@@ -2,13 +2,12 @@ import type {PropsWithChildren} from 'react';
 import React, {forwardRef, useCallback} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type {ScrollView, ScrollViewProps} from 'react-native';
-import Reanimated, {useAnimatedRef, useScrollViewOffset} from 'react-native-reanimated';
+import Reanimated, {useAnimatedRef, useAnimatedStyle} from 'react-native-reanimated';
 import {Actions, ActionSheetAwareScrollViewContext, ActionSheetAwareScrollViewProvider} from './ActionSheetAwareScrollViewContext';
-import ActionSheetKeyboardSpace from './ActionSheetKeyboardSpace';
+import useActionSheetKeyboardSpacing from './useActionSheetKeyboardSpacing';
 
-const ActionSheetAwareScrollView = forwardRef<ScrollView, PropsWithChildren<ScrollViewProps>>((props, ref) => {
+const ActionSheetAwareScrollView = forwardRef<ScrollView, PropsWithChildren<ScrollViewProps>>(({children, ...props}, ref) => {
     const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
-    const position = useScrollViewOffset(scrollViewAnimatedRef);
 
     const onRef = useCallback(
         (assignedRef: Reanimated.ScrollView) => {
@@ -24,14 +23,21 @@ const ActionSheetAwareScrollView = forwardRef<ScrollView, PropsWithChildren<Scro
         [ref, scrollViewAnimatedRef],
     );
 
+    const spacing = useActionSheetKeyboardSpacing(scrollViewAnimatedRef);
+    const animatedStyle = useAnimatedStyle(() => ({
+        paddingBottom: spacing.get(),
+    }));
+
     return (
-        <Reanimated.ScrollView
-            ref={onRef}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-        >
-            <ActionSheetKeyboardSpace position={position}>{props.children}</ActionSheetKeyboardSpace>
-        </Reanimated.ScrollView>
+        <Reanimated.View style={animatedStyle}>
+            <Reanimated.ScrollView
+                ref={onRef}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+            >
+                {children}
+            </Reanimated.ScrollView>
+        </Reanimated.View>
     );
 });
 
diff --git a/src/components/ActionSheetAwareScrollView/ActionSheetKeyboardSpace.tsx b/src/components/ActionSheetAwareScrollView/useActionSheetKeyboardSpacing.tsx
similarity index 90%
rename from src/components/ActionSheetAwareScrollView/ActionSheetKeyboardSpace.tsx
rename to src/components/ActionSheetAwareScrollView/useActionSheetKeyboardSpacing.tsx
index cf96a0823b0f..fd8c2074cc99 100644
--- a/src/components/ActionSheetAwareScrollView/ActionSheetKeyboardSpace.tsx
+++ b/src/components/ActionSheetAwareScrollView/useActionSheetKeyboardSpacing.tsx
@@ -1,10 +1,9 @@
-import React, {useContext, useEffect} from 'react';
-import type {ViewProps} from 'react-native';
+import {useContext, useEffect} from 'react';
 import {useKeyboardHandler} from 'react-native-keyboard-controller';
-import Reanimated, {useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withSequence, withSpring, withTiming} from 'react-native-reanimated';
-import type {SharedValue} from 'react-native-reanimated';
+import type Reanimated from 'react-native-reanimated';
+import {useAnimatedReaction, useDerivedValue, useScrollViewOffset, useSharedValue, withSequence, withSpring, withTiming} from 'react-native-reanimated';
+import type {AnimatedRef} from 'react-native-reanimated';
 import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
-import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import {Actions, ActionSheetAwareScrollViewContext, States} from './ActionSheetAwareScrollViewContext';
 
@@ -60,18 +59,13 @@ const useAnimatedKeyboard = () => {
     return {state, height, heightWhenOpened};
 };
 
-type ActionSheetKeyboardSpaceProps = ViewProps & {
-    /** scroll offset of the parent ScrollView */
-    position?: SharedValue<number>;
-};
+function useActionSheetKeyboardSpacing(scrollViewAnimatedRef: AnimatedRef<Reanimated.ScrollView>) {
+    const position = useScrollViewOffset(scrollViewAnimatedRef);
 
-function ActionSheetKeyboardSpace(props: ActionSheetKeyboardSpaceProps) {
-    const styles = useThemeStyles();
     const {
         unmodifiedPaddings: {top: paddingTop = 0, bottom: paddingBottom = 0},
     } = useSafeAreaPaddings();
     const keyboard = useAnimatedKeyboard();
-    const {position} = props;
 
     // Similar to using `global` in worklet but it's just a local object
     const syncLocalWorkletState = useSharedValue(KeyboardState.UNKNOWN);
@@ -102,7 +96,7 @@ function ActionSheetKeyboardSpace(props: ActionSheetKeyboardSpaceProps) {
         [],
     );
 
-    const translateY = useDerivedValue(() => {
+    const spacing = useDerivedValue(() => {
         const {current, previous} = currentActionSheetState.get();
 
         // We don't need to run any additional logic. it will always return 0 for idle state
@@ -249,19 +243,7 @@ function ActionSheetKeyboardSpace(props: ActionSheetKeyboardSpaceProps) {
         }
     }, []);
 
-    const animatedStyle = useAnimatedStyle(() => ({
-        paddingTop: translateY.get(),
-    }));
-
-    return (
-        <Reanimated.View
-            style={[styles.flex1, animatedStyle]}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-        />
-    );
+    return spacing;
 }
 
-ActionSheetKeyboardSpace.displayName = 'ActionSheetKeyboardSpace';
-
-export default ActionSheetKeyboardSpace;
+export default useActionSheetKeyboardSpacing;