search

software-mansion / react-native-screens

Native navigation primitives for your React Native app.
https://docs.swmansion.com/react-native-screens/
MIT License
3.01k stars 512 forks source link

Crash on Android with react-navigation stack #309

Closed mtt87 closed 4 years ago

mtt87 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

mtt87 commented 4 years ago

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 commented 4 years ago

+1

jkadamczyk commented 4 years ago

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

Preeternal commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

ghost commented 4 years ago

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 commented 4 years ago

+1

kmagiera commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

kmagiera commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

why close this issue android crash 0.62.2 android react navigation5

fangasvsass commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

Hardik500 commented 3 years ago

Here is a reproducable repo: https://github.com/Hardik500/madri The issue still exists, whenever I go to the next screen in build apk, the App crashes. Works great on development mode.

WoLewicki commented 3 years ago

@Hardik500 the app is too big to easily catch the problem. Please provide a minimal reproducible example in a form of a e.g. snack so everybody can elaborate on it.

Hardik500 commented 3 years ago

Sorry for the late reply, I was debugging the code and found out the issue was not with navigation but rather the image component, so had to replace that with a different library.

mtx62 commented 3 years ago

confirm that you used 

import { enableScreens } from 'react-native-screens';

enableScreens(false);
NoahMLoomis commented 2 years ago

My issue was the same, the app would work fine in development in an emulator, but when i built an APK and downloaded it onto the emulator, it crashed instantly.

This is because when creating my Stack to navigate, I was doing the following:

import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()

Instead, what I should've been importing was the following:

import { createNativeStackNavigator  } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator()

It's a small error, and it didn't break in local development for some reason, only in build

antoinedesp commented 6 months ago

For those still having this random issue when navigating to specific screens, you may want to use following at top of your root component :

if (Platform.OS === 'android') {
    if (UIManager.setLayoutAnimationEnabledExperimental) {
        UIManager.setLayoutAnimationEnabledExperimental(false);
    }
}