app crash on goBack with createNativeStackNavigator

[AdrishS-AW]

Description

When I switched Stack from createStackNavigator to createNativeStackNavigator for performance, I started facing these issues:

1. When navigating to a new screen, some shadow/overlay thing persists until I navigate to another screen and come back (random)
2. When I press back, the app crashes (random)

I have a hunch that its related to new architecture, because on a different app I worked which was using old architecture, this didn't happen.

Screen_Recording_20250520_131822_Access.mp4

Steps to reproduce

Changed Stack from createStackNavigator to createNativeStackNavigator for performance gains

Snack or a link to a repository

https://github.com/accesswealth/access-pro-voyager

Screens version

4.3.0

React Native version

0.75.5

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Real device

Device model

Samsung Galaxy A35

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[kkafar]

Hey! The crash you experienced was fixed with 4.6.0. "the overlay" effect might be:

1. a bug - in that case we won't be able to help you, unless we get a reproduction (MRE) & more information (what API level is this, does this happen on emulator, exact package versions that are in use,
2. just an effect of fade out, but it look too ugly, I hope we would notice it on our end.

My initial impression is that this has to do something with drawing order on Android & the disappearing screen should not be drawn after the entering one, however I don't observe this behaviour on my end, therefore I'm waiting for reproduction & more information.

[devAdrish]

I updated to 4.6.0, still facing the crash

but after setting the animation explicitly, not facing that fade/overlay bug anymore

screenOptions={{
          headerShown: false,
          freezeOnBlur: true,
          animation: 'slide_from_right',
 }}

this is my package.json

{
  "name": "accessvoyager",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "format": "prettier --write --ignore-unknown \"**/src/**/*.{js,ts,tsx,jsx}\"",
    "prepare": "husky",
    "postinstall": "npx patch-package"
  },
  "dependencies": {
    "@flyerhq/react-native-link-preview": "^1.6.0",
    "@gorhom/bottom-sheet": "^5",
    "@notifee/react-native": "^9.1.8",
    "@react-native-clipboard/clipboard": "^1.16.1",
    "@react-native-community/blur": "^4.4.1",
    "@react-native-community/datetimepicker": "^8.3.0",
    "@react-native-community/netinfo": "^11.4.1",
    "@react-native-documents/picker": "^10.1.1",
    "@react-native-firebase/app": "^21.7.2",
    "@react-native-firebase/messaging": "^21.7.2",
    "@react-native-masked-view/masked-view": "^0.3.2",
    "@react-navigation/bottom-tabs": "^7.1.3",
    "@react-navigation/native": "^7.0.13",
    "@react-navigation/native-stack": "^7.2.0",
    "@react-navigation/stack": "^7.0.18",
    "@sentry/react-native": "^6.5.0",
    "@shopify/react-native-skia": "^1.10.2",
    "@tanstack/query-core": "^5.62.3",
    "@tanstack/react-query": "^5.62.3",
    "add": "^2.0.6",
    "axios": "^1.7.9",
    "dayjs": "^1.11.13",
    "events": "^3.3.0",
    "lodash": "^4.17.21",
    "lottie-react-native": "^7.1.0",
    "moti": "^0.29.0",
    "react": "18.3.1",
    "react-native": "0.76.5",
    "react-native-actions-sheet": "^0.9.7",
    "react-native-blob-util": "^0.21.2",
    "react-native-bootsplash": "^6.3.2",
    "react-native-checkbox-reanimated": "^0.1.2",
    "react-native-device-info": "^14.0.4",
    "react-native-fast-collapsible": "^1.1.2",
    "react-native-file-viewer": "^2.1.5",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "2.21.0",
    "react-native-gifted-charts": "^1.4.56",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-mmkv": "^3.1.0",
    "react-native-modal-datetime-picker": "^18.0.0",
    "react-native-network-logger": "^1.17.0",
    "react-native-pdf": "^6.7.6",
    "react-native-popover-view": "^6.1.0",
    "react-native-radio-buttons-group": "^3.1.0",
    "react-native-reanimated": "^3.16.4",
    "react-native-reanimated-carousel": "^3.5.1",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "^5.0.0",
    "react-native-screens": "4.6.0",
    "react-native-share": "^12.0.9",
    "react-native-size-matters": "^0.4.2",
    "react-native-smartlook-analytics": "^2.1.21",
    "react-native-svg": "^15.10.1",
    "react-native-svg-transformer": "^1.5.0",
    "react-native-timeline-flatlist": "^0.8.0",
    "react-native-toast-message": "^2.2.1",
    "react-native-version-check": "^3.4.7",
    "react-native-webview": "^13.13.2",
    "styled-components": "6.1.13",
    "victory-native": "^41.16.0",
    "zustand": "^5.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@eslint/js": "^9.16.0",
    "@react-native-community/cli": "15.0.1",
    "@react-native-community/cli-platform-android": "15.0.1",
    "@react-native-community/cli-platform-ios": "15.0.1",
    "@react-native/babel-preset": "0.76.5",
    "@react-native/eslint-config": "0.76.5",
    "@react-native/metro-config": "0.76.5",
    "@react-native/typescript-config": "0.76.5",
    "@types/lodash": "^4.17.14",
    "@types/react": "^18.2.6",
    "@types/react-native-version-check": "^3.4.8",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-plugin-module-resolver": "^5.0.2",
    "eslint": "^9.16.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-native": "^4.1.0",
    "globals": "^15.13.0",
    "husky": "^9.1.7",
    "jest": "^29.6.3",
    "lint-staged": "^15.2.10",
    "prettier": "^3.4.2",
    "react-native-dotenv": "^3.4.11",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4",
    "typescript-eslint": "^8.18.0"
  },
  "lint-staged": {
    "*": "yarn format",
    "*.ts": "eslint --fix",
    "*.js": "eslint --fix",
    "*.tsx": "eslint --fix",
    "*.jsx": "eslint --fix"
  },
  "engines": {
    "node": ">=18"
  },
  "resolutions": {
    "styled-components": "^6"
  },
  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}

For the crash I noticed this:

1. The screen had a flatlist which caused this crash
2. When I added the following props to flatlist, it stopped crashing

removeClippedSubviews={false}
initialNumToRender={data?.length || 10}
 maxToRenderPerBatch={data?.length || 10}
 windowSize={data?.length || 10}

I can add these to my screens but there is another problem, I have a network logger screen as follows which causes the crash on goBack

 <SafeAreaView style={{flex: 1, marginTop: 50}}>
      <Button
        label="Go Back"
        left={<SvgIcon width={20} stroke={'#000'} strokeWidth={1} color={'#000'} icon={ArrowLeftIcon} />}
        onPress={goBack}
        type="ghost"
        textColor="black"
        size="lg"
      />
      <NetworkLogger />
    </SafeAreaView>

[kkafar]

Yeah, sorry, I was not precise enough. The fix for crash requires both screens ^4.6.0 and this fix to react-native: facebook/react-native#47634, which seems to be present since 0.78.

[devAdrish]

can I create a patch with a fix for just this issue instead of updating to v0.78 ?

[kkafar]

I guess you could, but that requires building the RN from source. Please note, that there are also follow up patches required - you can track them down by reading conversation under my fix to core.

[devAdrish]

react-native-screens+4.6.0.patch

created this patch after reviewing your PR, working for now, I'll see if I face any issues somewhere

CHANGES:
In Screen.kt

 if (child is ViewGroup) {
      if (child !is ReactScrollView && child !is ReactHorizontalScrollView) {
                for (j in 0 until child.childCount) {
                             child.addView(View(context))
                         }
                   }
             startTransitionRecursive(child)
       }

[devAdrish]

Setting the animation resolved shadow/overlay issue but introduced another bug

screenOptions={{
          headerShown: false,
          freezeOnBlur: true,
          animation: 'slide_from_right',
 }}

When navigating back, screen flickers

Screen_Recording_20250520_170715_Access.mp4

could be related to this, haven't tried myself on ios #2607

[kkafar]

This might be related to this one: facebook/react-native#49694, which requires 0.78 (latest patch) or 0.79 anyway

[kkafar]

Can't promise though, haven't looked into that issue unfortunately

[AdrishS-AW]

After playing around for a while, this is what worked for me

    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.10.1",
    "@react-navigation/stack": "^6.4.1",
    "react-native-screens": "^3.37.0",
    "react-native": "0.76.5",
 

screenOptions={{
      animation: 'ios',
 }}

Neither getting crash or flickering on go back nor shadow overlay effect. Able to use createNativeStackNavigator