react-navigation icon indicating copy to clipboard operation
react-navigation copied to clipboard
verified publisher icon react-navigation

Going back in native stack cause crash on Android 7 if screen contains FlatList with refresh props

Open Zao721 opened this issue 1 year ago • 6 comments

Current behavior

I have such structure: Home -> Details

When details screen contains List components (FlatList, VirtualizedList) with refresh props such as onRefresh, refreshing or refreshControl = <RefreshController...> (React Native component) going back causes app crash and it happens only on Android 7. Other Android versions work as expected.

https://github.com/user-attachments/assets/ecfc2b55-89d6-4af0-8ed4-5e25243b8258

Such behavior can be reproduced as with system back button as well as with back button in ui.

Disabling animations does not help at all

Can be reproduced on emulators and real devices

I have tried to reproduce it in project without React navigation, just in bare React native project - there is no problem with unmounting such structure

Expected behavior

Going back works on all platforms without problems

Reproduction

https://github.com/Zao721/CrashOnGoingBackAndroid7

Platform

  • [x] Android
  • [ ] iOS
  • [ ] Web
  • [ ] Windows
  • [ ] MacOS

Packages

  • [ ] @react-navigation/bottom-tabs
  • [ ] @react-navigation/drawer
  • [ ] @react-navigation/material-top-tabs
  • [ ] @react-navigation/stack
  • [x] @react-navigation/native-stack
  • [ ] react-native-drawer-layout
  • [ ] react-native-tab-view

Environment

  • [x] I've removed the packages that I don't use
package version
@react-navigation/native ^7.0.18
@react-navigation/native-stack ^7.3.2
react-native-screens ^4.9.2
react-native-safe-area-context ^5.3.0
react-native 0.78.1 (can be reproduced with RN 0.77.1)
node 23.3.0
npm or yarn 11.2.0

Zao721 avatar Mar 25 '25 08:03 Zao721

In logcat I have two errors:

  • Exception in HostFunction: android.view.ViewRootImpl$CalledFromWrongThreadException: Only the original thread that created a view hierarchy can touch its views.
  • java.lang.IndexOutOfBoundsException: getChildDrawingOrder() returned invalid index 1 (child count is 1)

Zao721 avatar Mar 25 '25 08:03 Zao721

Hey! Thanks for opening the issue. Seems that this issue is related to react-native-screens library which is a dependency of React Navigation. Can you also post your issue in this repo so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it.

github-actions[bot] avatar Mar 25 '25 13:03 github-actions[bot]

*Android I test android 10 crash app with @react-navigation/native-stack : 7.3.3 Screen use FlatList or ScrollView when call goBack(). it's error index. When i change @react-navigation/stack. It work as expected. but when navigate screen and go back it white blank screen. Then it's show current screen *IOS ios work as expected.

Image

ZcosAka avatar Mar 31 '25 03:03 ZcosAka

Error Exception in HostFunction: android.view.ViewRootImpl$CalledFromWrongThreadException: Only the original thread that created a view hierarchy can touch its views. (native) completeRoot node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.js:6090:16 updateHostContainer node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.js:6180:27 completeWork node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.js:8298:27 completeUnitOfWork node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.js:8189:36 performUnitOfWork node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.js:8080:53 workLoopSync node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.js:8060:18 renderRootSync node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.js:1924:47 flushSyncWorkAcrossRoots_impl node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.js:2015:31 processRootScheduleInMicrotask node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-prod.js:2093:14 anonymous

RodrigoAngeloValentini avatar Apr 16 '25 13:04 RodrigoAngeloValentini

Maybe is related to https://github.com/software-mansion/react-native-screens/issues/2530 I had trouble with goBack() on some Android devices. Updating to React Native 0.77.2 and react-native-screens ~4.7.0 fixed it.

camilossantos2809 avatar Apr 16 '25 13:04 camilossantos2809

@camilossantos2809 I have try using react-native-screens 4.10.0 without any result. But I will try RN 0.77.2

Zao721 avatar Apr 16 '25 13:04 Zao721

facing the same issue.

anandabhi04 avatar Jul 22 '25 16:07 anandabhi04

I am having the same issue on Android Emulator 7.1.1. And yes, my current screen has FlatList with Refresh Props.

Below is the stack trace:

console.js:661 Error: Exception in HostFunction: android.view.ViewRootImpl$CalledFromWrongThreadException: Only the original thread that created a view hierarchy can touch its views.
	at android.view.ViewRootImpl.checkThread(ViewRootImpl.java:6891)
	at android.view.ViewRootImpl.invalidateChildInParent(ViewRootImpl.java:1083)
	at android.view.ViewGroup.invalidateChild(ViewGroup.java:5205)
	at android.view.View.invalidateInternal(View.java:13656)
	at android.view.View.invalidate(View.java:13620)
	at android.view.ViewGroup.addView(ViewGroup.java:4257)
	at android.view.ViewGroup.addView(ViewGroup.java:4198)
	at com.swmansion.rnscreens.Screen.startTransitionRecursive(Screen.kt:501)
	at com.swmansion.rnscreens.Screen.startTransitionRecursive(Screen.kt:513)
	at com.swmansion.rnscreens.Screen.startTransitionRecursive(Screen.kt:513)
	at com.swmansion.rnscreens.Screen.startTransitionRecursive(Screen.kt:513)
	at com.swmansion.rnscreens.Screen.startRemovalTransition(Screen.kt:463)
	at com.swmansion.rnscreens.NativeProxy.notifyScreenRemoved(NativeProxy.kt:64)
	at com.facebook.jni.NativeRunnable.run(Native Method)
	at android.os.Handler.handleCallback(Handler.java:751)
	at android.os.Handler.dispatchMessage(Handler.java:95)
	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.kt:21)
	at android.os.Looper.loop(Looper.java:154)
	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$Companion.startNewBackgroundThread$lambda$1(MessageQueueThreadImpl.kt:175)
	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$Companion.$r8$lambda$ldnZnqelhYFctGaUKkOKYj5rxo4(MessageQueueThreadImpl.kt)
	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$Companion$$ExternalSyntheticLambda0.run(D8$$SyntheticClass:0)
	at java.lang.Thread.run(Thread.java:761)

    at completeRoot (native)
    at updateHostContainer (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&min…ly=false&runModule=true&excludeSource=true&sourcePaths=url-server:15693:21)
    at completeWork (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&min…y=false&runModule=true&excludeSource=true&sourcePaths=url-server:15751:640)
    at runWithFiberInDEV (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&min…y=false&runModule=true&excludeSource=true&sourcePaths=url-server:11582:135)
    at completeUnitOfWork (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&min…ly=false&runModule=true&excludeSource=true&sourcePaths=url-server:17348:36)
    at performUnitOfWork (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&min…ly=false&runModule=true&excludeSource=true&sourcePaths=url-server:17286:44)
    at workLoopSync (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&min…ly=false&runModule=true&excludeSource=true&sourcePaths=url-server:17177:57)
    at renderRootSync (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&min…ly=false&runModule=true&excludeSource=true&sourcePaths=url-server:17161:21)
    at performWorkOnRoot (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&min…ly=false&runModule=true&excludeSource=true&sourcePaths=url-server:16909:90)
    at performSyncWorkOnRoot (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&min…ly=false&runModule=true&excludeSource=true&sourcePaths=url-server:12931:24)
    at flushSyncWorkAcrossRoots_impl (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&min…y=false&runModule=true&excludeSource=true&sourcePaths=url-server:12851:329)
    at processRootScheduleInMicrotask (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&min…ly=false&runModule=true&excludeSource=true&sourcePaths=url-server:12870:36)
    at anonymous (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&min…y=false&runModule=true&excludeSource=true&sourcePaths=url-server:12942:184)

This is my react native packages info

"@react-navigation/native": "7.1.17",
"@react-navigation/native-stack": "7.3.26",
"react": "19.1.0",
"react-native": "0.81.4",
"react-native-screens": "4.16.0",

Please let me know if there is any work around. Many thanks!

LuongTruong avatar Sep 18 '25 09:09 LuongTruong

Hey guys, I found a workaround here. Hope it can help.

LuongTruong avatar Sep 19 '25 06:09 LuongTruong

Its working without patch!

"react-native-screens": "4.17.1",

astrahov avatar Oct 17 '25 12:10 astrahov