Android RN 0.75.3, app crashes when returning to the previous screen

[DinhHoangNgoc]

Description

When I return to the previous screen, the app crashes. I am using version RN 0.75.3. I have tested with other RN versions, and this issue occurs from version RN 0.75 onwards.

7006066363014550704.mp4

Steps to reproduce

app crashes when returning to the previous screen

Snack or a link to a repository

https://github.com/Ngoca1k15PT/AppNew

Screens version

3.34.0

React Native version

0.75.3

Platforms

Android

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

None

Build type

Debug mode

Device

Real device

Device model

Xiaomi

Acknowledgements

Yes

[hosseinmd]

I have the same issue.

[tamacroft]

same issue here

[DorianMazur]

@tamacroft @hosseinmd @DinhHoangNgoc

diff --git a/android/src/main/java/com/swmansion/rnscreens/Screen.kt b/android/src/main/java/com/swmansion/rnscreens/Screen.kt
index 1ab8594ef35bf43821a46c97ca77292c87190850..8e9d712718f385638d0d58a1f3ef144e3de6eb55 100644
--- a/android/src/main/java/com/swmansion/rnscreens/Screen.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/Screen.kt
@@ -10,13 +10,16 @@ import android.view.View
 import android.view.ViewGroup
 import android.view.WindowManager
 import android.webkit.WebView
+import android.widget.ImageView
 import androidx.core.view.children
 import androidx.fragment.app.Fragment
+import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
 import com.facebook.react.bridge.GuardedRunnable
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.UIManagerModule
+import com.facebook.react.views.scroll.ReactScrollView
 import com.swmansion.rnscreens.events.HeaderHeightChangeEvent
 
 @SuppressLint("ViewConstructor") // Only we construct this view, it is never inflated.
@@ -295,7 +298,7 @@ class Screen(
         parent?.let {
             for (i in 0 until it.childCount) {
                 val child = it.getChildAt(i)
-                if (child.javaClass.simpleName.equals("CircleImageView")) {
+                if (parent is SwipeRefreshLayout && child is ImageView) {
                     // SwipeRefreshLayout class which has CircleImageView as a child,
                     // does not handle `startViewTransition` properly.
                     // It has a custom `getChildDrawingOrder` method which returns
@@ -312,6 +315,11 @@ class Screen(
                     startTransitionRecursive(child.toolbar)
                 }
                 if (child is ViewGroup) {
+                    if (it is ReactScrollView && it.removeClippedSubviews) {
+                        for (j in 0 until child.childCount) {
+                            child.addView(View(context))
+                        }
+                    }
                     startTransitionRecursive(child)
                 }
             }
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenComponentDescriptor.h b/common/cpp/react/renderer/components/rnscreens/RNSScreenComponentDescriptor.h
index 37aac4e1aca18f5dd537b3599c408abac114d4be..53415e9a8cc663d62373e3e432b4b1ed88e976e5 100644
--- a/common/cpp/react/renderer/components/rnscreens/RNSScreenComponentDescriptor.h
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenComponentDescriptor.h
@@ -5,9 +5,9 @@
 #endif
 #include <react/debug/react_native_assert.h>
 #include <react/renderer/components/rnscreens/Props.h>
+#include <react/renderer/components/rnscreens/utils/RectUtil.h>
 #include <react/renderer/core/ConcreteComponentDescriptor.h>
 #include "RNSScreenShadowNode.h"
-#include "utils/RectUtil.h"
 
 namespace facebook {
 namespace react {

[DinhHoangNgoc]

@DorianMazur It works well, thank you for the help.

[DorianMazur]

FYI: For some reason, in my project this patch is not always working 🤷
That's why I decided to disable removeClippedSubviews globally in the index.js file, like this:

FlatList.defaultProps = FlatList.defaultProps || {}
FlatList.defaultProps.removeClippedSubviews = false
ScrollView.defaultProps = ScrollView.defaultProps || {}
ScrollView.defaultProps.removeClippedSubviews = false
SectionList.defaultProps = SectionList.defaultProps || {}
SectionList.defaultProps.removeClippedSubviews = false

[mrenann]

@DorianMazur I also put it and it worked but with a bottomtabnavigation, when switching between tabs it gives the error No view found for id 0x6fe for fragment ScreentStackFragment

[abrah4mr]

@mrenann If you add detachInactiveScreens={false} fix the error for now.

I already opened an issue for this error with the BottomTab.

[hosseinmd]

@DorianMazur your solution work but doesn't work in all situation, in my app some page still crashing when going back.

[NiuGuohui]

Does anyone have a complete solution?

[DorianMazur]

It worked for me

FlatList.defaultProps = FlatList.defaultProps || {}
FlatList.defaultProps.removeClippedSubviews = false
ScrollView.defaultProps = ScrollView.defaultProps || {}
ScrollView.defaultProps.removeClippedSubviews = false
SectionList.defaultProps = SectionList.defaultProps || {}
SectionList.defaultProps.removeClippedSubviews = false

[NiuGuohui]

It worked for me

FlatList.defaultProps = FlatList.defaultProps || {}
FlatList.defaultProps.removeClippedSubviews = false
ScrollView.defaultProps = ScrollView.defaultProps || {}
ScrollView.defaultProps.removeClippedSubviews = false
SectionList.defaultProps = SectionList.defaultProps || {}
SectionList.defaultProps.removeClippedSubviews = false

I don't think this is a good solution because this problem can be encountered in many scenarios. For example, when using dynamic content in the Drawer of react-native-drawer-layout.

[b0iq]

its still happening 3.35.0-rc.1