From db8c802c271453309cae825b08e2ea2bf397f64c Mon Sep 17 00:00:00 2001
From: Dawid van der Hoven <dawidvdh@gmail.com>
Date: Wed, 27 Jan 2021 13:19:39 +0100
Subject: [PATCH 01/11] feat: add a bottom inset option

---
 src/components/bottomSheet/BottomSheet.tsx | 19 +++++++++++++------
 src/components/bottomSheet/types.d.ts      |  7 +++++++
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index d6c21b1c2..eb69f3d8d 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/src/components/bottomSheet/BottomSheet.tsx
@@ -26,9 +26,11 @@ import Animated, {
   sub,
   abs,
   greaterThan,
+  concat,
 } from 'react-native-reanimated';
 import { PanGestureHandler, State } from 'react-native-gesture-handler';
 import {
+  ReText,
   usePanGestureHandler,
   // ReText,
 } from 'react-native-redash';
@@ -84,6 +86,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       snapPoints: _snapPoints,
       handleHeight: _handleHeight,
       topInset = 0,
+      bottomInset = 0,
       enableContentPanningGesture = DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,
       enableHandlePanningGesture = DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
       animateOnMount = DEFAULT_ANIMATE_ON_MOUNT,
@@ -301,10 +304,14 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       () => ({
         ...styles.container,
         transform: [
-          { translateY: isLayoutCalculated ? position : containerHeight },
+          {
+            translateY: isLayoutCalculated
+              ? sub(position, bottomInset)
+              : containerHeight,
+          },
         ],
       }),
-      [containerHeight, position, isLayoutCalculated]
+      [containerHeight, position, isLayoutCalculated, bottomInset]
     );
     const contentContainerStyle = useMemo(
       () => ({
@@ -579,7 +586,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
             exec={set(_animatedIndexCallbackNode, animatedIndex)}
           />
         )}
-        {/* <Animated.View pointerEvents="none" style={styles.debug}>
+        <Animated.View pointerEvents="none" style={styles.debug}>
           <ReText
             style={styles.debugText}
             text={concat('manualSnapToPoint: ', manualSnapToPoint)}
@@ -611,11 +618,11 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
             style={styles.debugText}
             text={concat('position: ', position)}
           />
-          <ReText
+          {/* <ReText
             style={styles.debugText}
             text={concat('animatedPositionIndex: ', animatedPositionIndex)}
-          />
-        </Animated.View> */}
+          /> */}
+        </Animated.View>
       </>
     );
     //#endregion
diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
index f6bc9e35f..6ef31f70c 100644
--- a/src/components/bottomSheet/types.d.ts
+++ b/src/components/bottomSheet/types.d.ts
@@ -43,6 +43,13 @@ export type BottomSheetProps = {
    * @default 0
    */
   topInset?: number;
+  /**
+   * Bottom inset value helps to calculate percentage snap points values,
+   * usually comes from `@react-navigation/stack` hook `useHeaderHeight` or from `react-native-safe-area-context` hook `useSafeArea`.
+   * @type number
+   * @default 0
+   */
+  bottomInset?: number;
   /**
    * Enable content panning gesture interaction.
    * @type boolean

From 6f663b78f628ef5f4874a137a23f33f241fe4679 Mon Sep 17 00:00:00 2001
From: Dawid van der Hoven <dawidvdh@gmail.com>
Date: Wed, 27 Jan 2021 13:31:08 +0100
Subject: [PATCH 02/11] fix: remove debug

---
 src/components/bottomSheet/BottomSheet.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index eb69f3d8d..36e80c704 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/src/components/bottomSheet/BottomSheet.tsx
@@ -26,11 +26,9 @@ import Animated, {
   sub,
   abs,
   greaterThan,
-  concat,
 } from 'react-native-reanimated';
 import { PanGestureHandler, State } from 'react-native-gesture-handler';
 import {
-  ReText,
   usePanGestureHandler,
   // ReText,
 } from 'react-native-redash';
@@ -586,7 +584,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
             exec={set(_animatedIndexCallbackNode, animatedIndex)}
           />
         )}
-        <Animated.View pointerEvents="none" style={styles.debug}>
+        {/* <Animated.View pointerEvents="none" style={styles.debug}>
           <ReText
             style={styles.debugText}
             text={concat('manualSnapToPoint: ', manualSnapToPoint)}
@@ -618,11 +616,11 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
             style={styles.debugText}
             text={concat('position: ', position)}
           />
-          {/* <ReText
+          <ReText
             style={styles.debugText}
             text={concat('animatedPositionIndex: ', animatedPositionIndex)}
-          /> */}
-        </Animated.View>
+          />
+        </Animated.View> */}
       </>
     );
     //#endregion

From 8144efbfc2ddb6cd72dc65d26156714578927915 Mon Sep 17 00:00:00 2001
From: Dawid van der Hoven <dawidvdh@gmail.com>
Date: Thu, 4 Feb 2021 14:05:05 +0100
Subject: [PATCH 03/11] feat: add footer example and fix modal behaviour

---
 example/src/App.tsx                           |   9 +
 example/src/screens/Root.tsx                  |   4 +
 .../modal/StackWithBottomInsetExample.tsx     | 179 ++++++++++++++++++
 example/src/types.ts                          |   1 +
 .../bottomSheetModal/BottomSheetModal.tsx     |   4 +-
 5 files changed, 196 insertions(+), 1 deletion(-)
 create mode 100644 example/src/screens/modal/StackWithBottomInsetExample.tsx

diff --git a/example/src/App.tsx b/example/src/App.tsx
index ae75d818f..edd2521ae 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -78,6 +78,15 @@ const App = () => {
             }}
             getComponent={() => require('./screens/modal/StackExample').default}
           />
+          <Stack.Screen
+            name="Modal/StackWithBottomInsetExample"
+            options={{
+              title: 'Stack Modals With Footer Example',
+            }}
+            getComponent={() =>
+              require('./screens/modal/StackWithBottomInsetExample').default
+            }
+          />
           <Stack.Screen
             name="Modal/DynamicSnapPointExample"
             options={{
diff --git a/example/src/screens/Root.tsx b/example/src/screens/Root.tsx
index 67290edaf..c5201f666 100644
--- a/example/src/screens/Root.tsx
+++ b/example/src/screens/Root.tsx
@@ -41,6 +41,10 @@ const data = [
         name: 'Stack Modals',
         slug: 'Modal/StackExample',
       },
+      {
+        name: 'Stack Modals With Footer',
+        slug: 'Modal/StackWithBottomInsetExample',
+      },
       {
         name: 'Dynamic Snap Point',
         slug: 'Modal/DynamicSnapPointExample',
diff --git a/example/src/screens/modal/StackWithBottomInsetExample.tsx b/example/src/screens/modal/StackWithBottomInsetExample.tsx
new file mode 100644
index 000000000..26c008a9d
--- /dev/null
+++ b/example/src/screens/modal/StackWithBottomInsetExample.tsx
@@ -0,0 +1,179 @@
+import React, { useCallback, useMemo, useRef } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { BottomSheetModal, useBottomSheetModal } from '@gorhom/bottom-sheet';
+import Button from '../../components/button';
+import ContactListContainer from '../../components/contactListContainer';
+import withModalProvider from '../withModalProvider';
+
+const footerHeight = 100;
+
+const StackExample = () => {
+  // hooks
+  const { dismiss, dismissAll } = useBottomSheetModal();
+
+  // refs
+  const bottomSheetModalARef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalBRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalCRef = useRef<BottomSheetModal>(null);
+
+  // variables
+  const snapPoints = useMemo(() => ['25%', '50%'], []);
+
+  // callbacks
+  const handlePresentAPress = useCallback(() => {
+    if (bottomSheetModalARef.current) {
+      bottomSheetModalARef.current.present();
+    }
+  }, []);
+  const handleDismissAPress = useCallback(() => {
+    if (bottomSheetModalARef.current) {
+      bottomSheetModalARef.current.dismiss();
+    }
+  }, []);
+  const handlePresentBPress = useCallback(() => {
+    if (bottomSheetModalBRef.current) {
+      bottomSheetModalBRef.current.present();
+    }
+  }, []);
+  const handleDismissBPress = useCallback(() => {
+    if (bottomSheetModalBRef.current) {
+      bottomSheetModalBRef.current.dismiss();
+    }
+  }, []);
+  const handlePresentCPress = useCallback(() => {
+    if (bottomSheetModalCRef.current) {
+      bottomSheetModalCRef.current.present();
+    }
+  }, []);
+  const handleDismissCPress = useCallback(() => {
+    if (bottomSheetModalCRef.current) {
+      bottomSheetModalCRef.current.dismiss();
+    }
+  }, []);
+  const handleDismissAllPress = useCallback(() => {
+    dismissAll();
+  }, [dismissAll]);
+
+  const handleDismissByHookPress = useCallback(() => {
+    dismiss('A');
+  }, [dismiss]);
+
+  // renders
+
+  const renderBottomSheetContent = useCallback(
+    (title, onPress) => (
+      <ContactListContainer
+        title={title}
+        type="FlatList"
+        onItemPress={onPress}
+      />
+    ),
+    []
+  );
+  return (
+    <>
+      <View style={styles.container}>
+        <Button
+          label="Present Modal A"
+          style={styles.buttonContainer}
+          onPress={handlePresentAPress}
+        />
+        <Button
+          label="Dismiss Modal A"
+          style={styles.buttonContainer}
+          onPress={handleDismissAPress}
+        />
+        <Button
+          label="Present Modal B"
+          style={styles.buttonContainer}
+          onPress={handlePresentBPress}
+        />
+        <Button
+          label="Dismiss Modal B"
+          style={styles.buttonContainer}
+          onPress={handleDismissBPress}
+        />
+        <Button
+          label="Present Modal C"
+          style={styles.buttonContainer}
+          onPress={handlePresentCPress}
+        />
+        <Button
+          label="Dismiss Modal C"
+          style={styles.buttonContainer}
+          onPress={handleDismissCPress}
+        />
+
+        <Button
+          label="Dismiss A By Hook"
+          style={styles.buttonContainer}
+          onPress={handleDismissByHookPress}
+        />
+
+        <BottomSheetModal
+          name="A"
+          ref={bottomSheetModalARef}
+          snapPoints={snapPoints}
+          children={renderBottomSheetContent('Modal A', handlePresentBPress)}
+          bottomInset={footerHeight}
+        />
+
+        <BottomSheetModal
+          name="B"
+          ref={bottomSheetModalBRef}
+          snapPoints={snapPoints}
+          children={renderBottomSheetContent('Modal B', handlePresentCPress)}
+          bottomInset={footerHeight}
+        />
+
+        <BottomSheetModal
+          name="C"
+          ref={bottomSheetModalCRef}
+          index={1}
+          snapPoints={snapPoints}
+          dismissOnPanDown={false}
+          children={renderBottomSheetContent('Modal C', handleDismissCPress)}
+          bottomInset={footerHeight}
+        />
+      </View>
+      <View style={styles.footer}>
+        <Button
+          label="Dismiss All Modal"
+          style={styles.buttonContainer}
+          onPress={handleDismissAllPress}
+        />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+    backgroundColor: '#dfdfdf',
+  },
+  buttonContainer: {
+    marginBottom: 6,
+  },
+  footer: {
+    height: footerHeight,
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    zIndex: 10,
+    backgroundColor: 'white',
+    padding: 24,
+
+    shadowColor: 'black',
+    shadowOffset: {
+      width: 0,
+      height: -20,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 10,
+    elevation: 16,
+  },
+});
+
+export default withModalProvider(StackExample);
diff --git a/example/src/types.ts b/example/src/types.ts
index 7c6a19ae2..835b8b813 100644
--- a/example/src/types.ts
+++ b/example/src/types.ts
@@ -10,6 +10,7 @@ export type AppStackParamsList = {
   ['Modal/SimpleExample']: undefined;
   ['Modal/BackdropExample']: undefined;
   ['Modal/StackExample']: undefined;
+  ['Modal/StackWithBottomInsetExample']: undefined;
   ['Modal/DynamicSnapPointExample']: undefined;
   // Advanced
   ['Advanced/NavigatorExample']: undefined;
diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx
index 5baa69ae2..e965c8e66 100644
--- a/src/components/bottomSheetModal/BottomSheetModal.tsx
+++ b/src/components/bottomSheetModal/BottomSheetModal.tsx
@@ -32,6 +32,7 @@ const BottomSheetModalComponent = forwardRef<
     index: _providedIndex = 0,
     snapPoints: _providedSnapPoints,
     onChange: _providedOnChange,
+    bottomInset: bottomInset = 0,
 
     // components
     children,
@@ -197,7 +198,8 @@ const BottomSheetModalComponent = forwardRef<
         index={index}
         snapPoints={snapPoints}
         animateOnMount={true}
-        containerHeight={containerHeight}
+        bottomInset={bottomInset}
+        containerHeight={containerHeight + bottomInset}
         onChange={handleOnChange}
         children={children}
       />

From 36dc13f5b64047134850dd0a41834c4c80194902 Mon Sep 17 00:00:00 2001
From: Dawid van der Hoven <dawidvdh@gmail.com>
Date: Thu, 4 Feb 2021 14:21:28 +0100
Subject: [PATCH 04/11] fix: remove subtraction

---
 src/components/bottomSheetModal/BottomSheetModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx
index e965c8e66..4e49dd6fb 100644
--- a/src/components/bottomSheetModal/BottomSheetModal.tsx
+++ b/src/components/bottomSheetModal/BottomSheetModal.tsx
@@ -199,7 +199,7 @@ const BottomSheetModalComponent = forwardRef<
         snapPoints={snapPoints}
         animateOnMount={true}
         bottomInset={bottomInset}
-        containerHeight={containerHeight + bottomInset}
+        containerHeight={containerHeight}
         onChange={handleOnChange}
         children={children}
       />

From d7142752380b4a72db29d1f816313f858f699da2 Mon Sep 17 00:00:00 2001
From: Dawid van der Hoven <dawidvdh@gmail.com>
Date: Thu, 4 Feb 2021 22:40:29 +0100
Subject: [PATCH 05/11] fix: modal handle shows when stacked and minimized

---
 src/components/bottomSheet/BottomSheet.tsx           | 4 ++--
 src/components/bottomSheetModal/BottomSheetModal.tsx | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index efcab236b..d80c789b0 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/src/components/bottomSheet/BottomSheet.tsx
@@ -347,8 +347,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       [snapPoints, manualSnapToPoint]
     );
     const handleClose = useCallback(() => {
-      manualSnapToPoint.setValue(safeContainerHeight);
-    }, [manualSnapToPoint, safeContainerHeight]);
+      manualSnapToPoint.setValue(safeContainerHeight + safeHandleHeight);
+    }, [manualSnapToPoint, safeContainerHeight, safeHandleHeight]);
     const handleExpand = useCallback(() => {
       manualSnapToPoint.setValue(snapPoints[snapPoints.length - 1]);
     }, [snapPoints, manualSnapToPoint]);
diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx
index 4e49dd6fb..5baa69ae2 100644
--- a/src/components/bottomSheetModal/BottomSheetModal.tsx
+++ b/src/components/bottomSheetModal/BottomSheetModal.tsx
@@ -32,7 +32,6 @@ const BottomSheetModalComponent = forwardRef<
     index: _providedIndex = 0,
     snapPoints: _providedSnapPoints,
     onChange: _providedOnChange,
-    bottomInset: bottomInset = 0,
 
     // components
     children,
@@ -198,7 +197,6 @@ const BottomSheetModalComponent = forwardRef<
         index={index}
         snapPoints={snapPoints}
         animateOnMount={true}
-        bottomInset={bottomInset}
         containerHeight={containerHeight}
         onChange={handleOnChange}
         children={children}

From d04122418dd9f2aa4ff89720ada0555d4038b57c Mon Sep 17 00:00:00 2001
From: Dawid van der Hoven <dawidvdh@gmail.com>
Date: Tue, 9 Feb 2021 10:16:13 +0100
Subject: [PATCH 06/11] fix: set top and bottom of the root container as not to
 break other modals

---
 src/components/bottomSheet/BottomSheet.tsx    |  6 ++++--
 .../BottomSheetContainer.tsx                  | 20 ++++++++++++++++---
 .../bottomSheetContainer/types.d.ts           |  2 ++
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index 0c4e27ff0..b6bfb9970 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/src/components/bottomSheet/BottomSheet.tsx
@@ -369,8 +369,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         return;
       }
       isClosing.current = true;
-      manualSnapToPoint.setValue(safeContainerHeight + safeHandleHeight);
-    }, [manualSnapToPoint, safeContainerHeight, safeHandleHeight]);
+      manualSnapToPoint.setValue(safeContainerHeight);
+    }, [manualSnapToPoint, safeContainerHeight]);
     const handleExpand = useCallback(() => {
       if (isClosing.current) {
         return;
@@ -607,6 +607,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           key="BottomSheetContainer"
           shouldMeasureHeight={shouldMeasureContainerHeight}
           onMeasureHeight={handleOnContainerMeasureHeight}
+          topInset={topInset}
+          bottomInset={bottomInset}
         >
           <BottomSheetContentWrapper
             key="BottomSheetContentWrapper"
diff --git a/src/components/bottomSheetContainer/BottomSheetContainer.tsx b/src/components/bottomSheetContainer/BottomSheetContainer.tsx
index 2d9fb8885..1047ee989 100644
--- a/src/components/bottomSheetContainer/BottomSheetContainer.tsx
+++ b/src/components/bottomSheetContainer/BottomSheetContainer.tsx
@@ -1,5 +1,5 @@
-import React, { memo, useCallback } from 'react';
-import { View } from 'react-native';
+import React, { memo, useCallback, useMemo } from 'react';
+import { View, ViewStyle } from 'react-native';
 import isEqual from 'lodash.isequal';
 import type { BottomSheetContainerProps } from './types';
 import { styles } from './styles';
@@ -8,6 +8,8 @@ const BottomSheetContainerComponent = ({
   shouldMeasureHeight,
   onMeasureHeight,
   children,
+  topInset = 0,
+  bottomInset = 0,
 }: BottomSheetContainerProps) => {
   //#region callbacks
   const handleOnLayout = useCallback(
@@ -22,12 +24,24 @@ const BottomSheetContainerComponent = ({
   );
   //#endregion
 
+  const containerStyle: ViewStyle[] = useMemo(
+    () => [
+      styles.container,
+      {
+        top: topInset,
+        bottom: bottomInset,
+        overflow: 'hidden',
+      },
+    ],
+    [bottomInset, topInset]
+  );
+
   //#region render
   // console.log('BottomSheetContainer', 'render', shouldMeasureHeight);
   return (
     <View
       pointerEvents="box-none"
-      style={styles.container}
+      style={containerStyle}
       onLayout={shouldMeasureHeight ? handleOnLayout : undefined}
       children={children}
     />
diff --git a/src/components/bottomSheetContainer/types.d.ts b/src/components/bottomSheetContainer/types.d.ts
index d446460a8..c48e5aeba 100644
--- a/src/components/bottomSheetContainer/types.d.ts
+++ b/src/components/bottomSheetContainer/types.d.ts
@@ -4,4 +4,6 @@ export interface BottomSheetContainerProps {
   shouldMeasureHeight: boolean;
   onMeasureHeight: (height: number) => void;
   children: ReactNode;
+  topInset?: number;
+  bottomInset?: nummber;
 }

From 0d165564a4402f216d5cbe2cec37b3050f7c327a Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom@me.com>
Date: Tue, 9 Feb 2021 22:45:32 +0100
Subject: [PATCH 07/11] chore: updated normalize snap points calculating

---
 src/components/bottomSheet/BottomSheet.tsx | 14 +++++++-------
 src/hooks/useNormalizedSnapPoints.ts       |  8 ++++----
 src/utilities/normalizeSnapPoints.ts       |  5 +++--
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index 0a4efbe4a..5c2e4a345 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/src/components/bottomSheet/BottomSheet.tsx
@@ -184,7 +184,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
 
     const snapPoints = useNormalizedSnapPoints(
       _providedSnapPoints,
-      topInset,
+      topInset + bottomInset,
       safeContainerHeight,
       safeHandleHeight
     );
@@ -602,13 +602,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#endregion
 
     //#region render
-    // console.log(
-    //   'BottomSheet',
-    //   'render',
+    // console.log('BottomSheet', 'render', {
     //   snapPoints,
-    //   sheetHeight,
-    //   safeHandleHeight
-    // );
+    //   shouldMeasureContainerHeight,
+    //   safeContainerHeight,
+    //   topInset,
+    //   bottomInset,
+    // });
     return (
       <BottomSheetProvider value={externalContextVariables}>
         <BottomSheetBackdropContainer
diff --git a/src/hooks/useNormalizedSnapPoints.ts b/src/hooks/useNormalizedSnapPoints.ts
index ee9347ca1..3f2746328 100644
--- a/src/hooks/useNormalizedSnapPoints.ts
+++ b/src/hooks/useNormalizedSnapPoints.ts
@@ -3,7 +3,7 @@ import { normalizeSnapPoints } from '../utilities';
 
 export const useNormalizedSnapPoints = (
   snapPoints: Array<number | string>,
-  topInset: number,
+  verticalInset: number,
   containerHeight: number = 0,
   handleHeight: number = 0
 ) =>
@@ -11,7 +11,7 @@ export const useNormalizedSnapPoints = (
     const normalizedSnapPoints = normalizeSnapPoints(
       snapPoints,
       containerHeight,
-      topInset
+      verticalInset
     );
     return normalizedSnapPoints.map(normalizedSnapPoint => {
       /**
@@ -23,7 +23,7 @@ export const useNormalizedSnapPoints = (
       }
       return Math.max(
         containerHeight - normalizedSnapPoint - handleHeight,
-        topInset
+        verticalInset
       );
     });
-  }, [snapPoints, topInset, containerHeight, handleHeight]);
+  }, [snapPoints, verticalInset, containerHeight, handleHeight]);
diff --git a/src/utilities/normalizeSnapPoints.ts b/src/utilities/normalizeSnapPoints.ts
index 383ae9698..081077c9e 100644
--- a/src/utilities/normalizeSnapPoints.ts
+++ b/src/utilities/normalizeSnapPoints.ts
@@ -6,11 +6,12 @@ import { validateSnapPoint } from './validateSnapPoint';
 export const normalizeSnapPoints = (
   snapPoints: Array<number | string>,
   containerHeight: number,
-  topInset: number
+  verticalInset: number
 ) =>
   snapPoints.map(snapPoint => {
     validateSnapPoint(snapPoint);
     return typeof snapPoint === 'number'
       ? snapPoint
-      : (Number(snapPoint.split('%')[0]) * (containerHeight - topInset)) / 100;
+      : (Number(snapPoint.split('%')[0]) * (containerHeight - verticalInset)) /
+          100;
   });

From 1e0f4db44906f9585ee4045cc87f55c535d00a66 Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom@me.com>
Date: Tue, 9 Feb 2021 22:46:54 +0100
Subject: [PATCH 08/11] refactor: container styling

---
 src/components/bottomSheetContainer/BottomSheetContainer.tsx | 1 -
 src/components/bottomSheetContainer/styles.ts                | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/bottomSheetContainer/BottomSheetContainer.tsx b/src/components/bottomSheetContainer/BottomSheetContainer.tsx
index 1047ee989..d0db5a9ed 100644
--- a/src/components/bottomSheetContainer/BottomSheetContainer.tsx
+++ b/src/components/bottomSheetContainer/BottomSheetContainer.tsx
@@ -30,7 +30,6 @@ const BottomSheetContainerComponent = ({
       {
         top: topInset,
         bottom: bottomInset,
-        overflow: 'hidden',
       },
     ],
     [bottomInset, topInset]
diff --git a/src/components/bottomSheetContainer/styles.ts b/src/components/bottomSheetContainer/styles.ts
index 04f247de5..ec6d0a5ec 100644
--- a/src/components/bottomSheetContainer/styles.ts
+++ b/src/components/bottomSheetContainer/styles.ts
@@ -3,5 +3,6 @@ import { StyleSheet } from 'react-native';
 export const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
+    overflow: 'hidden',
   },
 });

From e8ca06496127cd78f8e7fc8b7acadfa670ce4cb8 Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom@me.com>
Date: Tue, 9 Feb 2021 22:47:41 +0100
Subject: [PATCH 09/11] fix: dismissing modals when unmounting

---
 .../bottomSheetModal/BottomSheetModal.tsx       | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx
index 6ea287934..acc77e69c 100644
--- a/src/components/bottomSheetModal/BottomSheetModal.tsx
+++ b/src/components/bottomSheetModal/BottomSheetModal.tsx
@@ -66,7 +66,6 @@ const BottomSheetModalComponent = forwardRef<
     () => (dismissOnPanDown ? _providedIndex + 1 : _providedIndex),
     [_providedIndex, dismissOnPanDown]
   );
-  nextIndexRef.current = index;
   const snapPoints = useMemo(
     () =>
       dismissOnPanDown ? [0, ..._providedSnapPoints] : _providedSnapPoints,
@@ -79,6 +78,8 @@ const BottomSheetModalComponent = forwardRef<
     // reset
     isMinimized.current = false;
     isForcedDismissed.current = false;
+    currentIndexRef.current = -1;
+    nextIndexRef.current = -1;
 
     // unmount the sheet and the portal
     unmountSheet(key);
@@ -115,10 +116,11 @@ const BottomSheetModalComponent = forwardRef<
   //#region public methods
   const handlePresent = useCallback(() => {
     requestAnimationFrame(() => {
+      nextIndexRef.current = index;
       setMount(true);
       mountSheet(key, ref);
     });
-  }, [key, mountSheet, ref]);
+  }, [key, mountSheet, ref, index]);
   const handleDismiss = useCallback(
     (force: boolean = false) => {
       if (force) {
@@ -131,6 +133,7 @@ const BottomSheetModalComponent = forwardRef<
       } else {
         willUnmountSheet(key);
       }
+      nextIndexRef.current = -1;
       bottomSheetRef.current?.close();
     },
     [key, doDismiss, willUnmountSheet]
@@ -139,7 +142,7 @@ const BottomSheetModalComponent = forwardRef<
     if (isMinimized.current) {
       return;
     }
-    nextIndexRef.current = 0;
+    nextIndexRef.current = -1;
     bottomSheetRef.current?.close();
   }, []);
   const handleCollapse = useCallback(() => {
@@ -147,7 +150,7 @@ const BottomSheetModalComponent = forwardRef<
       return;
     }
     nextIndexRef.current = dismissOnPanDown ? 1 : 0;
-    bottomSheetRef.current?.snapTo(dismissOnPanDown ? 1 : 0);
+    bottomSheetRef.current?.snapTo(nextIndexRef.current);
   }, [dismissOnPanDown]);
   const handleExpand = useCallback(() => {
     if (isMinimized.current) {
@@ -162,7 +165,7 @@ const BottomSheetModalComponent = forwardRef<
         return;
       }
       nextIndexRef.current = _index + (dismissOnPanDown ? 1 : 0);
-      bottomSheetRef.current?.snapTo(_index + (dismissOnPanDown ? 1 : 0));
+      bottomSheetRef.current?.snapTo(nextIndexRef.current);
     },
     [dismissOnPanDown]
   );
@@ -182,7 +185,9 @@ const BottomSheetModalComponent = forwardRef<
     }
   }, []);
   const handleOnUnmount = useCallback(() => {
-    handleDismiss(true);
+    if (currentIndexRef.current !== -1) {
+      handleDismiss(true);
+    }
   }, [handleDismiss]);
   //#endregion
 

From 1ebb66808232ccb9c2803d24c7592a638cde5b1b Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom@me.com>
Date: Tue, 9 Feb 2021 22:48:15 +0100
Subject: [PATCH 10/11] chore: updated exmaple

---
 example/src/screens/modal/StackWithBottomInsetExample.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/example/src/screens/modal/StackWithBottomInsetExample.tsx b/example/src/screens/modal/StackWithBottomInsetExample.tsx
index 26c008a9d..d65edd681 100644
--- a/example/src/screens/modal/StackWithBottomInsetExample.tsx
+++ b/example/src/screens/modal/StackWithBottomInsetExample.tsx
@@ -114,16 +114,16 @@ const StackExample = () => {
           name="A"
           ref={bottomSheetModalARef}
           snapPoints={snapPoints}
-          children={renderBottomSheetContent('Modal A', handlePresentBPress)}
           bottomInset={footerHeight}
+          children={renderBottomSheetContent('Modal A', handlePresentBPress)}
         />
 
         <BottomSheetModal
           name="B"
           ref={bottomSheetModalBRef}
           snapPoints={snapPoints}
-          children={renderBottomSheetContent('Modal B', handlePresentCPress)}
           bottomInset={footerHeight}
+          children={renderBottomSheetContent('Modal B', handlePresentCPress)}
         />
 
         <BottomSheetModal
@@ -132,8 +132,8 @@ const StackExample = () => {
           index={1}
           snapPoints={snapPoints}
           dismissOnPanDown={false}
-          children={renderBottomSheetContent('Modal C', handleDismissCPress)}
           bottomInset={footerHeight}
+          children={renderBottomSheetContent('Modal C', handleDismissCPress)}
         />
       </View>
       <View style={styles.footer}>
@@ -151,7 +151,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     padding: 24,
-    backgroundColor: '#dfdfdf',
   },
   buttonContainer: {
     marginBottom: 6,

From fbe00d828fd3fe7fb4e43c1b6e9acf7de1ce0788 Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom@me.com>
Date: Tue, 9 Feb 2021 22:51:53 +0100
Subject: [PATCH 11/11] chore: updated bottom sheet props description

---
 src/components/bottomSheet/types.d.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
index e8a28185b..6f6fefb2c 100644
--- a/src/components/bottomSheet/types.d.ts
+++ b/src/components/bottomSheet/types.d.ts
@@ -38,15 +38,15 @@ export type BottomSheetProps = {
    */
   containerHeight?: number;
   /**
-   * Top inset value helps to calculate percentage snap points values,
-   * usually comes from `@react-navigation/stack` hook `useHeaderHeight` or from `react-native-safe-area-context` hook `useSafeArea`.
+   * Top inset to be added to the bottom sheet container,
+   * usually comes from `@react-navigation/stack` hook `useHeaderHeight`
+   * or from `react-native-safe-area-context` hook `useSafeArea`.
    * @type number
    * @default 0
    */
   topInset?: number;
   /**
-   * Bottom inset value helps to calculate percentage snap points values,
-   * usually comes from `@react-navigation/stack` hook `useHeaderHeight` or from `react-native-safe-area-context` hook `useSafeArea`.
+   * Bottom inset to be added to the bottom sheet container.
    * @type number
    * @default 0
    */