fix: intro-screen issues

Author: YogendraShelke

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

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 -   We fixed an issue where reopening a page containing the intro screen would show the first slide instead of the slide referenced by the active slide attribute, and would report a slide change that the user did not make.
 -   We fixed an issue where the initial slide was scrolled to with an animation, which briefly left the slide content unavailable to screen readers.
+-   We fixed an issue where moving to a slide with the next, previous or pagination controls could jump back to the first slide and report an extra slide change.
 
 ## [4.4.1] - 2026-6-10
 

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

@@ -76,6 +76,10 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement
     const flashList = useRef<FlashListRef<any>>(null);
     const hasAppliedInitialScroll = useRef(false);
     const isUserDragging = useRef(false);
+    // Slide a programmatic scroll is currently heading for, or null when the list is
+    // wherever the user left it. Used to recognise momentum events that contradict the
+    // scroll we just asked for; see onMomentumScrollEnd.
+    const pendingScrollTarget = useRef<number | null>(null);
 
     const rtlSafeIndex = useCallback(
         (i: number): number => (isAndroidRTL ? props.slides.length - 1 - i : i),
@@ -86,6 +90,7 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement
         (pageNum: number, animated = true) => {
             setActiveIndex(pageNum);
             if (flashList && flashList.current) {
+                pendingScrollTarget.current = pageNum;
                 flashList.current.scrollToOffset({
                     offset: rtlSafeIndex(pageNum) * width,
                     animated
@@ -324,6 +329,10 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement
 
     const onScrollBeginDrag = useCallback(() => {
         isUserDragging.current = true;
+        // The user takes over from here, so any programmatic scroll still in flight no
+        // longer describes where the list is heading. Clearing the target also keeps it
+        // from latching when a scroll never reports a momentum end of its own.
+        pendingScrollTarget.current = null;
     }, []);
 
     const onMomentumScrollEnd = useCallback(
@@ -336,6 +345,20 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement
             }
             const offset = event.nativeEvent.contentOffset.x;
             const newIndex = rtlSafeIndex(Math.round(offset / width));
+
+            // While a programmatic scroll is in flight the list can report a momentum end
+            // for the position it is leaving rather than the one it is heading to. Trusting
+            // that offset rewrites activeIndex to a slide that is not on screen, and the
+            // drag flag cannot tell the two apart because a fling reports momentum without
+            // a fresh drag. Anything that disagrees with the requested slide is stale.
+            const pendingTarget = pendingScrollTarget.current;
+            if (pendingTarget !== null) {
+                if (newIndex === pendingTarget) {
+                    pendingScrollTarget.current = null;
+                }
+                return;
+            }
+
             if (newIndex === activeIndex) {
                 return;
             }

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

@@ -123,6 +123,84 @@ describe("SwipeableContainer remount behaviour", () => {
         expect(activeSlide.setValue).toHaveBeenCalledWith(new Big(3));
     });
 
+    it("keeps the slide Next moved to when a stale momentum event reports the old offset", () => {
+        // Reproduces the Android e2e failure: after remounting on slide 2 the widget scrolls
+        // to slide 3, then the list reports a momentum end for the offset it was leaving.
+        const { getByTestId, activeSlide, onSlideChange } = setup(2);
+
+        // A drag that settles without a momentum event of its own — the initial positioning
+        // scroll produces one on device — leaves the widget believing a drag is in progress.
+        act(() => {
+            fireEvent(getByTestId("intro"), "scrollBeginDrag", {});
+        });
+
+        fireEvent.press(getByTestId("intro$buttonNext"));
+        expect(activeSlide.setValue).toHaveBeenLastCalledWith(new Big(3));
+
+        act(() => {
+            fireEvent(getByTestId("intro"), "momentumScrollEnd", {
+                nativeEvent: { contentOffset: { x: 0 } }
+            });
+        });
+
+        // The stale offset must not drag the attribute back to slide 1 or report a change.
+        expect(activeSlide.setValue).toHaveBeenLastCalledWith(new Big(3));
+        expect(onSlideChange).toHaveBeenCalledTimes(1);
+        expect(onSlideChange).toHaveBeenCalledWith(2, 1);
+
+        // Slide 3 is the last slide, so the pagination still offers Done rather than
+        // falling back to the first-slide buttons.
+        expect(getByTestId("intro$buttonDone")).toBeTruthy();
+
+        // Previous moves relative to the slide that is actually on screen.
+        fireEvent.press(getByTestId("intro$buttonPrevious"));
+        expect(activeSlide.setValue).toHaveBeenLastCalledWith(new Big(2));
+    });
+
+    it("still reports a user swipe after a programmatic scroll has settled", () => {
+        const { getByTestId, activeSlide, onSlideChange } = setup(2);
+
+        fireEvent.press(getByTestId("intro$buttonNext"));
+        onSlideChange.mockClear();
+
+        // The programmatic scroll to slide 3 lands.
+        act(() => {
+            fireEvent(getByTestId("intro"), "momentumScrollEnd", {
+                nativeEvent: { contentOffset: { x: 2 * WIDTH } }
+            });
+        });
+
+        // The user then swipes back to slide 2, which must be reported.
+        act(() => {
+            fireEvent(getByTestId("intro"), "scrollBeginDrag", {});
+            fireEvent(getByTestId("intro"), "momentumScrollEnd", {
+                nativeEvent: { contentOffset: { x: WIDTH } }
+            });
+        });
+
+        expect(onSlideChange).toHaveBeenCalledWith(1, 2);
+        expect(activeSlide.setValue).toHaveBeenLastCalledWith(new Big(2));
+    });
+
+    it("reports a user swipe that interrupts an in-flight programmatic scroll", () => {
+        const { getByTestId, activeSlide, onSlideChange } = setup(2);
+
+        fireEvent.press(getByTestId("intro$buttonNext"));
+        onSlideChange.mockClear();
+
+        // The user grabs the list before the scroll to slide 3 settles and swipes back to
+        // slide 1. Taking over invalidates the pending target, so this must be reported.
+        act(() => {
+            fireEvent(getByTestId("intro"), "scrollBeginDrag", {});
+            fireEvent(getByTestId("intro"), "momentumScrollEnd", {
+                nativeEvent: { contentOffset: { x: 0 } }
+            });
+        });
+
+        expect(onSlideChange).toHaveBeenCalledWith(0, 2);
+        expect(activeSlide.setValue).toHaveBeenLastCalledWith(new Big(1));
+    });
+
     it("ignores a stale programmatic scroll that reports the pre-scroll offset", () => {
         const { getByTestId, activeSlide, onSlideChange } = setup(2);