[MOO-2174]: replace the depricated interactionmanager

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

@@ -19,6 +19,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 -   BottomSheet now uses BottomSheetScrollView instead of BottomSheetView, enabling proper scrolling in expanded states.
 -   NativeBottomSheet now explicitly calculates snapPoints with 90% screen height cap for predictable sizing.
 -   CustomModalSheet now measures content height dynamically with 90% screen height cap, removing offscreen SafeAreaView measurement.
+-   Replaced the deprecated InteractionManager in CustomModalSheet.
 
 ## [5.0.3] - 2025-12-15
 

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

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

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

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Dimensions, InteractionManager, LayoutChangeEvent, Modal, Pressable } from "react-native";
+import { Dimensions, LayoutChangeEvent, Modal, Pressable } from "react-native";
 import BottomSheet, {
     BottomSheetBackdrop,
     BottomSheetBackdropProps,
@@ -14,8 +14,6 @@ interface CustomModalSheetProps {
     styles: BottomSheetStyle;
 }
 
-let lastIndexRef = -1;
-
 export const CustomModalSheet = (props: CustomModalSheetProps): ReactElement => {
     const bottomSheetRef = useRef<BottomSheet>(null);
     const [contentHeight, setContentHeight] = useState(0);
@@ -74,15 +72,10 @@ export const CustomModalSheet = (props: CustomModalSheetProps): ReactElement =>
                 return;
             }
 
-            const hasOpened = lastIndexRef === -1 && index === 0;
             const hasClosed = index === -1;
-            lastIndexRef = index;
-
-            if (hasOpened) {
-                props.triggerAttribute?.setValue(true);
-            }
-            if (hasClosed) {
+            if (hasClosed && props.triggerAttribute?.value) {
                 props.triggerAttribute?.setValue(false);
+                setCurrentStatus(false);
             }
         },
         [isAvailable, props.triggerAttribute]
@@ -92,13 +85,18 @@ export const CustomModalSheet = (props: CustomModalSheetProps): ReactElement =>
         if (!isAvailable) {
             return;
         }
-        if (props.triggerAttribute?.value && !currentStatus) {
-            InteractionManager.runAfterInteractions(() => setCurrentStatus(true));
-        } else if (!props.triggerAttribute?.value && currentStatus) {
+
+        const shouldBeOpen = props.triggerAttribute?.value === true;
+
+        if (shouldBeOpen && !currentStatus) {
+            requestAnimationFrame(() => {
+                setCurrentStatus(true);
+            });
+        } else if (!shouldBeOpen && currentStatus) {
             bottomSheetRef.current?.close();
             setCurrentStatus(false);
         }
-    }, [props.triggerAttribute, currentStatus, isAvailable]);
+    }, [props.triggerAttribute?.value, currentStatus, isAvailable]);
 
     return (
         <Modal onRequestClose={close} transparent visible={!!isOpen}>

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

packages/pluggableWidgets/feedback-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   Replaced the deprecated InteractionManager in Feedback widget.
+
 ## [3.4.0] - 2025-3-31
 
 ### Changed

packages/pluggableWidgets/feedback-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "feedback-native",
   "widgetName": "Feedback",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

packages/pluggableWidgets/feedback-native/src/Feedback.tsx

@@ -5,7 +5,6 @@ import {
     ActivityIndicator,
     Dimensions,
     Image as RNImage,
-    InteractionManager,
     StyleProp,
     Switch,
     Text,
@@ -73,9 +72,12 @@ export class Feedback extends Component<FeedbackProps<FeedbackStyle>, State> {
             this.state.status === "closingDialog" &&
             this.state.nextStatus
         ) {
-            InteractionManager.runAfterInteractions(() =>
-                this.setState(({ nextStatus }) => ({ status: nextStatus || "initial", nextStatus: undefined }))
-            );
+            // Use requestAnimationFrame twice to wait for the dialog close animation to complete
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this.setState(({ nextStatus }) => ({ status: nextStatus || "initial", nextStatus: undefined }));
+                });
+            });
         }
     }
 

packages/pluggableWidgets/feedback-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="Feedback" version="3.4.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Feedback" version="3.4.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Feedback.xml" />
         </widgetFiles>

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

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 
 -   We migrated from using the native FlatList to @shopify/flash-list.
+-   Replaced the deprecated InteractionManager in IntroScreen.
 
 ## [4.2.1] - 2026-1-19
 

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

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

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

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState, JSX } from "react";
 import { defaultWelcomeScreenStyle, IntroScreenStyle } from "./ui/Styles";
 import { IntroScreenProps } from "../typings/IntroScreenProps";
-import { InteractionManager, Modal, View } from "react-native";
+import { Modal, View } from "react-native";
 import { DynamicValue, ValueStatus } from "mendix";
 import { SwipeableContainer } from "./SwipeableContainer";
 import AsyncStorage from "@react-native-async-storage/async-storage";
@@ -17,20 +17,33 @@ export function IntroScreen(props: IntroScreenProps<IntroScreenStyle>): JSX.Elem
             : defaultWelcomeScreenStyle;
 
     useEffect(() => {
+        let isMounted = true;
+
         if (props.identifier) {
             AsyncStorage.getItem(props.identifier).then(value => {
-                setVisible(value === "" || value === null);
+                if (isMounted) {
+                    setVisible(value === "" || value === null);
+                }
             });
         } else {
-            InteractionManager.runAfterInteractions(() => setVisible(true));
+            // Show modal on next frame when there's no identifier to prevent flash of content
+            queueMicrotask(() => {
+                if (isMounted) {
+                    setVisible(true);
+                }
+            });
         }
+
+        return () => {
+            isMounted = false;
+        };
     }, [props.identifier]);
 
     const hideModal = useCallback((): void => {
         if (props.identifier) {
             AsyncStorage.setItem(props.identifier, "gone").then(() => setVisible(false));
         } else {
-            InteractionManager.runAfterInteractions(() => setVisible(false));
+            setVisible(false);
         }
     }, [props.identifier]);
 

packages/pluggableWidgets/intro-screen-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="IntroScreen" version="4.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="IntroScreen" version="4.3.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="IntroScreen.xml" />
         </widgetFiles>