fix: bottom sheet container layout (#296)

* chore: updated handling top and bottom insets

* chore: updated gesture handler

* chore: pass top and bottom insets from modal to sheet

* chore: updated examples

example/index.ts

@@ -1,9 +1,12 @@
 import 'react-native-gesture-handler';
-import { AppRegistry } from 'react-native';
+
 import { enableScreens } from 'react-native-screens';
+enableScreens(true);
+
+import { AppRegistry, LogBox } from 'react-native';
 import App from './src/App';
 import { name as appName } from './app.json';
 
-enableScreens(true);
+LogBox.ignoreLogs(['react-native-maps']);
 
 AppRegistry.registerComponent(appName, () => App);

example/ios/Podfile.lock

@@ -304,7 +304,7 @@ PODS:
     - React-jsi (= 0.63.4)
   - RNCMaskedView (0.1.10):
     - React
-  - RNGestureHandler (1.9.0):
+  - RNGestureHandler (1.10.1):
     - React-Core
   - RNReanimated (1.13.2):
     - React-Core
@@ -494,12 +494,12 @@ SPEC CHECKSUMS:
   React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d
   ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
-  RNGestureHandler: 9b7e605a741412e20e13c512738a31bd1611759b
+  RNGestureHandler: 5e58135436aacc1c5d29b75547d3d2b9430d052c
   RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad
   RNScreens: 2ad555d4d9fa10b91bb765ca07fe9b29d59573f0
   Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
 PODFILE CHECKSUM: 2267d8962573316d00ae86f0e09e0dab238ae5b5
 
-COCOAPODS: 1.9.3
+COCOAPODS: 1.10.1

example/package.json

@@ -19,7 +19,7 @@
     "lodash.isequal": "^4.5.0",
     "react": "16.13.1",
     "react-native": "0.63.4",
-    "react-native-gesture-handler": "^1.9.0",
+    "react-native-gesture-handler": "^1.10.1",
     "react-native-maps": "^0.27.1",
     "react-native-reanimated": "^1.13.2",
     "react-native-redash": "^14.2.4",

example/src/screens/advanced/MapExample.tsx

@@ -47,7 +47,7 @@ const MapExample = () => {
   const data = useMemo(() => createLocationListMockData(15), []);
   const poiListSnapPoints = useMemo(
     () => [
-      SEARCH_HANDLE_HEIGHT,
+      bottomSafeArea,
       LOCATION_DETAILS_HEIGHT + bottomSafeArea,
       SCREEN_HEIGHT,
     ],
@@ -160,6 +160,7 @@ const MapExample = () => {
         index={1}
         snapPoints={poiListSnapPoints}
         topInset={topSafeArea}
+        handleHeight={SEARCH_HANDLE_HEIGHT}
         animatedPosition={animatedPosition}
         animatedIndex={animatedIndex}
         dismissOnPanDown={false}
@@ -199,7 +200,6 @@ const MapExample = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 24,
   },
   mapContainer: {
     ...StyleSheet.absoluteFillObject,

example/src/screens/modal/SimpleExample.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import Button from '../../components/button';
@@ -8,6 +8,9 @@ import withModalProvider from '../withModalProvider';
 const SimpleExample = () => {
   const bottomSheetRef = useRef<BottomSheetModal>(null);
 
+  // variables
+  const snapPoints = useMemo(() => ['25%', '50%'], []);
+
   // callbacks
   const handleChange = useCallback((index: number) => {
     // eslint-disable-next-line no-console
@@ -55,7 +58,7 @@ const SimpleExample = () => {
       />
       <BottomSheetModal
         ref={bottomSheetRef}
-        snapPoints={['25%', '50%']}
+        snapPoints={snapPoints}
         animationDuration={250}
         onDismiss={handleDismiss}
         onChange={handleChange}

example/yarn.lock

@@ -1100,6 +1100,11 @@
   resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.36.tgz#17ce0a235e9ffbcdcdf5095646b374c2bf615a4c"
   integrity sha512-7TUK/k2/QGpEAv/BCwSHlYu3NXZhQ9ZwBYpzr9tjlPIL2C5BeGhH3DmVavRx3ZNyELX5TLC91JTz/cen6AAtIQ==
 
+"@types/hammerjs@^2.0.38":
+  version "2.0.38"
+  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.38.tgz#44fdab66fb960fc7002f4a9e54d91545f0bf9448"
+  integrity sha512-wuwDzWW1JWh3BZoRftBlKcctjNzR75QFY4/b4zAz7sH1EesA8HBJzke+bF5dxCATNdHHs3X1P5UWanbbUT6chw==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -3814,12 +3819,13 @@ react-is@^16.12.0, react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.1, react-
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-native-gesture-handler@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.9.0.tgz#e441b1c0277c3fd4ca3e5c58fdd681e2f0ceddf0"
-  integrity sha512-fkkNeWDBzDdwDxDcxtYbrb9T1g0PLgT1AxBs2iO/p7uEbDbC6mIoL/NzuOnKNEBHcd0lpLoJuNmIfdmucEON5g==
+react-native-gesture-handler@^1.10.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.10.1.tgz#e7a93a5bc516338bc24a57b3312043dc00489377"
+  integrity sha512-sDo6T0m+izIDczsIzE63nAqEG3BE/OwkCJoU4/qjdo7ryem7D0Rj/Y+SlAZP2lVAhllo65LDRYqd6SBe4y19Mg==
   dependencies:
     "@egjs/hammerjs" "^2.0.17"
+    "@types/hammerjs" "^2.0.38"
     fbjs "^3.0.0"
     hoist-non-react-statics "^3.3.0"
     invariant "^2.2.4"

src/components/bottomSheet/BottomSheet.tsx

@@ -184,7 +184,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
 
     const snapPoints = useNormalizedSnapPoints(
       _providedSnapPoints,
-      topInset + bottomInset,
       safeContainerHeight,
       safeHandleHeight
     );
@@ -199,9 +198,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
 
     const initialPosition = useMemo(() => {
       return currentIndexRef.current < 0 || animateOnMount
-        ? safeContainerHeight - topInset
+        ? safeContainerHeight
         : snapPoints[currentIndexRef.current];
-    }, [snapPoints, animateOnMount, safeContainerHeight, topInset]);
+    }, [snapPoints, animateOnMount, safeContainerHeight]);
     //#endregion
 
     //#region gestures
@@ -452,20 +451,14 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
             {
               translateY: cond(
                 animatedIsLayoutReady,
-                sub(position, bottomInset),
+                position,
                 safeContainerHeight
               ),
             },
           ],
         },
       ],
-      [
-        safeContainerHeight,
-        _providedStyle,
-        position,
-        animatedIsLayoutReady,
-        bottomInset,
-      ]
+      [safeContainerHeight, _providedStyle, position, animatedIsLayoutReady]
     );
     const contentContainerStyle = useMemo(
       () => ({

src/components/bottomSheetModal/BottomSheetModal.tsx

@@ -32,6 +32,8 @@ const BottomSheetModalComponent = forwardRef<
     index: _providedIndex = 0,
     snapPoints: _providedSnapPoints,
     onChange: _providedOnChange,
+    topInset = 0,
+    bottomInset = 0,
 
     // components
     children,
@@ -71,6 +73,10 @@ const BottomSheetModalComponent = forwardRef<
       dismissOnPanDown ? [0, ..._providedSnapPoints] : _providedSnapPoints,
     [_providedSnapPoints, dismissOnPanDown]
   );
+  const safeContainerHeight = useMemo(
+    () => containerHeight - topInset - bottomInset,
+    [containerHeight, topInset, bottomInset]
+  );
   //#endregion
 
   //#region callbacks
@@ -215,7 +221,9 @@ const BottomSheetModalComponent = forwardRef<
         index={index}
         snapPoints={snapPoints}
         animateOnMount={true}
-        containerHeight={containerHeight}
+        topInset={topInset}
+        bottomInset={bottomInset}
+        containerHeight={safeContainerHeight}
         onChange={handleOnChange}
         children={children}
       />

src/hooks/useNormalizedSnapPoints.ts

@@ -3,15 +3,13 @@ import { normalizeSnapPoints } from '../utilities';
 
 export const useNormalizedSnapPoints = (
   snapPoints: Array<number | string>,
-  verticalInset: number,
   containerHeight: number = 0,
   handleHeight: number = 0
 ) =>
   useMemo(() => {
     const normalizedSnapPoints = normalizeSnapPoints(
       snapPoints,
-      containerHeight,
-      verticalInset
+      containerHeight
     );
     return normalizedSnapPoints.map(normalizedSnapPoint => {
       /**
@@ -21,9 +19,6 @@ export const useNormalizedSnapPoints = (
       if (normalizedSnapPoint === 0 && handleHeight !== 0) {
         normalizedSnapPoint = normalizedSnapPoint - handleHeight;
       }
-      return Math.max(
-        containerHeight - normalizedSnapPoint - handleHeight,
-        verticalInset
-      );
+      return Math.max(containerHeight - normalizedSnapPoint - handleHeight, 0);
     });
-  }, [snapPoints, verticalInset, containerHeight, handleHeight]);
+  }, [snapPoints, containerHeight, handleHeight]);

src/utilities/normalizeSnapPoints.ts

@@ -5,13 +5,11 @@ import { validateSnapPoint } from './validateSnapPoint';
  */
 export const normalizeSnapPoints = (
   snapPoints: Array<number | string>,
-  containerHeight: number,
-  verticalInset: number
+  containerHeight: number
 ) =>
   snapPoints.map(snapPoint => {
     validateSnapPoint(snapPoint);
     return typeof snapPoint === 'number'
       ? snapPoint
-      : (Number(snapPoint.split('%')[0]) * (containerHeight - verticalInset)) /
-          100;
+      : (Number(snapPoint.split('%')[0]) * containerHeight) / 100;
   });