React-native-pager-view: Scrapped or attached views may not be recycled. isScrap:false isAttached:true

[AlexSmirnov9107]

Bug report

Summary

java.lang.IllegalArgumentException: Scrapped or attached views may not be recycled. isScrap:false isAttached:true com.reactnative.community.viewpager2.widget.ViewPager2$RecyclerViewImpl{a137042 VFED..... ......ID 0,0-1080,1369 #1}, adapter:com.reactnativecommunity.viewpager.FragmentAdapter@b871853, layout:com.reactnative.community.viewpager2.widget.ViewPager2$LinearLayoutManagerImpl@520d590, context:com.facebook.react.uimanager.ThemedReactContext@7113f48
        at androidx.recyclerview.widget.RecyclerView$Recycler.recycleViewHolderInternal(RecyclerView.java:6433)
        at androidx.recyclerview.widget.RecyclerView.removeAnimatingView(RecyclerView.java:1456)
        at androidx.recyclerview.widget.RecyclerView$ItemAnimatorRestoreListener.onAnimationFinished(RecyclerView.java:12699)
        at androidx.recyclerview.widget.RecyclerView$ItemAnimator.dispatchAnimationFinished(RecyclerView.java:13199)
        at androidx.recyclerview.widget.SimpleItemAnimator.dispatchRemoveFinished(SimpleItemAnimator.java:277)
        at androidx.recyclerview.widget.DefaultItemAnimator$4.onAnimationEnd(DefaultItemAnimator.java:213)
        at android.view.ViewPropertyAnimator$AnimatorEventListener.onAnimationEnd(ViewPropertyAnimator.java:1111)
        at android.animation.Animator$AnimatorListener.onAnimationEnd(Animator.java:554)
        at android.animation.ValueAnimator.endAnimation(ValueAnimator.java:1242)
        at android.animation.ValueAnimator.doAnimationFrame(ValueAnimator.java:1484)
        at android.animation.AnimationHandler.doAnimationFrame(AnimationHandler.java:146)
        at android.animation.AnimationHandler.access$100(AnimationHandler.java:37)
        at android.animation.AnimationHandler$1.doFrame(AnimationHandler.java:54)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:964)
        at android.view.Choreographer.doCallbacks(Choreographer.java:790)
        at android.view.Choreographer.doFrame(Choreographer.java:721)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:951)
        at android.os.Handler.handleCallback(Handler.java:883)
        at android.os.Handler.dispatchMessage(Handler.java:100)
        at android.os.Looper.loop(Looper.java:214)
        at android.app.ActivityThread.main(ActivityThread.java:7356)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)

Environment info

react-native info output:

System:
    OS: macOS 10.15.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 24.62 GB / 64.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.11.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6308749
    Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
  Languages:
    Java: 13.0.1 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.0 => 16.13.0 
    react-native: ^0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

Library version: x.x.x

Steps to reproduce

1. Home -> OrganizationsList
   2.Going back from OrganizationsList -> Home

export default createNativeStackNavigator(
  {
    Home: HomeScreen,
    OrganizationsList: OrganizationsListScreen,
    OrganizationDetail: OrganizationDetailScreen,
    Rating: RatingScreen,
    Feedbacks: FeedBacksScreen,
    Provider: ProviderScreen,
    WebBrowser: WebBrowserScreen,
    SplashScreens: SplashScreens,
  },
  {
    initialRouteName: 'Home',
    headerMode: 'none',
  },
);

[troZee]

I assume, this issue does not exist on 3.3.0, so as workaround you can use this version.

I found some solutions here: https://code.briarproject.org/briar/briar/issues/1363
But I would like to test those solutions. Could you provide a reproducible repository ?

[dsznajder]

Hi @troZee :) I'm not sure if it's related but I was able to reproduce it with native-stack from react-native-screens.

[troZee]

Hi @troZee :) I'm not sure if it's related but I was able to reproduce it with native-stack from react-native-screens.

Hey, could you provide a reproducible code ? React navigation uses react native screen under the hood, so probably it is somehow related :D

[chirag04]

seeing this in our app as well on v4. will try and gather more information soon. cc @SRandazzo

[jong-hui]

I have same problem in react-navigation v5 (native-stack)

[radko93]

If you can manage navigation yourself then you can unmount the view pager before navigating. Unfortunately, it's not possible to do it like this always. Do you still need repro for that?

[troZee]

Do you still need repro for that?

Yes, please

[fadiquader]

same here, it happens when pressing back. I'm using react-navigation + react-native-screens.

[osdnk]

I think this bug is quite urgent. It happens when we have viewpager inside native-stack i.e. creatweNativeStackNavigator

[LRNZ09]

I also have this problem with ViewPager v4.1.6 and react-native-screens v2.10.1 using a native stack

[thanhdevapp]

same problem Android when user viewpager and creatweNativeStackNavigator

[jdconley]

I also have this issue with a new app on Android as well. I see it when I render a different set of screens inside a createNativeStackNavigator, where the screen that has the ViewPager as a child is no longer in the native stack navigator. I'm on 4.1.6, react-native-screens 2.11.0, react-native 0.63.x...

Anyone have a workaround?

Edit: As others have said downgrading to 3.x does work, but was hoping someone figured it out on 4.x. 😄

[troZee]

Fix has been applied https://github.com/callstack/react-native-viewpager/pull/271

[domasn]

Seems that the issue is still there when using v6.0.0-rc.0 with lazy page loading 😕

App crashes after navigating back or going forward from a screen with a LazyPagerView inside a native stack with the following log:

java.lang.IllegalArgumentException: Scrapped or attached views may not be recycled. isScrap:false isAttached:true androidx.viewpager2.widget.ViewPager2$RecyclerViewImpl{fb07b3f VFED..... ......ID 0,0-1080,2142 #1}, adapter:com.reactnativepagerview.FragmentAdapter@56bdc0c, layout:androidx.viewpager2.widget.ViewPager2$LinearLayoutManagerImpl@9408955, context:com.facebook.react.uimanager.ThemedReactContext@692ceaf
        at androidx.recyclerview.widget.RecyclerView$Recycler.recycleViewHolderInternal(RecyclerView.java:6614)
        at androidx.recyclerview.widget.RecyclerView.removeAnimatingView(RecyclerView.java:1525)
        at androidx.recyclerview.widget.RecyclerView$ItemAnimatorRestoreListener.onAnimationFinished(RecyclerView.java:13109)
        at androidx.recyclerview.widget.RecyclerView$ItemAnimator.dispatchAnimationFinished(RecyclerView.java:13611)
        at androidx.recyclerview.widget.SimpleItemAnimator.dispatchRemoveFinished(SimpleItemAnimator.java:277)
        at androidx.recyclerview.widget.DefaultItemAnimator$4.onAnimationEnd(DefaultItemAnimator.java:213)
        at android.view.ViewPropertyAnimator$AnimatorEventListener.onAnimationEnd(ViewPropertyAnimator.java:1111)
        at android.animation.Animator$AnimatorListener.onAnimationEnd(Animator.java:554)
        at android.animation.ValueAnimator.endAnimation(ValueAnimator.java:1250)
        at android.animation.ValueAnimator.doAnimationFrame(ValueAnimator.java:1492)
        at android.animation.AnimationHandler.doAnimationFrame(AnimationHandler.java:146)
        at android.animation.AnimationHandler.access$100(AnimationHandler.java:37)
        at android.animation.AnimationHandler$1.doFrame(AnimationHandler.java:54)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:970)
        at android.view.Choreographer.doCallbacks(Choreographer.java:796)
        at android.view.Choreographer.doFrame(Choreographer.java:727)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:957)
        at android.os.Handler.handleCallback(Handler.java:938)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:223)
        at android.app.ActivityThread.main(ActivityThread.java:7656)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)