fix: dynamic sizing with detached static views

Author: gorhom

example/src/Main.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import { ShowcaseApp } from '@gorhom/showcase-template';
+import React from 'react';
+import { description, version } from '../../package.json';
 import { screens } from './screens';
-import { version, description } from '../../package.json';
 
 const author = {
   username: 'Mo Gorhom',

example/src/screens/modal/DetachedExample.tsx

@@ -1,45 +1,53 @@
-import React, { useCallback, useMemo, useRef } from 'react';
-import { View, StyleSheet, Text } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
+  BottomSheetFooter,
+  type BottomSheetFooterProps,
+  type BottomSheetHandleProps,
   BottomSheetModal,
   BottomSheetView,
-  BottomSheetFooter,
-  BottomSheetHandleProps,
-  BottomSheetFooterProps,
 } from '@gorhom/bottom-sheet';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Button } from '../../components/button';
 import { ContactItem } from '../../components/contactItem';
 import { HeaderHandle } from '../../components/headerHandle';
-import { withModalProvider } from './withModalProvider';
+import type { Contact } from '../../types';
 import { createContactListMockData } from '../../utilities/createMockData';
-import { Contact } from '../../types';
+import { withModalProvider } from './withModalProvider';
+
+const DATA = createContactListMockData(4);
 
 const DetachedExample = () => {
   // refs
   const bottomSheetRef = useRef<BottomSheetModal>(null);
 
+  // state
+  const [count, setCount] = useState(2);
+
   // variables
-  const data = useMemo(() => createContactListMockData(2), []);
+  const data = useMemo(() => DATA.slice(0, count), [count]);
 
   // hooks
   const { bottom: safeBottomArea } = useSafeAreaInsets();
 
   // callbacks
   const handlePresentPress = useCallback(() => {
-    bottomSheetRef.current!.present();
+    bottomSheetRef.current?.present();
   }, []);
   const handleDismissPress = useCallback(() => {
-    bottomSheetRef.current!.dismiss();
+    bottomSheetRef.current?.dismiss();
   }, []);
   const handleClosePress = useCallback(() => {
     bottomSheetRef.current?.close();
   }, []);
+  const handleResizePress = useCallback(() => {
+    setCount(state => (state === 2 ? 4 : 2));
+  }, []);
 
   // renders
   const renderHeaderHandle = useCallback(
     (props: BottomSheetHandleProps) => (
-      <HeaderHandle {...props} children="Detached Example" />
+      <HeaderHandle {...props}>Detached Example</HeaderHandle>
     ),
     []
   );
@@ -56,12 +64,15 @@ const DetachedExample = () => {
   const renderFooter = useCallback(
     (props: BottomSheetFooterProps) => (
       <BottomSheetFooter {...props}>
-        <View style={styles.footer}>
-          <Text style={styles.footerText}>this is a footer!</Text>
-        </View>
+        <Button
+          label="Resize"
+          style={styles.footer}
+          labelStyle={styles.footerText}
+          onPress={handleResizePress}
+        />
       </BottomSheetFooter>
     ),
-    []
+    [handleResizePress]
   );
   return (
     <View style={styles.container}>
@@ -117,7 +128,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     marginHorizontal: 12,
-    padding: 12,
+    padding: 6,
     marginBottom: 12,
     borderRadius: 24,
     backgroundColor: '#80f',

src/components/bottomSheet/BottomSheet.tsx

@@ -1495,6 +1495,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           configs: _providedAnimationConfigs,
           overrideReduceMotion: _providedOverrideReduceMotion,
         }),
+        overflow: 'hidden',
       };
     }, [
       enableDynamicSizing,
@@ -1923,13 +1924,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                     style={contentContainerStyle}
                   >
                     {children}
-
-                    {footerComponent && (
-                      <BottomSheetFooterContainer
-                        footerComponent={footerComponent}
-                      />
-                    )}
                   </DraggableView>
+                  {footerComponent && (
+                    <BottomSheetFooterContainer
+                      footerComponent={footerComponent}
+                    />
+                  )}
                 </Animated.View>
                 <BottomSheetHandleContainer
                   key="BottomSheetHandleContainer"
@@ -1961,10 +1961,11 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                   animatedPosition,
                   // animatedHandleGestureState,
                   // animatedContentGestureState,
-                  // animatedContainerHeight,
-                  // animatedSheetHeight,
-                  // animatedHandleHeight,
-                  // animatedContentHeight,
+                  animatedContainerHeight,
+                  animatedSheetHeight,
+                  animatedHandleHeight,
+                  animatedContentHeight,
+                  animatedFooterHeight,
                   // // keyboardHeight,
                   // isLayoutCalculated,
                   // isContentHeightFixed,

src/components/bottomSheetView/BottomSheetView.tsx

@@ -25,36 +25,24 @@ function BottomSheetViewComponent({
   //#endregion
 
   //#region styles
-  const flattenContainerStyle = useMemo(
-    () => StyleSheet.flatten(style),
-    [style]
-  );
-  const containerStylePaddingBottom = useMemo(() => {
-    const paddingBottom =
-      flattenContainerStyle && 'paddingBottom' in flattenContainerStyle
-        ? flattenContainerStyle.paddingBottom
+  const flattenStyle = useMemo(() => StyleSheet.flatten(style), [style]);
+  const containerStyle = useAnimatedStyle(() => {
+    if (!enableFooterMarginAdjustment) {
+      return flattenStyle;
+    }
+
+    const marginBottom =
+      typeof flattenStyle.marginBottom === 'number'
+        ? flattenStyle.marginBottom
         : 0;
-    return typeof paddingBottom === 'number' ? paddingBottom : 0;
-  }, [flattenContainerStyle]);
-  const containerStyle = useMemo(() => {
+
+    // console.log(paddingBottom, animatedFooterHeight.value);
+
     return {
-      ...flattenContainerStyle,
-      paddingBottom: 0,
+      ...flattenStyle,
+      marginBottom: marginBottom + animatedFooterHeight.value,
     };
-  }, [flattenContainerStyle]);
-  const spaceStyle = useAnimatedStyle(
-    () => ({
-      opacity: 0,
-      height: enableFooterMarginAdjustment
-        ? animatedFooterHeight.value + containerStylePaddingBottom
-        : containerStylePaddingBottom,
-    }),
-    [
-      enableFooterMarginAdjustment,
-      containerStylePaddingBottom,
-      animatedFooterHeight,
-    ]
-  );
+  }, [flattenStyle, enableFooterMarginAdjustment, animatedFooterHeight]);
   //#endregion
 
   //#region callbacks
@@ -72,14 +60,16 @@ function BottomSheetViewComponent({
         onLayout(event);
       }
 
-      print({
-        component: BottomSheetView.displayName,
-        method: 'handleLayout',
-        category: 'layout',
-        params: {
-          height: event.nativeEvent.layout.height,
-        },
-      });
+      if (__DEV__) {
+        print({
+          component: BottomSheetView.displayName,
+          method: 'handleLayout',
+          category: 'layout',
+          params: {
+            height: event.nativeEvent.layout.height,
+          },
+        });
+      }
     },
     [onLayout, animatedContentHeight, enableDynamicSizing]
   );
@@ -90,9 +80,8 @@ function BottomSheetViewComponent({
 
   //render
   return (
-    <Animated.View onLayout={handleLayout} style={containerStyle} {...rest}>
+    <Animated.View {...rest} onLayout={handleLayout} style={containerStyle}>
       {children}
-      <Animated.View pointerEvents="none" style={spaceStyle} />
     </Animated.View>
   );
 }