From 833879f3f703b80fb5bc591a823d86f3c56cc7ee Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom@me.com>
Date: Sun, 15 Aug 2021 21:58:19 +0100
Subject: [PATCH] fix: updated animated closed position value on detached

---
 .../src/screens/advanced/FooterExample.tsx    |  4 ++--
 example/src/screens/modal/DetachedExample.tsx |  1 +
 src/components/bottomSheet/BottomSheet.tsx    |  4 ++--
 .../bottomSheetView/BottomSheetView.tsx       |  9 +++++---
 src/components/bottomSheetView/types.d.ts     | 21 +++++++++++++++++--
 5 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/example/src/screens/advanced/FooterExample.tsx b/example/src/screens/advanced/FooterExample.tsx
index bfd0aaa3f..f114644c6 100644
--- a/example/src/screens/advanced/FooterExample.tsx
+++ b/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}
diff --git a/example/src/screens/modal/DetachedExample.tsx b/example/src/screens/modal/DetachedExample.tsx
index b4de74079..f877e5502 100644
--- a/example/src/screens/modal/DetachedExample.tsx
+++ b/example/src/screens/modal/DetachedExample.tsx
@@ -86,6 +86,7 @@ const DetachedExample = () => {
       >
         <BottomSheetView
           style={styles.contentContainerStyle}
+          enableFooterMarginAdjustment={true}
           onLayout={handleContentLayout}
         >
           {data.map(renderItem)}
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index 3d53c6d30..a4a2e3551 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/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
     );
diff --git a/src/components/bottomSheetView/BottomSheetView.tsx b/src/components/bottomSheetView/BottomSheetView.tsx
index 9d4a4333f..12a2df6c7 100644
--- a/src/components/bottomSheetView/BottomSheetView.tsx
+++ b/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],
diff --git a/src/components/bottomSheetView/types.d.ts b/src/components/bottomSheetView/types.d.ts
index cb5ce894a..989a8f0f9 100644
--- a/src/components/bottomSheetView/types.d.ts
+++ b/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;
 }