fix(bottom-sheet-native): simplify modal and bottom sheet implementation

Author: MxKevinBeqo

packages/pluggableWidgets/bottom-sheet-native/src/__tests__/__snapshots__/BottomSheet.spec.tsx.snap

@@ -1,143 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Bottom sheet renders a custom bottom action sheet for ios (Basic modal) with custom style 1`] = `
-<View
-  onLayout={[Function]}
-  style={
-    [
-      {
-        "left": 0,
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-        "top": -10000,
-      },
-      {
-        "width": 750,
-      },
-    ]
-  }
->
-  <View
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-  >
-    <View
-      style={
-        [
-          {
-            "flex": 1,
-            "paddingHorizontal": 16,
-          },
-          [
-            {
-              "paddingVertical": 12,
-              "textAlign": "center",
-            },
-            {},
-          ],
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "color": "red",
-            "fontSize": 60,
-          }
-        }
-      >
-        Item 1
-      </Text>
-    </View>
-  </View>
-  <View
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-  >
-    <View
-      style={
-        [
-          {
-            "flex": 1,
-            "paddingHorizontal": 16,
-          },
-          [
-            {
-              "paddingVertical": 12,
-              "textAlign": "center",
-            },
-            {},
-          ],
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "color": "red",
-            "fontSize": 60,
-          }
-        }
-      >
-        Item 2
-      </Text>
-    </View>
-  </View>
-</View>
-`;
+exports[`Bottom sheet renders a custom bottom action sheet for ios (Basic modal) with custom style 1`] = `null`;
 
-exports[`Bottom sheet renders a custom modal 1`] = `
-<View
-  onLayout={[Function]}
-  style={
-    [
-      {
-        "left": 0,
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-        "top": -10000,
-      },
-      {
-        "width": 750,
-      },
-    ]
-  }
->
-  <Text />
-</View>
-`;
+exports[`Bottom sheet renders a custom modal 1`] = `null`;
 
 exports[`Bottom sheet renders a expanding 1`] = `
 <View

packages/pluggableWidgets/bottom-sheet-native/src/components/CustomModalSheet.tsx

@@ -1,5 +1,6 @@
-import { ReactElement, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Dimensions, LayoutChangeEvent, Modal, Pressable, View } from "react-native";
+import { ReactElement, ReactNode, useCallback, useRef, useState } from "react";
+import { Modal, useWindowDimensions } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 import BottomSheet, {
     BottomSheetBackdrop,
     BottomSheetBackdropProps,
@@ -8,20 +9,6 @@ import BottomSheet, {
 import { EditableValue, ValueStatus } from "mendix";
 import { BottomSheetStyle } from "../ui/Styles";
 
-const BACKDROP_FADE_IN_DURATION = 200;
-const BACKDROP_FADE_OUT_DURATION = 150;
-// Delay before animating sheet open to ensure Modal and BottomSheet are fully laid out
-const SHEET_ANIMATION_DELAY = 50;
-
-// Styles for off-screen measurement container
-const MEASUREMENT_CONTAINER_STYLE = {
-    position: "absolute" as const,
-    opacity: 0,
-    top: -10000, // Position far off-screen to avoid any layout interference
-    left: 0,
-    pointerEvents: "none" as const
-};
-
 interface CustomModalSheetProps {
     triggerAttribute?: EditableValue<boolean>;
     content?: ReactNode;
@@ -30,150 +17,85 @@ interface CustomModalSheetProps {
 
 export const CustomModalSheet = (props: CustomModalSheetProps): ReactElement => {
     const bottomSheetRef = useRef<BottomSheet>(null);
-    const [contentHeight, setContentHeight] = useState(0);
-    const [currentStatus, setCurrentStatus] = useState(false);
-    const [isMeasured, setIsMeasured] = useState(false);
-    const backdropOpacity = useRef(new Animated.Value(0)).current;
+    const { height: windowHeight } = useWindowDimensions();
 
-    const isAvailable = props.triggerAttribute && props.triggerAttribute.status === ValueStatus.Available;
+    const externalOpen =
+        props.triggerAttribute?.status === ValueStatus.Available && props.triggerAttribute.value === true;
 
-    const isOpen =
-        props.triggerAttribute &&
-        props.triggerAttribute.status === ValueStatus.Available &&
-        props.triggerAttribute.value;
+    const [mounted, setMounted] = useState(externalOpen);
+    const [ready, setReady] = useState(false);
+    const didOpenRef = useRef(false);
 
-    const onContentLayoutHandler = useCallback(
-        (event: LayoutChangeEvent): void => {
-            const layoutHeight = event.nativeEvent.layout.height;
-            if (layoutHeight > 0 && layoutHeight !== contentHeight) {
-                setContentHeight(layoutHeight);
-                setIsMeasured(true);
-            }
-        },
-        [contentHeight]
-    );
+    if (externalOpen && !mounted) {
+        setMounted(true);
+    }
 
     const close = useCallback(() => {
         bottomSheetRef.current?.close();
     }, []);
 
-    const renderBackdrop = useCallback(
-        (backdropProps: BottomSheetBackdropProps) => (
-            <Animated.View
-                style={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    backgroundColor: "rgba(0, 0, 0, 0.3)",
-                    opacity: backdropOpacity
-                }}
-            >
-                <Pressable style={{ flex: 1 }} onPress={close}>
-                    <BottomSheetBackdrop
-                        {...backdropProps}
-                        pressBehavior={"close"}
-                        opacity={0}
-                        appearsOnIndex={0}
-                        disappearsOnIndex={-1}
-                    />
-                </Pressable>
-            </Animated.View>
-        ),
-        [close, backdropOpacity]
-    );
-
-    const snapPoints = useMemo(() => {
-        if (contentHeight === 0) {
-            return [1]; // During measurement
-        }
-
-        // Use actual measured content height, cap at 90% screen
-        const maxHeight = Dimensions.get("screen").height * 0.9;
-        const snapHeight = Math.min(contentHeight, maxHeight);
-        return [snapHeight];
-    }, [contentHeight]);
+    const handleModalShow = useCallback(() => {
+        setReady(true);
+    }, []);
 
-    const handleSheetChanges = useCallback(
+    const handleChange = useCallback(
         (index: number) => {
-            if (!isAvailable) {
+            if (index === 0) {
+                didOpenRef.current = true;
                 return;
             }
 
-            const hasClosed = index === -1;
-            if (hasClosed && props.triggerAttribute?.value) {
+            if (index === -1 && didOpenRef.current) {
+                didOpenRef.current = false;
+                setReady(false);
                 props.triggerAttribute?.setValue(false);
-                setCurrentStatus(false);
+                setMounted(false);
             }
         },
-        [isAvailable, props.triggerAttribute]
+        [props.triggerAttribute]
     );
 
-    useEffect(() => {
-        if (!isAvailable) {
-            return;
-        }
-
-        const shouldBeOpen = props.triggerAttribute?.value === true;
+    const renderBackdrop = useCallback(
+        (backdropProps: BottomSheetBackdropProps) => (
+            <BottomSheetBackdrop
+                {...backdropProps}
+                pressBehavior="close"
+                opacity={0.3}
+                appearsOnIndex={0}
+                disappearsOnIndex={-1}
+            />
+        ),
+        []
+    );
 
-        if (shouldBeOpen && !currentStatus) {
-            setCurrentStatus(true);
-            requestAnimationFrame(() => {
-                // Fade in backdrop - this helps smooth the transition as the sheet opens, reducing the perception of any initial stuttering.
-                Animated.timing(backdropOpacity, {
-                    toValue: 1,
-                    duration: BACKDROP_FADE_IN_DURATION,
-                    useNativeDriver: true
-                }).start();
-                // Delay animation to ensure Modal and BottomSheet are fully mounted and laid out
-                setTimeout(() => {
-                    bottomSheetRef.current?.snapToIndex(0);
-                }, SHEET_ANIMATION_DELAY);
-            });
-        } else if (!shouldBeOpen && currentStatus) {
-            bottomSheetRef.current?.close();
-            Animated.timing(backdropOpacity, {
-                toValue: 0,
-                duration: BACKDROP_FADE_OUT_DURATION,
-                useNativeDriver: true
-            }).start(() => {
-                setCurrentStatus(false);
-            });
-        }
-    }, [props.triggerAttribute?.value, currentStatus, isAvailable, backdropOpacity]);
+    const maxHeight = windowHeight * 0.9;
 
     return (
-        <>
-            {/* Off-screen measurement - measure content before showing Modal to prevent sudden jumps in layout */}
-            {!isMeasured && (
-                <View
-                    style={[MEASUREMENT_CONTAINER_STYLE, { width: Dimensions.get("screen").width }]}
-                    onLayout={onContentLayoutHandler}
-                >
-                    {props.content}
-                </View>
-            )}
-
-            <Modal onRequestClose={close} transparent visible={isOpen && isMeasured}>
-                <BottomSheet
-                    ref={bottomSheetRef}
-                    index={-1}
-                    snapPoints={snapPoints}
-                    onClose={() => handleSheetChanges(-1)}
-                    onChange={handleSheetChanges}
-                    backdropComponent={renderBackdrop}
-                    style={[props.styles.modal]}
-                    backgroundStyle={props.styles.container}
-                    enablePanDownToClose={false}
-                    handleComponent={null}
-                    handleStyle={{ display: "none" }}
-                >
-                    <BottomSheetScrollView style={[{ flex: 1 }]} contentContainerStyle={{ paddingBottom: 16 }}>
-                        {props.content}
-                    </BottomSheetScrollView>
-                </BottomSheet>
-            </Modal>
-        </>
+        <Modal transparent animationType="none" visible={mounted} onRequestClose={close} onShow={handleModalShow}>
+            <GestureHandlerRootView style={{ flex: 1 }}>
+                {ready && (
+                    <BottomSheet
+                        ref={bottomSheetRef}
+                        index={0}
+                        animateOnMount
+                        enableDynamicSizing
+                        maxDynamicContentSize={maxHeight}
+                        containerHeight={windowHeight}
+                        enablePanDownToClose
+                        onChange={handleChange}
+                        onClose={() => handleChange(-1)}
+                        backdropComponent={renderBackdrop}
+                        style={[props.styles.modal]}
+                        backgroundStyle={props.styles.container}
+                        handleComponent={null}
+                        handleStyle={{ display: "none" }}
+                    >
+                        <BottomSheetScrollView style={[{ flex: 1 }]} contentContainerStyle={{ paddingBottom: 16 }}>
+                            {props.content}
+                        </BottomSheetScrollView>
+                    </BottomSheet>
+                )}
+            </GestureHandlerRootView>
+        </Modal>
     );
 };