React-native-screens: Crash on Android with react-navigation stack

[mtt87]

When I navigate to this specific screen the app is crashing.
It works fine on iOS and it works fine if I comment out enableScreens() and not use react-native-screens

It's a pretty standard screen, apollo hooks + SectionList and some Text View TouchableOpacity (from react-native-gesture-handler)

Here is the log collected by Sentry, is there anything I can do to debug and help finding the root cause?

java.lang.IllegalStateException: Fragment already added: ScreenFragment{e9e00a9 (89d81b03-c200-4966-881c-38bb9e88da42) id=0x175}
    at androidx.fragment.app.FragmentManagerImpl.addFragment(FragmentManagerImpl.java:1379)
    at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:399)
    at androidx.fragment.app.FragmentManagerImpl.executeOps(FragmentManagerImpl.java:2079)
    at androidx.fragment.app.FragmentManagerImpl.executeOpsTogether(FragmentManagerImpl.java:1869)
    at androidx.fragment.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManagerImpl.java:1830)
    at androidx.fragment.app.FragmentManagerImpl.execPendingActions(FragmentManagerImpl.java:1727)
    at androidx.fragment.app.FragmentManagerImpl$2.run(FragmentManagerImpl.java:150)
    at android.os.Handler.handleCallback(Handler.java:873)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loop(Looper.java:193)
    at android.app.ActivityThread.main(ActivityThread.java:6669)
    at java.lang.reflect.Method.invoke(Method.java)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

[mtt87]

To help debug I just removed everything in that screen and I'm just doing

function BrokenScreen() {
  return <View />
}

Seems somehow related to react navigation, I have this structure

  const MainAppStack = createStackNavigator(
    {
      Tabs: {
        screen: Tabs,
        navigationOptions: {
          animationEnabled: false,
        },
      },
      BrokenScreen1,
      BrokenScreen2,
    },
    {
      defaultNavigationOptions: {
        headerShown: false,
        cardStyle: {
          backgroundColor: 'white',
        },
      },
    },
  );

And when I navigate from Tabs to one of the other screens the app crashes with the error above.
I'm using the standard navigation.navigate('BrokenScreen1')

[luutruong]

I have same with this issue.

Process: XXX, PID: 12531
    java.lang.IllegalStateException: Fragment already added: ScreenFragment{a7a1462 (c161878b-e815-41df-a526-5cdbf51b95d1) id=0x19f}
        at androidx.fragment.app.FragmentManagerImpl.addFragment(FragmentManagerImpl.java:1379)
        at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:399)
        at androidx.fragment.app.FragmentManagerImpl.executeOps(FragmentManagerImpl.java:2079)
        at androidx.fragment.app.FragmentManagerImpl.executeOpsTogether(FragmentManagerImpl.java:1869)
        at androidx.fragment.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManagerImpl.java:1830)
        at androidx.fragment.app.FragmentManagerImpl.execPendingActions(FragmentManagerImpl.java:1727)
        at androidx.fragment.app.FragmentManagerImpl$2.run(FragmentManagerImpl.java:150)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:193)
        at android.app.ActivityThread.main(ActivityThread.java:6669)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

My package.json

"@merryjs/photo-viewer": "^3.1.2",
    "@react-native-community/async-storage": "^1.7.1",
    "@react-native-community/masked-view": "^0.1.6",
    "@react-native-community/viewpager": "^3.3.0",
    "@react-navigation/bottom-tabs": "^5.0.0",
    "@react-navigation/material-top-tabs": "^5.0.0",
    "@react-navigation/native": "^5.0.0",
    "@react-navigation/stack": "^5.0.0",
    "buffer": "^5.4.3",
    "crypto-js": "^3.1.9-1",
    "events": "^3.1.0",
    "htmlparser2": "^4.0.0",
    "i18n-js": "^3.5.1",
    "lodash": "^4.17.15",
    "lodash.memoize": "^4.1.2",
    "moment": "^2.24.0",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-admob": "^2.0.0-beta.6",
    "react-native-device-info": "^5.5.1",
    "react-native-fast-image": "^7.0.2",
    "react-native-gesture-handler": "^1.5.6",
    "react-native-google-analytics": "^1.3.2",
    "react-native-image-crop-picker": "^0.26.2",
    "react-native-keyboard-aware-scroll-view": "^0.9.1",
    "react-native-onesignal": "^3.6.4",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.6.4",
    "react-native-screens": "^2.0.0-beta.2",
    "react-native-tab-view": "^2.13.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-webview": "^8.0.6",
    "react-redux": "^7.1.3",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "rn-fetch-blob": "^0.12.0"

[kmagiera]

Thanks @mtt87 for reporting, any chance you could share a complete app/example I can use to reproduce this problem?

[mtt87]

I've tried to start a new project from scratch, added react-navigation and all the dependencies, added stack and tabs, created a similar navigation setup but it doesn't crash so I'll need to slowly add more things until it breaks to pin down what's causing this.

[deng-yc]

+1

[jkadamczyk]

@kmagiera This is the same issue I have. At least callstack is almost the same.

[Preeternal]

I have the same behaviour when I am trying to turn on toggle inspector in my simulator:
E/AndroidRuntime: FATAL EXCEPTION: main Process: com.*, PID: 4671 java.lang.IllegalStateException: Fragment already added: ScreenFragment{f2ad48d (977dc763-f4e6-45fd-8225-8f20a879808b) id=0x3f5} at androidx.fragment.app.FragmentManagerImpl.addFragment(FragmentManagerImpl.java:1379) at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:399) at androidx.fragment.app.FragmentManagerImpl.executeOps(FragmentManagerImpl.java:2079) at androidx.fragment.app.FragmentManagerImpl.executeOpsTogether(FragmentManagerImpl.java:1869) at androidx.fragment.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManagerImpl.java:1830) at androidx.fragment.app.FragmentManagerImpl.execPendingActions(FragmentManagerImpl.java:1727) at androidx.fragment.app.FragmentManagerImpl$2.run(FragmentManagerImpl.java:150) at android.os.Handler.handleCallback(Handler.java:873) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:193) at android.app.ActivityThread.main(ActivityThread.java:6669) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

Downgrade from 2.0.0-beta.2 into 2.0.0-alpha.17 solved the problem with crashes, but native stack navigator with wrong peer dependency now and doesn't work

[alimek]

just updated to latest react-navigation v4 + latest react-native-screens + react-navigation-stack and my android app is crashing with this when im trying to open Toggle Inspector.

iOS is fine.

[DovletAmanov]

Same issue with react-navigation v5 and react-native-screens v2.0.0-beta.2
Happens when going back to previous screen

[muhammadwafa]

I think you are using stack navigator and this is not necessary for that if you are using native-stack then you can use it.

[psloboda]

+1

[kmagiera]

I hear from @adamczyk777 that this crash no longer occurs on the most recent release (2.0.0-beta.6). As I don't see any repro case here I could use to verify I can only ask whoever reported the crash here if you still get it on beta.6. In case you do please comment below or start a new issue with a repro scenario.

[alimek]

@kmagiera

2020-02-18 16:11:51.104 14862-14862/xxx E/AndroidRuntime: FATAL EXCEPTION: main
    Process: xxx, PID: 14862
    java.lang.ClassCastException: com.bumptech.glide.manager.SupportRequestManagerFragment cannot be cast to com.swmansion.rnscreens.ScreenFragment
        at com.swmansion.rnscreens.ScreenContainer.onUpdate(ScreenContainer.java:255)
        at com.swmansion.rnscreens.ScreenContainer.updateIfNeeded(ScreenContainer.java:238)
        at com.swmansion.rnscreens.ScreenContainer.access$000(ScreenContainer.java:23)
        at com.swmansion.rnscreens.ScreenContainer$1.doFrame(ScreenContainer.java:38)
        at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:174)
        at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:965)
        at android.view.Choreographer.doCallbacks(Choreographer.java:791)
        at android.view.Choreographer.doFrame(Choreographer.java:722)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:952)
        at android.os.Handler.handleCallback(Handler.java:883)
        at android.os.Handler.dispatchMessage(Handler.java:100)
        at android.os.Looper.loop(Looper.java:214)
        at android.app.ActivityThread.main(ActivityThread.java:7356)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)

could this be related to fix?

BTW. ToggleInspector works now as well! thanks for fix :)

[mtt87]

@kmagiera on my end I just tried and it seems to be fine 😄 well done 🎉
Curious to understand what was the reason?

[kmagiera]

Great to hear @mtt87

@alimek – as for the crash I don't think it is related but I can understand what other change might've caused that crash. Would be great if you could prepare a repro case for that crash and start a new issue as I believe that one is not related.

[alimek]

@alimek – as for the crash I don't think it is related but I can understand what other change might've caused that crash. Would be great if you could prepare a repro case for that crash and start a new issue as I believe that one is not related.

It is happening when I am closing modal screen, but not on every screen. I will try to check why it crashes on my side first and then try to create repo. 👍 cheers

[Flouwrian]

@kmagiera i´m having the same error, when i try to use the back button in the stack header bar. I´m currently migrating from react-navigation 4 to react-navigation 5 and everythings working nice just this is bothering me.

Getting this error: java.lang.ClassCastException: com.bumptech.glide.manager.SupportRequestManagerFragment cannot be cast to com.swmansion.rnscreens.ScreenFragment

he´re my dependencies:

"dependencies": {
"@react-native-community/async-storage": "^1.7.1",
"@react-native-community/cameraroll": "^1.3.0",
"@react-native-community/masked-view": "^0.1.6",
"@react-native-community/netinfo": "^5.3.2",
"@react-native-community/slider": "^2.0.8",
"@react-navigation/native": "^5.0.5",
"@react-navigation/stack": "^5.0.5",
"@types/redux": "^3.6.0",
"@types/redux-thunk": "^2.1.0",
"axios": "^0.19.1",
"create-react-class": "^15.6.3",
"i18n-js": "^3.5.1",
"idx": "^2.5.6",
"lodash.isequal": "^4.5.0",
"lodash.memoize": "^4.1.2",
"lottie-ios": "3.1.5",
"lottie-react-native": "^3.3.2",
"moment": "^2.24.0",
"react": "16.12.0",
"react-native": "0.61.5",
"react-native-better-parsed-text": "^0.1.1",
"react-native-dark-mode": "^0.2.1",
"react-native-default-preference": "^1.4.1",
"react-native-device-info": "^5.4.1",
"react-native-dialog": "^5.6.0",
"react-native-document-picker": "^3.2.4",
"react-native-elements": "^1.2.7",
"react-native-exception-handler": "^2.10.8",
"react-native-fast-image": "^7.0.2",
"react-native-firebase": "^5.6.0",
"react-native-fs": "^2.16.2",
"react-native-gesture-handler": "^1.6.0",
"react-native-gifted-chat": "^0.13.0",
"react-native-hide-with-keyboard": "^1.2.1",
"react-native-image-picker": "^2.0.0",
"react-native-image-zoom-viewer": "^2.2.27",
"react-native-lightbox": "^0.8.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-localize": "^1.3.2",
"react-native-mail": "^4.1.0",
"react-native-orientation": "^3.1.3",
"react-native-paper": "^3.6.0",
"react-native-permissions": "^2.0.9",
"react-native-raw-bottom-sheet": "^2.0.6",
"react-native-reanimated": "^1.7.0",
"react-native-referrer": "^0.1.4",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.0.0-beta.7",
"react-native-simple-toast": "^1.0.0",
"react-native-size-matters": "^0.3.0",
"react-native-slider": "^0.11.0",
"react-native-sound": "^0.11.0",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^10.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-video": "^5.0.2",
"react-native-webview": "^8.0.3",
"react-redux": "^7.1.3",
"redux": "^4.0.5",
"redux-devtools": "^3.5.0",
"redux-devtools-extension": "^2.13.8",
"redux-promise-middleware": "^6.1.2",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"rn-fetch-blob": "^0.12.0",
"uuid": "^3.3.3"
},
"devDependencies": {
"@babel/core": "^7.8.0",
"@babel/plugin-proposal-decorators": "^7.8.0",
"@babel/runtime": "^7.8.0",
"@commitlint/cli": "^8.3.4",
"@commitlint/config-angular": "^8.3.4",
"@types/axios": "^0.14.0",
"@types/enzyme": "^3.10.4",
"@types/enzyme-adapter-react-16": "^1.0.5",
"@types/i18n-js": "^3.0.1",
"@types/jest": "^24.0.25",
"@types/lodash.isequal": "^4.5.5",
"@types/lodash.memoize": "^4.1.6",
"@types/moment": "^2.13.0",
"@types/react": "^16.9.17",
"@types/react-native": "^0.60.30",
"@types/react-native-dialog": "^5.6.1",
"@types/react-native-mail": "^3.0.0",
"@types/react-native-orientation": "^5.0.1",
"@types/react-native-referrer": "^0.1.0",
"@types/react-native-vector-icons": "^6.4.5",
"@types/react-native-video": "^5.0.0",
"@types/react-redux": "^7.1.6",
"@types/react-test-renderer": "^16.9.1",
"@types/uuid": "^3.4.6",
"babel-jest": "^24.9.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.4.3",
"husky": "^4.0.7",
"jest": "^24.9.0",
"jest-enzyme": "^7.1.2",
"jest-fetch-mock": "^3.0.1",
"jetifier": "^1.6.5",
"metro-react-native-babel-preset": "^0.57.0",
"mock-async-storage": "^2.2.0",
"node-fetch": "^2.6.0",
"npm-api": "^1.0.0",
"prettier": "^1.19.1",
"pretty-quick": "^2.0.1",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.12.0",
"react-test-renderer": "16.12.0",
"standard-version": "^7.0.1",
"ts-jest": "^24.3.0",
"tslint": "^5.20.1",
"tslint-config-prettier": "^1.18.0",
"tslint-eslint-rules": "^5.4.0",
"tslint-react": "^4.1.0",
"typescript": "^3.7.4"
},

[tomffee]

Quick workaround for production if necessary:
what helped us was actually removing useScreens method while using android platform for now.

import {useScreens} from 'react-native-screens';
// TODO: Remove condition after react-navigation this issue is fixed
if (Platform.OS === 'ios') {
  useScreens();
}

[fangasvsass]

why close this issue android crash 0.62.2 android react navigation5

[fangasvsass]

Same issue with react-navigation v5 and react-native-screens v2.0.0-beta.2
Happens when going back to previous screen
any update?

[RnbWd]

I'm seeing a similar error in the crash reports on google console for apps in production, maybe I should disable enableScreens() on android. Here are my library versions:

"@react-navigation/native": "^5.6.1",
"@react-navigation/stack": "^5.6.2",
"react-native-screens": "^2.9.0",

I'm using the @react-navigation/stack navigator, not the native stack navigator. I haven't seen this error while testing, but it's fairly common in my crash logs in production.

[beqramo]

@WoLewicki please have a look.

it happens for me on goBack() but not a first time, it happens when I repeat this action frequently on the same screen, so navigate to this screen, go back and again.
I see this error only on android release
I'm using "react-navigation": "^4.4.0"

[WoLewicki]

@beqramo can you provide a repo with minimal configuration needed to reproduce the issue?