diff --git a/packages/pluggableWidgets/bottom-sheet-native/CHANGELOG.md b/packages/pluggableWidgets/bottom-sheet-native/CHANGELOG.md index 4f823587e..78c2a83a4 100644 --- a/packages/pluggableWidgets/bottom-sheet-native/CHANGELOG.md +++ b/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 diff --git a/packages/pluggableWidgets/bottom-sheet-native/package.json b/packages/pluggableWidgets/bottom-sheet-native/package.json index ab2055e6f..ac07f41b5 100644 --- a/packages/pluggableWidgets/bottom-sheet-native/package.json +++ b/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", diff --git a/packages/pluggableWidgets/bottom-sheet-native/src/components/CustomModalSheet.tsx b/packages/pluggableWidgets/bottom-sheet-native/src/components/CustomModalSheet.tsx index cb9a1925c..4d1f59bd3 100644 --- a/packages/pluggableWidgets/bottom-sheet-native/src/components/CustomModalSheet.tsx +++ b/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(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 ( diff --git a/packages/pluggableWidgets/bottom-sheet-native/src/package.xml b/packages/pluggableWidgets/bottom-sheet-native/src/package.xml index 69139cc5c..dcf20353d 100644 --- a/packages/pluggableWidgets/bottom-sheet-native/src/package.xml +++ b/packages/pluggableWidgets/bottom-sheet-native/src/package.xml @@ -1,6 +1,6 @@ - + diff --git a/packages/pluggableWidgets/feedback-native/CHANGELOG.md b/packages/pluggableWidgets/feedback-native/CHANGELOG.md index 29e5bddb3..36278c899 100644 --- a/packages/pluggableWidgets/feedback-native/CHANGELOG.md +++ b/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 diff --git a/packages/pluggableWidgets/feedback-native/package.json b/packages/pluggableWidgets/feedback-native/package.json index 160608e14..9ca4425d8 100644 --- a/packages/pluggableWidgets/feedback-native/package.json +++ b/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", diff --git a/packages/pluggableWidgets/feedback-native/src/Feedback.tsx b/packages/pluggableWidgets/feedback-native/src/Feedback.tsx index 5a609d2e1..fcbbb916e 100644 --- a/packages/pluggableWidgets/feedback-native/src/Feedback.tsx +++ b/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, 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 })); + }); + }); } } diff --git a/packages/pluggableWidgets/feedback-native/src/package.xml b/packages/pluggableWidgets/feedback-native/src/package.xml index 1bd7cb542..8c88abceb 100644 --- a/packages/pluggableWidgets/feedback-native/src/package.xml +++ b/packages/pluggableWidgets/feedback-native/src/package.xml @@ -1,6 +1,6 @@ - + diff --git a/packages/pluggableWidgets/intro-screen-native/CHANGELOG.md b/packages/pluggableWidgets/intro-screen-native/CHANGELOG.md index d4678f8d4..8280a1a6e 100644 --- a/packages/pluggableWidgets/intro-screen-native/CHANGELOG.md +++ b/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 diff --git a/packages/pluggableWidgets/intro-screen-native/package.json b/packages/pluggableWidgets/intro-screen-native/package.json index 3053350ac..c62397662 100644 --- a/packages/pluggableWidgets/intro-screen-native/package.json +++ b/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", diff --git a/packages/pluggableWidgets/intro-screen-native/src/IntroScreen.tsx b/packages/pluggableWidgets/intro-screen-native/src/IntroScreen.tsx index 37ca8c1c0..fe78cf55d 100644 --- a/packages/pluggableWidgets/intro-screen-native/src/IntroScreen.tsx +++ b/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): 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]); diff --git a/packages/pluggableWidgets/intro-screen-native/src/package.xml b/packages/pluggableWidgets/intro-screen-native/src/package.xml index d039d8c27..bebd2584b 100644 --- a/packages/pluggableWidgets/intro-screen-native/src/package.xml +++ b/packages/pluggableWidgets/intro-screen-native/src/package.xml @@ -1,6 +1,6 @@ - +