[MOO-2412]: fix bottom sheet closing issue- #574

packages/pluggableWidgets/bottom-sheet-native/CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 -   Fixed flickering issue on Android when opening bottom sheet (both basic and custom render types).
 -   Improved backdrop animation with smooth fade-in/fade-out transitions.
+-   Fixed bottomsheet issue to close when the trigger attribute changes.
 
 ## [5.3.0] - 2026-6-10
 

packages/pluggableWidgets/bottom-sheet-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bottom-sheet-native",
   "widgetName": "BottomSheet",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

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

@@ -154,4 +154,21 @@ describe("Bottom sheet", () => {
 
         expect(component.toJSON()).toMatchSnapshot();
     });
+
+    it("closes custom modal when triggerAttribute is set to false", () => {
+        const triggerAttribute = new EditableValueBuilder<boolean>().withValue(true).build();
+        const props = {
+            ...defaultProps,
+            modalRendering: "custom" as const,
+            largeContent: <Text>Content</Text>,
+            triggerAttribute
+        };
+
+        const { rerender } = render(<BottomSheet {...props} />);
+
+        triggerAttribute.setValue(false);
+        rerender(<BottomSheet {...props} triggerAttribute={triggerAttribute} />);
+
+        expect(triggerAttribute.value).toBe(false);
+    });
 });

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, useCallback, useRef, useState } from "react";
+import { ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { Modal, Pressable, useWindowDimensions } from "react-native";
 import BottomSheet, {
     BottomSheetBackdrop,
@@ -33,6 +33,12 @@ export const CustomModalSheet = (props: CustomModalSheetProps): ReactElement =>
         bottomSheetRef.current?.close();
     }, []);
 
+    useEffect(() => {
+        if (!externalOpen && mounted && didOpenRef.current) {
+            close();
+        }
+    }, [externalOpen, mounted, close]);
+
     const handleModalShow = useCallback(() => {
         setReady(true);
     }, []);

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

@@ -76,12 +76,18 @@
                 }
             );
         }
     }, [externalOpen]);
 
     const close = useCallback(() => {
         bottomSheetRef.current?.close();
     }, []);
 
+    useEffect(() => {
+        if (!externalOpen && mounted && didOpenRef.current) {
+            close();
+        }
+    }, [externalOpen, mounted, close]);
+
     const handleChange = useCallback(
         (index: number) => {
             if (index === 0) {
@@ -128,14 +134,14 @@
 
     const buttonContainerStyle = { ...props.styles.modalItems?.container } as ModalItemContainerStyle;
 
     const getButtonStyle = () => {
         if (props.useNative) {
             return [nativeAndroidStyles.buttonContainer];
         }
         return [styles.buttonContainer, buttonContainerStyle];
     };
 
     const renderItem = (item: ItemsBasicType, index: number) => {
         if (Platform.OS === "android" || !props.useNative) {
             return (
                 <TouchableHighlight
@@ -162,7 +168,7 @@
         );
     };
 
     const getContainerStyle = () => {
         if (props.useNative) {
             return [nativeAndroidStyles.sheetContainer];
         }

packages/pluggableWidgets/bottom-sheet-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="BottomSheet" version="5.3.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="BottomSheet" version="5.3.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BottomSheet.xml" />
         </widgetFiles>