fix: updated animated closed position value on detached

example/src/screens/advanced/FooterExample.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet } from 'react-native';
 import BottomSheet from '@gorhom/bottom-sheet';
 import Button from '../../components/button';
 import ContactList from '../../components/contactList';
-import customFooter from '../../components/customFooter';
+import CustomFooter from '../../components/customFooter';
 import searchHandle from '../../components/searchHandle';
 
 const FooterExample = () => {
@@ -37,7 +37,7 @@ const FooterExample = () => {
         keyboardBlurBehavior="restore"
         enablePanDownToClose={true}
         handleComponent={searchHandle}
-        footerComponent={customFooter}
+        footerComponent={CustomFooter}
       >
         <ContactList
           count={10}

example/src/screens/modal/DetachedExample.tsx

@@ -86,6 +86,7 @@ const DetachedExample = () => {
       >
         <BottomSheetView
           style={styles.contentContainerStyle}
+          enableFooterMarginAdjustment={true}
           onLayout={handleContentLayout}
         >
           {data.map(renderItem)}

src/components/bottomSheet/BottomSheet.tsx

@@ -189,12 +189,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const animatedClosedPosition = useDerivedValue(() => {
       let closedPosition = animatedContainerHeight.value;
 
-      if ($modal) {
+      if ($modal || detached) {
         closedPosition = animatedContainerHeight.value + bottomInset;
       }
 
       return closedPosition;
-    }, [$modal, bottomInset]);
+    }, [$modal, detached, bottomInset]);
     const animatedSheetHeight = useDerivedValue(
       () => animatedContainerHeight.value - animatedHighestSnapPoint.value
     );

src/components/bottomSheetView/BottomSheetView.tsx

@@ -6,8 +6,9 @@ import { useBottomSheetInternal } from '../../hooks';
 import type { BottomSheetViewProps } from './types';
 
 function BottomSheetViewComponent({
-  style,
   focusHook: useFocusHook = useEffect,
+  enableFooterMarginAdjustment = false,
+  style,
   children,
   ...rest
 }: BottomSheetViewProps) {
@@ -29,9 +30,11 @@ function BottomSheetViewComponent({
   }, [style]);
   const containerAnimatedStyle = useAnimatedStyle(
     () => ({
-      paddingBottom: animatedFooterHeight.value + containerStylePaddingBottom,
+      paddingBottom: enableFooterMarginAdjustment
+        ? animatedFooterHeight.value + containerStylePaddingBottom
+        : containerStylePaddingBottom,
     }),
-    [containerStylePaddingBottom]
+    [containerStylePaddingBottom, enableFooterMarginAdjustment]
   );
   const containerStyle = useMemo(
     () => [style, containerAnimatedStyle],

src/components/bottomSheetView/types.d.ts

@@ -1,7 +1,24 @@
-import type { EffectCallback, DependencyList } from 'react';
+import type { EffectCallback, DependencyList, ReactNode } from 'react';
 import type { ViewProps as RNViewProps } from 'react-native';
 
 export interface BottomSheetViewProps extends RNViewProps {
+  /**
+   * Adjust the scrollable bottom margin to avoid the animated footer.
+   *
+   * @type boolean
+   * @default false
+   */
+  enableFooterMarginAdjustment?: boolean;
+
+  /**
+   * This needed when bottom sheet used with multiple scrollables to allow bottom sheet
+   * detect the current scrollable ref, especially when used with `React Navigation`.
+   * You will need to provide `useFocusEffect` from `@react-navigation/native`.
+   *
+   * @type (effect: EffectCallback, deps?: DependencyList) => void
+   * @default useEffect
+   */
   focusHook?: (effect: EffectCallback, deps?: DependencyList) => void;
-  children: React.ReactNode[] | React.ReactNode;
+
+  children: ReactNode[] | ReactNode;
 }