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

vibhor-d11 · 2024-03-13T08:25:43Z

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.

Platform

Packages

Environment

[] I've removed the packages that I don't use

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

The text was updated successfully, but these errors were encountered:

github-actions · 2024-03-13T08:25:56Z

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:

Expo Snack
TypeScript Playground
GitHub repo under your username

A snack link is preferred since it's the easiest way to both create and share a repro. If it's not possible to create a repro using a snack, link to a GitHub repo under your username is a good alternative. Don't link to a branch or specific file etc. as it won't be detected.

Try to keep the repro as small as possible by narrowing down the minimal amount of code needed to reproduce the issue. Don't link to your entire project or a project containing code unrelated to the issue. See "How to create a Minimal, Reproducible Example" for more information.

You can edit your original issue to include a link to the repro, or leave it as a comment. The issue will be closed automatically after a while if you don't provide a repro.

github-actions · 2024-03-13T08:25:57Z

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

@react-navigation/native (found: 6.1.7, latest: 6.1.16)
@react-navigation/bottom-tabs (found: 6.5.1, latest: 6.5.19)
@react-navigation/material-top-tabs (found: 6.2.1, latest: 6.6.12)
@react-navigation/stack (found: 6.2.1, latest: 6.3.28)
react-native-tab-view (found: 3.1.1, latest: 3.5.2)

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

hurshore · 2024-04-03T21:19:27Z

@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 · 2024-04-15T08:43:15Z

@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 · 2024-04-30T13:00:32Z

I am going through the same situation, with over 42 thousand errors in a short period.

Updated:
Users: 6.3k
Events: 21k

lucasoliveiraMM · 2024-05-02T11:42:34Z

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

vibhor-d11 added the bug label Mar 13, 2024

github-actions bot added package:react-native-tab-view platform:android labels Mar 13, 2024

github-actions bot added the needs repro label Mar 13, 2024

vibhor-d11 mentioned this issue Apr 15, 2024

feat: added support for switch native driver usage in react native ta… #11866

Open

lucasoliveiraMM mentioned this issue May 2, 2024

Android App Crash with Animated node with tag (child) [xxxx] does not exists facebook/react-native#37267

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

vibhor-d11 commented Mar 13, 2024 •

edited

github-actions bot commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

hurshore commented Apr 3, 2024

vibhor-d11 commented Apr 15, 2024 •

edited

lucasoliveiraw00 commented Apr 30, 2024 •

edited

lucasoliveiraMM commented May 2, 2024 •

edited

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

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

Comments

vibhor-d11 commented Mar 13, 2024 • edited

Current behavior

Expected behavior

Reproduction

Platform

Packages

Environment

github-actions bot commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

hurshore commented Apr 3, 2024

vibhor-d11 commented Apr 15, 2024 • edited

lucasoliveiraw00 commented Apr 30, 2024 • edited

lucasoliveiraMM commented May 2, 2024 • edited

vibhor-d11 commented Mar 13, 2024 •

edited

vibhor-d11 commented Apr 15, 2024 •

edited

lucasoliveiraw00 commented Apr 30, 2024 •

edited

lucasoliveiraMM commented May 2, 2024 •

edited