Implement dynamic content snapPoints

Author: mtzfactory

example/package.json

@@ -14,13 +14,13 @@
   "dependencies": {
     "@gorhom/bottom-sheet": "^4.3.1",
     "@react-navigation/native": "^6.0.10",
-    "expo": "^45.0.5",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-gesture-handler": "~2.2.1",
-    "react-native-reanimated": "~2.8.0",
-    "react-native-web": "0.17.7"
+    "expo": "^46.0.9",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.6",
+    "react-native-gesture-handler": "2.5.0",
+    "react-native-reanimated": "2.9.1",
+    "react-native-web": "0.18.7"
   },
   "devDependencies": {
     "@babel/core": "~7.18.2",

example/src/SimpleExample.tsx

@@ -13,6 +13,7 @@ import { Button, StyleSheet, Text, View } from 'react-native';
 type BottomSheetParams = {
   Home: undefined;
   Sheet: { id: number };
+  BigSheet: { id: number };
 };
 
 const BottomSheet = createBottomSheetNavigator<BottomSheetParams>();
@@ -23,12 +24,20 @@ function HomeScreen({
   return (
     <View style={styles.container}>
       <Text>Home Screen</Text>
+      <View style={styles.spacer} />
       <Button
         title="Open sheet"
         onPress={() => {
           navigation.navigate('Sheet', { id: 1 });
         }}
       />
+      <View style={styles.spacer} />
+      <Button
+        title="Open a big sheet"
+        onPress={() => {
+          navigation.navigate('BigSheet', { id: 1 });
+        }}
+      />
     </View>
   );
 }
@@ -38,46 +47,53 @@ function SheetScreen({
   navigation,
 }: BottomSheetScreenProps<BottomSheetParams, 'Sheet'>) {
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, styles.content]}>
       <Text>Sheet Screen {route.params.id}</Text>
+      <View style={styles.spacer} />
       <Button
         title="Open new sheet"
         onPress={() => {
           navigation.navigate('Sheet', { id: route.params.id + 1 });
         }}
       />
+      <View style={styles.spacer} />
       <Button
-        title="Close sheet"
+        title="Open new big sheet"
         onPress={() => {
-          navigation.goBack();
+          navigation.navigate('BigSheet', { id: route.params.id + 1 });
         }}
       />
+      <View style={styles.spacer} />
       <Button
-        title="Snap to top"
+        title="Close this sheet"
         onPress={() => {
-          navigation.snapTo(1);
+          navigation.goBack();
         }}
       />
+      {route.name === ('BigSheet' as unknown) && (
+        <>
+          <View style={styles.spacer} />
+          <Button
+            title="Snap to top"
+            onPress={() => {
+              navigation.snapTo(1);
+            }}
+          />
+        </>
+      )}
     </View>
   );
 }
 
+const renderBackdrop = (props: BottomSheetBackdropProps) => (
+  <BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} />
+);
+
 export function SimpleExample() {
-  const renderBackdrop = React.useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        appearsOnIndex={0}
-        disappearsOnIndex={-1}
-      />
-    ),
-    [],
-  );
   return (
     <NavigationContainer>
       <BottomSheet.Navigator
         screenOptions={{
-          snapPoints: ['70%', '90%'],
           backdropComponent: renderBackdrop,
         }}
       >
@@ -87,11 +103,29 @@ export function SimpleExample() {
           component={SheetScreen}
           getId={({ params }) => `sheet-${params.id}`}
         />
+        <BottomSheet.Screen
+          name="BigSheet"
+          component={SheetScreen}
+          options={{
+            snapPoints: ['50%', '80%'],
+          }}
+          getId={({ params }) => `sheet-${params.id}`}
+        />
       </BottomSheet.Navigator>
     </NavigationContainer>
   );
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    marginVertical: 20,
+  },
+  spacer: {
+    margin: 5,
+  },
 });

src/BottomSheetView.tsx

@@ -2,6 +2,8 @@ import {
   BottomSheetModal,
   BottomSheetModalProps,
   BottomSheetModalProvider,
+  BottomSheetView as RNBottomSheetView,
+  useBottomSheetDynamicSnapPoints,
 } from '@gorhom/bottom-sheet';
 import { ParamListBase, useTheme } from '@react-navigation/native';
 import * as React from 'react';
@@ -18,8 +20,11 @@ type BottomSheetModalScreenProps = BottomSheetModalProps & {
 };
 
 function BottomSheetModalScreen({
-  navigation,
+  contentHeight,
+  handleHeight,
   index,
+  navigation,
+  snapPoints,
   ...props
 }: BottomSheetModalScreenProps) {
   const ref = React.useRef<BottomSheetModal>(null);
@@ -64,22 +69,25 @@ function BottomSheetModalScreen({
   return (
     <BottomSheetModal
       ref={ref}
+      contentHeight={contentHeight}
+      handleHeight={handleHeight}
       index={index}
+      snapPoints={snapPoints}
       onChange={onChange}
       onDismiss={onDismiss}
       {...props}
     />
   );
 }
 
-const DEFAULT_SNAP_POINTS = ['66%'];
-
 type Props = BottomSheetNavigationConfig & {
   state: BottomSheetNavigationState<ParamListBase>;
   navigation: BottomSheetNavigationHelpers;
   descriptors: BottomSheetDescriptorMap;
 };
 
+const initialDynamicSnapPoints = ['CONTENT_HEIGHT', 'CONTENT_HEIGHT'];
+
 export function BottomSheetView({ state, descriptors }: Props) {
   const { colors } = useTheme();
   const themeBackgroundStyle = React.useMemo(
@@ -101,6 +109,14 @@ export function BottomSheetView({ state, descriptors }: Props) {
     shouldRenderProvider.current || state.routes.length > 1;
 
   const firstScreen = descriptors[state.routes[0].key];
+
+  const {
+    animatedHandleHeight,
+    animatedSnapPoints,
+    animatedContentHeight,
+    handleContentLayout,
+  } = useBottomSheetDynamicSnapPoints(initialDynamicSnapPoints);
+
   return (
     <>
       {firstScreen.render()}
@@ -113,7 +129,7 @@ export function BottomSheetView({ state, descriptors }: Props) {
               index,
               backgroundStyle,
               handleIndicatorStyle,
-              snapPoints = DEFAULT_SNAP_POINTS,
+              snapPoints = animatedSnapPoints.value,
               ...sheetProps
             } = options;
 
@@ -126,6 +142,8 @@ export function BottomSheetView({ state, descriptors }: Props) {
                   route.snapToIndex ?? index ?? 0,
                   snapPoints.length - 1,
                 )}
+                contentHeight={animatedContentHeight}
+                handleHeight={animatedHandleHeight}
                 snapPoints={snapPoints}
                 navigation={navigation}
                 backgroundStyle={[themeBackgroundStyle, backgroundStyle]}
@@ -135,7 +153,9 @@ export function BottomSheetView({ state, descriptors }: Props) {
                 ]}
                 {...sheetProps}
               >
-                {render()}
+                <RNBottomSheetView onLayout={handleContentLayout}>
+                  {render()}
+                </RNBottomSheetView>
               </BottomSheetModalScreen>
             );
           })}