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

[hosseinmd]

i commented entire of startTransitionRecursive and it works for me.

react-native-screens/android/src/main/java/com/swmansion/rnscreens/Screen.kt

Line 365 in bc95fa4

parent?.let {

[kkafar]

What architecture is that? Are you all using Fabric or is that Paper?

[NiuGuohui]

What architecture is that? Are you all using Fabric or is that Paper?

Fabric and disable bridgeless.

[alduzy]

I believe it's a duplicate of #2282 and should be resolved by #2307

As a workaround for now you can try setting the removeClippedSubviews option in the FlatList to false or applying the patch pasted by @DorianMazur.

If the problem persists please attach a minimal reproduction.

[hosseinmd]

Is it possible to have an option to disable transition?

[hosseinmd]

#2307 this is not fixed for all situations. I had to remove transition.

[alduzy]

@hosseinmd Could you attach a minimal reproduction?

[DorianMazur]

@alduzy We should reopen this issue. It's not fixed by #2307

[hosseinmd]

Sorry, it is not happening in a regular app. I don't know what is the exact problem, but when I remove transition, it work.

[alduzy]

Ok let's reopen it. Some reproduction snack would be necessary to find out what's broken though. 🙏
I tried the one provided by @DinhHoangNgoc and it works just fine with the fix.

[hosseinmd]

I reproduced the issue with latest version 4.0.0-beta.3
https://github.com/hosseinmd/react-native-screens-new-arch-crash-example
the root cause is related to render an image in Flatlist which is rendered in another Flatlist.

[spyshower]

@alduzy still not fixed.

[WKampel]

Happens not only when navigating back for me, but also TO screens. I'm on 4.0.0-beta.9.

[alduzy]

@spyshower @WKampel Under what circumstances does it fail, can you attach a reproduction?

[spyshower]

@alduzy 2 lists in the same screen, one of them being horizontal, it crashes.

import { View, Text, Pressable, FlatList } from 'react-native';
import s from './styles';

export const Settings = () => {
    const renderItem = ({}) => {
        return <Text style={s.settings_item_label}></Text>;
    };

    const settings = [{}, {}, {}];

    return (
        <>

            <FlatList data={settings} renderItem={renderItem} />

            <FlatList data={settings} renderItem={renderItem} horizontal />
        </>
    );
};

[joarkosberg]

@alduzy Will the fix be back ported to v3 also, or is upgrade to v4 required?

[alduzy]

@spyshower Thanks for the repro, as you pointed out, the horizontal lists aren't handled properly. #2383 fixes it.

[spyshower]

@alduzy not really, I am on ^4.0.0-beta.9

[alduzy]

@joarkosberg We're going to backport it to v3 after we release a stable v4.

[alduzy]

@spyshower You're right, the current change only considers nested horizontal lists. Thanks for noticing it!
I opened a PR that fixes the issue #2403

[spyshower]

@alduzy Thank you kind sir!

[spyshower]

@alduzy I know this is closed but I have noticed an issue with animating a nested list using reanimated 3.16.0. I get something like this error https://stackoverflow.com/questions/58584676/react-native-filter-flatlist-error-index-10-count-0. Do you think it's related to this one or should I open an issue there?

[alduzy]

@spyshower It's hard for me to tell given the information provided. Please open a new issue with some in-depth description and a reproduction code.

[talaikis]

Latest beta works fine w. RN 0.75.5

[r0b0t3d]

I'm using react native 0.76 with fabric. Here is my observation

1. Using 4.0.0-beta.16
   --> Works, but I got issue blank screen when going back ( When I want to go to the previous page, everything suddenly disappears #1685).
2. Using 3.35.0
   --> Not working, but don't have issue blank screen when going back

[alduzy]

@r0b0t3d I am unable to replicate the issues you mentioned on either 4.0.0-beta.16 or 3.35.0. Could you provide some more details? Ideally, having a code snippet for reproduction would be helpful.

EDIT: I managed to reproduce the problem with 4.0.0-beta.16. See #1685

[dppo]

This error still exists when using react-native-drawer-layout, similar to 12248. Are there any other fixes?

[dppo]

I just found this PR which has been solved.