search

react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.33k stars 4.98k forks source link

Crash due to useNativeDriver true for tab animations with android 12 devices #11890

Open vibhor-d11 opened 2 months ago

vibhor-d11 commented 2 months ago

Current behavior

Dear Maintainers,

I hope this message finds you well. I am writing on behalf of Dream11 to bring to your attention an issue we've encountered while using react-native-tab-view library.

Issue Overview:

Currently their is no provision to enable/disable useNativeDriver for react native tab view. For tab animations useNativeDriver is set to true i.e they run on UI thread by default. We encountered some crashes related to Animated node that occurred only on Android 12 devices and after digging into it we get to know it is related to useNativeDriver set to true for tab animations. Also their is an open issue in react-native related to this crash: Link. So we added a patch in react-native-tab-view library for disabling useNativeDriver for devices having Android 12 and that reduces the crash rate for that crash with very few instances now. We have been using this for almost a year and haven't faced any issue with our app exposed to more than 20 million users. So we though of adding support for enable/disable useNativeDriver for react-native-tab-view as a prop exposed from material-top-tabs as it internally uses react-native-tab-view

Expected behavior

Following PR addresses the fix to add optional prop useNativeDriver for material-top-tabs which internally passes it to react-native-tab-view to enable/disable useNativeDriver for tab animations.

Reproduction

Their is not defined steps to reproduce it but we have many instances of this crash on our firebase portal. Many were related to react native tab view, after adding the patch for setting useNativeDriver to false, its instances reduced to none. This is the stacktrace for the crash.

Screenshot 2024-03-18 at 2 58 12 PM

Platform

Packages

Environment

package version
@react-navigation/native 6.1.7
@react-navigation/bottom-tabs 6.5.1
@react-navigation/material-top-tabs 6.2.1
@react-navigation/stack 6.2.1
@react-navigation/native-stack 6.9.13
react-native-safe-area-context 3.3.2
react-native-screens 3.25.0
react-native-gesture-handler 2.9.0
react-native-reanimated 3.4.0
react-native-tab-view 3.1.1
react-native-pager-view 5.4.25
react-native 0.72.5
node 18
npm or yarn 1.22.19
github-actions[bot] commented 2 months ago

Hey @vibhor-d11! Thanks for opening the issue. It seems that the issue doesn't contain a link to a repro.

The best way to get attention to your issue is to provide an easy way for a developer to reproduce the issue.

You can provide a repro using any of the following:

github-actions[bot] commented 2 months ago

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

hurshore commented 1 month ago

@vibhor-d11 how did you disable useNativeDriver for android 12 devices only? Users are experiencing this issue in random parts of my app. But I think it happens when navigating to a screen. There is an open issue for it here.

This is the crash I get:

Fatal Exception: com.facebook.react.bridge.JSApplicationIllegalArgumentException: connectAnimatedNodes: Animated node with tag (child) [3851] does not exist
       at com.facebook.react.animated.NativeAnimatedNodesManager.connectAnimatedNodes(NativeAnimatedNodesManager.java:371)
       at com.facebook.react.animated.NativeAnimatedModule$16.execute(NativeAnimatedModule.java:777)
       at com.facebook.react.animated.NativeAnimatedModule$ConcurrentOperationQueue.executeBatch(NativeAnimatedModule.java:171)
       at com.facebook.react.animated.NativeAnimatedModule$3.execute(NativeAnimatedModule.java:365)
       at com.facebook.react.uimanager.UIViewOperationQueue$UIBlockOperation.execute(UIViewOperationQueue.java:579)
       at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:926)
       at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:1037)
       at com.facebook.react.uimanager.UIViewOperationQueue.-$$Nest$mflushPendingBatches()
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1097)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1036)
       at android.view.Choreographer.doCallbacks(Choreographer.java:846)
       at android.view.Choreographer.doFrame(Choreographer.java:776)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1023)
       at android.os.Handler.handleCallback(Handler.java:938)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loopOnce(Looper.java:201)
       at android.os.Looper.loop(Looper.java:288)
       at android.app.ActivityThread.main(ActivityThread.java:7986)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:553)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)
vibhor-d11 commented 1 month ago

@vibhor-d11 how did you disable useNativeDriver for android 12 devices only? Users are experiencing this issue in random parts of my app. But I think it happens when navigating to a screen. There is an open issue for it here.

This is the crash I get:

Fatal Exception: com.facebook.react.bridge.JSApplicationIllegalArgumentException: connectAnimatedNodes: Animated node with tag (child) [3851] does not exist
       at com.facebook.react.animated.NativeAnimatedNodesManager.connectAnimatedNodes(NativeAnimatedNodesManager.java:371)
       at com.facebook.react.animated.NativeAnimatedModule$16.execute(NativeAnimatedModule.java:777)
       at com.facebook.react.animated.NativeAnimatedModule$ConcurrentOperationQueue.executeBatch(NativeAnimatedModule.java:171)
       at com.facebook.react.animated.NativeAnimatedModule$3.execute(NativeAnimatedModule.java:365)
       at com.facebook.react.uimanager.UIViewOperationQueue$UIBlockOperation.execute(UIViewOperationQueue.java:579)
       at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:926)
       at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:1037)
       at com.facebook.react.uimanager.UIViewOperationQueue.-$$Nest$mflushPendingBatches()
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1097)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1036)
       at android.view.Choreographer.doCallbacks(Choreographer.java:846)
       at android.view.Choreographer.doFrame(Choreographer.java:776)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1023)
       at android.os.Handler.handleCallback(Handler.java:938)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loopOnce(Looper.java:201)
       at android.os.Looper.loop(Looper.java:288)
       at android.app.ActivityThread.main(ActivityThread.java:7986)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:553)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)

We disabled it using Platform api from react native to identify if the os is android and version is 12. Here is code snippet for same to check if android version is above 12 or not


const isAndroidVersionAbove12 = Platform.OS === 'android' && Platform.Version >= 31
lucasoliveiraw00 commented 1 month ago

I am going through the same situation, with over 42 thousand errors in a short period. 299676322-37c9957c-4a0a-48dd-9ac5-2b8c4e3089b9 Updated: Users: 6.3k Events: 21k Captura de Tela 2024-04-30 às 10 03 30

lucasoliveiraMM commented 1 month ago

The error is related to the Animated component of React Native. Wouldn't it be better to remove its usage and utilize the Animated from react-native-reanimated? After all, there's still no solution for the error in the Animated component of React Native.

Link to the issue in react-native-reanimated

@satya164

github-actions[bot] commented 13 hours ago

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

douglasjunior commented 2 hours ago

Still happening.