[iOS][5.4.2...5.4.6] Crash when rapidly switching pages

Environment

• Example app on master

System:
    OS: macOS 11.5
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 655.26 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node
    Yarn: Not Found
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK:
      API Levels: 29, 31
      Build Tools: 29.0.3, 31.0.0
      System Images: android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7678000
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.4 => 0.63.4
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Description

Application crashes when rapidly switching pages, with the following error: Unexpected view controller: <UIViewController: 0x7f983a539850>.

As far as I can tell it dates back to version 5.4.2. Prior to that, this did not happen. It’s surprisingly easy to trigger on a real device.

https://user-images.githubusercontent.com/2244710/135704139-92179925-dcc2-4918-b0a7-f4f7ba8402b8.mov

Reproducible Demo

• Open the example app.
• Remove the Alert.alert() call on OnPageSelectedExample.tsx so you don’t get artificial pauses.
• Run, and rapidly switch pages in the corresponding example.
• 💥

[wbercx]

From what I’ve been reading, it’s a bug in UIPageViewController that’s been there since before iOS 8.

In scroll mode, it keeps an internal cache of the pages it is transitioning between. If you switch pages while it’s already animating to another, you can end up selecting a page that is not in its cache, leading to the “Unexpected view controller” crash.

In curl mode it doesn’t do any precaching, but the animation is ugly.

From what I’ve gathered some people:

• Avoid using UIPageViewController altogether, instead opting for UICollectionView (and rolling their own animations?);
• Implement workarounds to force it to clear its internal cache (e.g. setting dataSet = nil and then back to an acceptable state just before transitioning to another view controller);
• Transition to other pages asynchronously.

I’m no iOS dev, but I tried to implement every workaround I could find to no avail. I worked around it by:

1. only allowing one animation to run at any point in time.
2. only animating the last page transition. So if you’re jumping from page 1 to page 5, it will instantly jump to page 4 and then animate to page 5. In my app, that isn’t terribly obvious, but your mileage may vary.

For those interested, here’s the patch I am using with patch-package and react-native-pager-view@5.4.6:

diff --git a/node_modules/react-native-pager-view/ios/ReactNativePageView.m b/node_modules/react-native-pager-view/ios/ReactNativePageView.m
index 78f266b..c8abb4f 100644
--- a/node_modules/react-native-pager-view/ios/ReactNativePageView.m
+++ b/node_modules/react-native-pager-view/ios/ReactNativePageView.m
@@ -20,6 +20,7 @@ @interface ReactNativePageView () <UIPageViewControllerDataSource, UIPageViewCon
 
 @property(nonatomic, strong) NSHashTable<UIViewController *> *cachedControllers;
 @property (nonatomic, assign) CGPoint lastContentOffset;
+@property(nonatomic, assign) BOOL animating;
 
 - (void)goTo:(NSInteger)index animated:(BOOL)animated;
 - (void)shouldScroll:(BOOL)scrollEnabled;
@@ -175,6 +176,10 @@ - (void)setReactViewControllers:(NSInteger)index
     __weak ReactNativePageView *weakSelf = self;
     uint16_t coalescingKey = _coalescingKey++;
 
+    if (animated == YES) {
+        self.animating = YES;
+    }
+    
     [self.reactPageViewController setViewControllers:@[controller]
                                            direction:direction
                                             animated:animated
@@ -183,6 +188,10 @@ - (void)setReactViewControllers:(NSInteger)index
         strongSelf.currentIndex = index;
         strongSelf.currentView = controller.view;
 
+        if (finished) {
+            strongSelf.animating = NO;
+        }
+        
         if (strongSelf.eventDispatcher) {
             if (strongSelf.lastReportedIndex != strongSelf.currentIndex) {
                 if (shouldCallOnPageSelected) {
@@ -240,25 +249,19 @@ - (void)goTo:(NSInteger)index animated:(BOOL)animated {
     long diff = labs(index - _currentIndex);
     
     if (isForward && diff > 0) {
-        for (NSInteger i=_currentIndex; i<=index; i++) {
-            if (i == _currentIndex) {
-                continue;
-            }
-            [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index];
+        for (NSInteger i=_currentIndex+1; i<=index; i++) {
+            [self goToViewController:i direction:direction animated:(!self.animating && i == index) shouldCallOnPageSelected: i == index];
         }
     }
     
     if (!isForward && diff > 0) {
-        for (NSInteger i=_currentIndex; i>=index; i--) {
-            if (index == _currentIndex) {
-                continue;
-            }
-            [self goToViewController:i direction:direction animated:animated shouldCallOnPageSelected: i == index];
+        for (NSInteger i=_currentIndex-1; i>=index; i--) {
+            [self goToViewController:i direction:direction animated:(!self.animating && i == index) shouldCallOnPageSelected: i == index];
         }
     }
     
     if (diff == 0) {
-        [self goToViewController:index direction:direction animated:animated shouldCallOnPageSelected:YES];
+        [self goToViewController:index direction:direction animated:NO shouldCallOnPageSelected:YES];
     }
 }

[dorapax-lab]

I am facing the same issue when using Material-top-tabs.