[MOO-2468]: Fix BottomSheet orientation on iOS

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

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 
+-   Fixed iOS orientation change when opening the bottom sheet modal on devices in landscape mode.
 -   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.

packages/pluggableWidgets/bottom-sheet-native/e2e/specs/maestro/Modal_basic_landscape.yaml

@@ -0,0 +1,29 @@
+appId: "${APP_ID}"
+---
+- runFlow:
+    when:
+      platform: ios
+    commands:
+      - runFlow:
+          file: "../../../../../../maestro/Precondition.yaml"
+      - retry:
+          maxRetries: 2
+          commands:
+            - tapOn:
+                text: "B"
+            - extendedWaitUntil:
+                visible: "Bottom Sheet"
+                timeout: 10000
+      - tapOn:
+          text: "Bottom Sheet"
+      - tapOn:
+          text: "Modal basic"
+      - setOrientation: LANDSCAPE_LEFT
+      - tapOn:
+          text: "Open"
+      - waitForAnimationToEnd:
+          timeout: 5000
+      - takeScreenshot:
+          path: "maestro/images/actual/${PLATFORM}/bottom_sheet_modal_basic_landscape"
+      - assertScreenshot:
+          path: "maestro/images/expected/${PLATFORM}/bottom_sheet_modal_basic_landscape.png"

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

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

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

@@ -166,6 +166,32 @@ describe("Bottom sheet", () => {
         expect(component.toJSON()).toMatchSnapshot();
     });
 
+    it("renders custom modal with supportedOrientations when open", () => {
+        const component = render(
+            <BottomSheet
+                {...defaultProps}
+                modalRendering="custom"
+                largeContent={<Text />}
+                triggerAttribute={new EditableValueBuilder<boolean>().withValue(true).build()}
+            />
+        );
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("renders basic modal with supportedOrientations when open", () => {
+        const component = render(
+            <BottomSheet
+                {...defaultProps}
+                modalRendering="basic"
+                nativeImplementation={false}
+                triggerAttribute={new EditableValueBuilder<boolean>().withValue(true).build()}
+            />
+        );
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
     it("closes custom modal when triggerAttribute is set to false", () => {
         const triggerAttribute = new EditableValueBuilder<boolean>().withValue(true).build();
         const props = {

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

@@ -159,3 +159,39 @@ exports[`Bottom sheet renders a expanding fullscreen with custom styles 1`] = `
 `;
 
 exports[`Bottom sheet renders a native bottom action sheet for ios (Basic modal) 1`] = `null`;
+
+exports[`Bottom sheet renders basic modal with supportedOrientations when open 1`] = `
+<Modal
+  animationType="none"
+  onRequestClose={[Function]}
+  onShow={[Function]}
+  supportedOrientations={
+    [
+      "portrait",
+      "portrait-upside-down",
+      "landscape-left",
+      "landscape-right",
+    ]
+  }
+  transparent={true}
+  visible={true}
+/>
+`;
+
+exports[`Bottom sheet renders custom modal with supportedOrientations when open 1`] = `
+<Modal
+  animationType="none"
+  onRequestClose={[Function]}
+  onShow={[Function]}
+  supportedOrientations={
+    [
+      "portrait",
+      "portrait-upside-down",
+      "landscape-left",
+      "landscape-right",
+    ]
+  }
+  transparent={true}
+  visible={true}
+/>
+`;

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

@@ -78,7 +78,14 @@ export const CustomModalSheet = (props: CustomModalSheetProps): ReactElement =>
     const maxHeight = windowHeight * 0.9;
 
     return (
-        <Modal transparent animationType="none" visible={mounted} onRequestClose={close} onShow={handleModalShow}>
+        <Modal
+            transparent
+            animationType="none"
+            visible={mounted}
+            onRequestClose={close}
+            onShow={handleModalShow}
+            supportedOrientations={["portrait", "portrait-upside-down", "landscape-left", "landscape-right"]}
+        >
             {ready && (
                 <BottomSheet
                     ref={bottomSheetRef}

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

@@ -185,7 +185,14 @@ export const NativeBottomSheet = (props: NativeBottomSheetProps): ReactElement =
     }
 
     return (
-        <Modal onRequestClose={close} transparent animationType="none" visible={mounted} onShow={handleModalShow}>
+        <Modal
+            onRequestClose={close}
+            transparent
+            animationType="none"
+            visible={mounted}
+            onShow={handleModalShow}
+            supportedOrientations={["portrait", "portrait-upside-down", "landscape-left", "landscape-right"]}
+        >
             {ready && (
                 <BottomSheet
                     ref={bottomSheetRef}

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.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="BottomSheet" version="5.3.3" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BottomSheet.xml" />
         </widgetFiles>