react-navigation/native-stack not working on Android

Question

I get the following error:

E/unknown:ReactNative: Exception in native call
    java.lang.IllegalStateException: In order to use RNScreens components your app's activity need to extend ReactActivity
        at com.swmansion.rnscreens.ScreenContainer.setupFragmentManager(ScreenContainer.kt:169)
        at com.swmansion.rnscreens.ScreenContainer.onAttachedToWindow(ScreenContainer.kt:199)
        at android.view.View.dispatchAttachedToWindow(View.java:21304)
        at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:4239)
        at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:4246)
        at android.view.ViewGroup.addViewInner(ViewGroup.java:6001)
        at android.view.ViewGroup.addView(ViewGroup.java:5777)
        at android.view.ViewGroup.addView(ViewGroup.java:5717)
        at com.facebook.react.uimanager.ViewGroupManager.addView(ViewGroupManager.java:37)
        at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:533)
        at com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:217)
        at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:915)
        at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:1026)
        at com.facebook.react.uimanager.UIViewOperationQueue.access$2600(UIViewOperationQueue.java:47)
        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1086)
        at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
        at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
        at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:997)
        at android.view.Choreographer.doCallbacks(Choreographer.java:797)
        at android.view.Choreographer.doFrame(Choreographer.java:728)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:984)
        at android.os.Handler.handleCallback(Handler.java:883)
        at android.os.Handler.dispatchMessage(Handler.java:100)
        at android.os.Looper.loop(Looper.java:237)
        at android.app.ActivityThread.main(ActivityThread.java:8167)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:496)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1100)

When I try to change: public class RnActivity extends Activity implements DefaultHardwareBackBtnHandler { to public class RnActivity extends ReactActivity implements DefaultHardwareBackBtnHandler {, as the error suggests, I get a new error:

E/mk_d : Utils: Error: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.android.rn_management.RnActivity}: java.lang.ClassCastException: com.android.Application cannot be cast to com.facebook.react.ReactApplication
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3654)

When I remove react-navigation/native-stack from my RN bundle, everything works just fine. In addition I receive the following error (is it related?): E/ThemeUtils: View class com.facebook.react.views.text.ReactTextView is and AppCompat widget that can only be used with a Theme.AppCompat theme (or descendant)

Rhyan-WoodsAndWalker · Answer 1 · 2022-04-26T12:20:57.827

1

Are you on an older version of React Native? check your android/app/src/main/java/com/(your app)/MainActivity.java file & change the first class line to extend ReactActivity if it doesn't already -

public class MainActivity extends ReactActivity {
  ...

That should satisfy the error you're getting - ReactActivity also extends a compat class so it will possibly fix your other issue too

edited Apr 26 '22 at 12:20

answered Apr 26 '22 at 12:15

Rhyan-WoodsAndWalker

532
2
7

I changed the RnActivity to extend ReactActivity (instead of MainActivity), it indeed helped. Thank you. – Sher Mi May 02 '22 at 14:25

score 1 · Accepted Answer · answered Apr 26 '22 at 12:33

1

React-native-screens is one of the react-navigation dependencies so you need to use it in order to get the navigation to work. Extend your Activity with ReactActivity and create or edit your Application class in native Android code:

class YourApplication : Application(), ReactApplication, LifecycleObserver {...}

This link here https://reactnative.dev/docs/integration-with-existing-apps is useful if you want to integrate react-native into already existing app and do not want to implement ReactApplication and ReactActivity.

answered Apr 26 '22 at 12:33

alvAro365

379
4
8

I`ve already followed the tutorial (this is how I integrated RN into my existing app). Could you explain the code you wrote? Is that Kotlin? – Sher Mi Apr 26 '22 at 15:31
Basically you create a new class which extends Application and implements ReactApplication. Then you must update the maninfest like discribed here: https://stackoverflow.com/questions/58247216/why-my-application-class-which-extends-android-app-application-is-not-working. Code snippet is Kotlin yes. – alvAro365 Apr 26 '22 at 17:26
3

Combined with the other solution (by Rhyan-WoodsAndWalker), and after I changed `mReactRootView = new ReactRootView(sApp.getApplicationContext());` to `mReactRootView = new ReactRootView(this);` the problem was solved. Thank you. – Sher Mi May 02 '22 at 14:26

react-navigation/native-stack not working on Android

2 Answers2