UI freezing issues with dynamic page list

[samducker]

Environment

Latest expo SDK with expo router, react native 0.74.5, react native pager view latest, zod latest, and react query latest. My app is cross platform but I've currently only been testing the issues in iOS.

Description

Summary I'm developing a diary app using react-native-pager-view, expo-router, and react-query with infinite horizontal scrolling. I'm encountering UI freezes and inconsistent animations after multiple page transitions.

Current Issues

UI freezes after several swipes, requiring app restart. Page transition animations stop working after multiple navigations.

Expected Behavior

Smooth infinite scrolling without freezes. Consistent animations across all page transitions. Efficient data fetching for current and adjacent pages

Reproducible Demo Repository

https://github.com/houseofduck/expo-diary-pager-demo

[MrRefactor]

Looking into this.

[MrRefactor]

hey @samducker in the repository you provided, there is 6.3.0 version of pager, please try using latest

[samducker]

The issues are the same @MrRefactor react-native-pager-view still seems to have lots of UI freezing with dynamic loading.

[TowhidKashem]

hey @samducker were you able to figure out a solution to this?

hey @MrRefactor, I can confirm that this is still an issue with the latest version 6.9.1.

---

Edit:

I found out that the pager/screen doesn't actually freeze, you just can't swipe but if you add a button for example that does it programmatically it keeps working if you press it after the "freeze" and keeps going to the next slide and the next and so on... So now I'm trying to see if I can detect when it stops and come up with some hacky work-around but thought I'd mention in case it helps the maintainers with debugging...

[UchennaOkafor]

hey @samducker were you able to figure out a solution to this?

hey @MrRefactor, I can confirm that this is still an issue with the latest version 6.9.1.

Edit:

I found out that the pager/screen doesn't actually freeze, you just can't swipe but if you add a button for example that does it programmatically it keeps working if you press it after the "freeze" and keeps going to the next slide and the next and so on... So now I'm trying to see if I can detect when it stops and come up with some hacky work-around but thought I'd mention in case it helps the maintainers with debugging...

Did you end up finding a solution for this?

[HarshitMadhav]

any workaround or solution to this? facing this issue in production

[TowhidKashem]

hey @samducker were you able to figure out a solution to this? hey @MrRefactor, I can confirm that this is still an issue with the latest version 6.9.1. Edit: I found out that the pager/screen doesn't actually freeze, you just can't swipe but if you add a button for example that does it programmatically it keeps working if you press it after the "freeze" and keeps going to the next slide and the next and so on... So now I'm trying to see if I can detect when it stops and come up with some hacky work-around but thought I'd mention in case it helps the maintainers with debugging...

Did you end up finding a solution for this?

I initially did make a really hacky "fix" but it didn't work very well so I ended up just implementing my own lazy loaded solution using https://github.com/dohooo/react-native-reanimated-carousel. It's not a native pager module like this one but it works pretty well.

[Kiryl-Sadko]

I’m seeing this on RN 0.81.5 with react-native-pager-view 6.9.1.

I believe this is a race condition. On iOS I can reproduce it by swiping very fast: a delayed setPageWithoutAnimation sometimes runs while the pager is still settling or already unmounted. Locking the pager during the reset and clearing the timeout fixed it for me.

What fixed it for me The key was to make sure the reset can’t re-enter and can’t fire after unmount:

• cancel the timeout on unmount
• temporarily disable swiping while the reset is pending

const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const lockedRef = useRef(false);
const [locked, setLocked] = useState(false);

const onPageSelected = useCallback(() => {
  if (lockedRef.current) {
    return;
  }

  lockedRef.current = true;
  setLocked(true);

  if (resetTimeoutRef.current) {
    clearTimeout(resetTimeoutRef.current);
  }

  resetTimeoutRef.current = setTimeout(() => {
    pagerRef.current?.setPageWithoutAnimation(1);
    lockedRef.current = false;
    setLocked(false);
    resetTimeoutRef.current = null;
  }, 50);
}, []);

<PagerView scrollEnabled={!locked} onPageSelected={onPageSelected} />

After adding this guard I haven’t been able to reproduce the issue, even with very fast swipes.