Crash when navigating back from PagerView

Hello, I found a crash in my app which I was able to reproduce and trace back to PagerView.

Environment

"@react-navigation/bottom-tabs": "^6.0.0",
"@react-navigation/native": "^6.0.0",
"@react-navigation/native-stack": "^6.0.0",
"react-native-pager-view": "^5.4.1",
"react-native-screens": "~3.4.0",

Description

This bug crashed the app without an error message. Crashlytics gives me the following crashreport:

Fatal Exception: java.lang.IllegalArgumentException: Scrapped or attached views may not be recycled. isScrap:false isAttached:true b.v.b.f$m{8268e2 VFED..... ......ID 0,0-1080,2096 #3}, adapter:com.reactnativepagerview.b@447b473, layout:b.v.b.f$h@f750f30, context:com.facebook.react.uimanager.l0@5d374a0
       at androidx.recyclerview.widget.RecyclerView$v.C(:282)
       at androidx.recyclerview.widget.RecyclerView.removeAnimatingView(:22)
       at androidx.recyclerview.widget.RecyclerView$m.a(:27)
       at androidx.recyclerview.widget.RecyclerView$l.h(:7)
       at androidx.recyclerview.widget.n.G(:3)
       at androidx.recyclerview.widget.c$d.onAnimationEnd(:17)
       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:1008)
       at android.view.Choreographer.doCallbacks(Choreographer.java:809)
       at android.view.Choreographer.doFrame(Choreographer.java:740)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:995)
       at android.os.Handler.handleCallback(Handler.java:938)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loop(Looper.java:246)
       at android.app.ActivityThread.main(ActivityThread.java:8595)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:602)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1130)

It seems to be the same/ similar issue like this: https://github.com/callstack/react-native-pager-view/issues/173. The @next version does not solve the bug though and since the other issue does not seem to be maintained anymore, I created this issue.

Reproducible Demo

1. Navigate to second screen in stack with PagerView
2. Swipe to second Page in PagerView
3. Press the TabIcon of Parent TabNavigator to get back to first StackScreen

Doing this fast increases the chance of the error happening. I have to try ~10 times for the error to happen.

The video shows the bug in action. On the last frame, the app crashes. Interesting to note here is that: On the first navigation back to the Startscreen, the PagerView is still rendered and the crash does not appear. On the second time I navigate back, you can see that the PagerView ist not rendered anymore. The app then crashes.

https://user-images.githubusercontent.com/61253912/133158434-06533ec1-afe3-4c57-b3f3-2e7c0a0b3765.mp4

In the following snack, the bug is reproduced for you to test: https://snack.expo.dev/@expoco2/fatal-crash-with-pagerview

[chakrihacker]

If it’s urgent maybe put a bounty on issue. You can’t demand free work at urgent level

[troZee]

#552 solves this Bug in my case.

Thank you for checking this fix. I will check this issue later locally