Pager view causing crash in the app for some users in production

[fawadmahmoodwashmen]

Environment

iOS 18.4.1 react native 0.78.2 react-native-pager-view 6.7.1

Description

Hello, We are experiencing issue with our production app where Sentry reporting crashes for some users, it is happening a few events each day & we are having tough time understanding the root cause. Can you please help us on what may have causing this?

EXC_BAD_ACCESS Exception 1, Code 1, Subcode 0 > Attempted to dereference null pointer.

Reproducible Demo

• It happens randomly & has no specific scenario I can share so far, in some devices & some sessions the application crashes. I will post a complete Sentry stack-trace with in this thread.

[alex-gale]

Getting this in production as well, same exact stack trace. Did you find a fix? It happens when unmounting the pager view

[MrRefactor]

Should be fixed in 6.8.1

[mikebouwmans]

Doesn't seem to be fixed for me in 6.8.1

[fawadmahmoodwashmen]

@mikebouwmans @alex-gale @MrRefactor Hello, anybody struggling with this issue please try this patch, this solved the issue for me in an production app.

react-native-pager-view+6.8.0.patch

[mikebouwmans]

@fawadmahmoodwashmen that's quite a big patch so not able to test it.

[mikebouwmans]

Hi @fawadmahmoodwashmen , I’ve identified the culprit: the issue occurs when the pager view is still scrolling during unmounting. @MrRefactor , please let me know if you need any additional details to work on a fix.

[MrRefactor]

Hi @fawadmahmoodwashmen , I’ve identified the culprit: the issue occurs when the pager view is still scrolling during unmounting. @MrRefactor , please let me know if you need any additional details to work on a fix.

Are you able to reproduce that in example app?

[rohit9625]

What is the status of this issue?

[bestofaIl]

@rohit9625 still exists react-native-pager-view@^6.8.1: version "6.8.1" think it related to https://github.com/callstack/react-native-pager-view/issues/458

[rohit9625]

How we are supposed to fix this issue? I think it should be handled in the upstream.

[Dokome]

same issue，only crash for production

[vshkl]

Got something similar on my end. Upgrading to 7.0.2 (the latest version at the moment) did not help in my case, but upgrading to 7.0.2 and applying this patch to did the trick, it seems.

diff --git a/ios/RNCPagerViewComponentView.mm b/ios/RNCPagerViewComponentView.mm
index cc0a1fa8e98f9ed4dca2b3ee9c6c320d72a25e7d..20fdde270dd404050234d34c9aaf9a35deeae538 100644
--- a/ios/RNCPagerViewComponentView.mm
+++ b/ios/RNCPagerViewComponentView.mm
@@ -127,6 +127,7 @@ using namespace facebook::react;
 
 
 -(void)prepareForRecycle {
+    scrollView.delegate = nil;
     [super prepareForRecycle];
     _nativePageViewController = nil;
     _currentIndex = -1;

I was not able to reliably reproduce this bug locally, but this synthetic test screen helped:

import { useCallback, useEffect, useRef, useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

import PagerView from 'react-native-pager-view';

export default function PagerStressTestScreen() {
  const [isRunning, setIsRunning] = useState(false);
  const [showPager, setShowPager] = useState(true);
  const [cycleCount, setCycleCount] = useState(0);

  const pagerRef = useRef<PagerView>(null);
  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const pageIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const onStartStressTest = useCallback(() => {
    setIsRunning(true);
    setCycleCount(0);

    intervalRef.current = setInterval(() => {
      setShowPager(prev => !prev);
      setCycleCount(c => c + 1);
    }, 150);

    pageIntervalRef.current = setInterval(() => {
      if (pagerRef.current) {
        const randomPage = Math.floor(Math.random() * 5);
        pagerRef.current.setPage(randomPage);
      }
    }, 50);
  }, []);

  const onStopStressTest = useCallback(() => {
    setIsRunning(false);
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
    if (pageIntervalRef.current) {
      clearInterval(pageIntervalRef.current);
      pageIntervalRef.current = null;
    }
  }, []);

  useEffect(() => {
    return () => {
      onStopStressTest();
    };
  }, [onStopStressTest]);

  return (
    <View style={styles.container}>
      <Text style={styles.cycles}>
        Cycles:
        {cycleCount}
      </Text>

      <View style={styles.buttons}>
        <Button disabled={isRunning} title="Start" onPress={onStartStressTest} />
        <Button disabled={!isRunning} title="Stop" onPress={onStopStressTest} />
      </View>

      {showPager ? (
        <PagerView ref={pagerRef} initialPage={0} style={styles.pager}>
          {[0, 1, 2, 3, 4].map(i => (
            <View key={i} style={styles.page}>
              <Text style={styles.pageText}>
                Page
                {i + 1}
              </Text>
            </View>
          ))}
        </PagerView>
      ) : (
        <View style={styles.placeholder}>
          <Text>Pager unmounted</Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  cycles: {
    fontSize: 16,
    marginBottom: 8,
  },
  buttons: {
    flexDirection: 'row',
    gap: 12,
    marginBottom: 16,
  },
  pager: {
    flex: 1,
    backgroundColor: 'white',
  },
  page: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  pageText: {
    fontSize: 32,
    fontWeight: 'bold',
  },
  placeholder: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },
});

Hope this helps someone.