[MOO-2435]: Build MxOverlay Primitive

packages/pluggableWidgets/intro-screen-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   The IntroScreen is now presented through the shared MxOverlay component. Its appearance and behaviour, including blocking the Android back button, are unchanged.
+
 ### Fixed
 
 -   We fixed an issue where the IntroScreen did not show the slide set by the active slide attribute, and where swiping between slides did not work reliably on slower Android devices.

packages/pluggableWidgets/intro-screen-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intro-screen-native",
   "widgetName": "IntroScreen",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

packages/pluggableWidgets/intro-screen-native/src/IntroScreen.tsx

@@ -1,12 +1,16 @@
 import { useCallback, useEffect, useState, JSX } from "react";
 import { defaultWelcomeScreenStyle, IntroScreenStyle } from "./ui/Styles";
 import { IntroScreenProps } from "../typings/IntroScreenProps";
-import { Modal, View } from "react-native";
+import { View } from "react-native";
 import { DynamicValue, ValueStatus } from "mendix";
 import { SwipeableContainer } from "./SwipeableContainer";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import deepmerge from "deepmerge";
 import { executeAction } from "@mendix/piw-utils-internal";
+import { MxOverlay } from "@mendix/piw-native-utils-internal";
+
+// The popup container draws its own dimmed background, so the overlay backdrop must not add a second one
+const transparentBackdrop = { backgroundColor: "transparent" };
 
 export function IntroScreen(props: IntroScreenProps<IntroScreenStyle>): JSX.Element {
     const [visible, setVisible] = useState(false);
@@ -68,7 +72,18 @@ export function IntroScreen(props: IntroScreenProps<IntroScreenStyle>): JSX.Elem
     const showNextDone = props.buttonPattern !== "none";
 
     return (
-        <Modal visible={visible} transparent={props.showMode === "popup"}>
+        <MxOverlay
+            visible={visible}
+            placement="fullscreen"
+            transparent={props.showMode === "popup"}
+            supportedOrientations={["portrait"]}
+            dismissOnBackPress={false}
+            dismissOnBackdropPress={false}
+            backdropStyle={transparentBackdrop}
+            animationDuration={0}
+            respectSafeArea={false}
+            statusBarTranslucent={false}
+        >
             <View style={props.showMode === "fullscreen" ? styles.fullscreenContainer : styles.popupContainer}>
                 <SwipeableContainer
                     testID={props.name}
@@ -96,6 +111,6 @@ export function IntroScreen(props: IntroScreenProps<IntroScreenStyle>): JSX.Elem
                     hideIndicatorLastSlide={props.hideIndicatorLastSlide}
                 />
             </View>
-        </Modal>
+        </MxOverlay>
     );
 }

packages/pluggableWidgets/intro-screen-native/src/__tests__/IntroScreen.spec.tsx

@@ -2,7 +2,7 @@ import { render, act, fireEvent, RenderAPI } from "@testing-library/react-native
 import { IntroScreen } from "../IntroScreen";
 import { IntroScreenProps } from "../../typings/IntroScreenProps";
 import { IntroScreenStyle } from "../ui/Styles";
-import { View } from "react-native";
+import { Modal, View } from "react-native";
 import { EditableValueBuilder } from "@mendix/piw-utils-internal";
 import { Big } from "big.js";
 
@@ -54,6 +54,34 @@ describe("Intro Screen", () => {
         expect(component.toJSON()).toMatchSnapshot();
     });
 
+    it("renders an opaque modal in fullscreen mode", () => {
+        const component = render(<IntroScreen {...defaultProps} showMode="fullscreen" />);
+
+        expect(component.UNSAFE_getByType(Modal).props.transparent).toBe(false);
+    });
+
+    it("renders a transparent modal in popup mode", () => {
+        const component = render(<IntroScreen {...defaultProps} showMode="popup" />);
+
+        expect(component.UNSAFE_getByType(Modal).props.transparent).toBe(true);
+    });
+
+    it("stays in portrait on iOS", () => {
+        const component = render(<IntroScreen {...defaultProps} />);
+
+        expect(component.UNSAFE_getByType(Modal).props.supportedOrientations).toEqual(["portrait"]);
+    });
+
+    it("keeps the intro screen open when the Android back button is pressed", () => {
+        const component = render(<IntroScreen {...defaultProps} />);
+
+        act(() => {
+            component.UNSAFE_getByType(Modal).props.onRequestClose();
+        });
+
+        expect(component.UNSAFE_queryByType(Modal)).not.toBeNull();
+    });
+
     it("renders with 1 bottom button", () => {
         const component = render(
             <IntroScreen {...defaultProps} slideIndicators={"above"} buttonPattern={"nextDone"} />