react-native-navigation stucks in “component does not have a componentId”

[JoseFMP]

Issue Description

react-native-navigation stucks in “component does not have a componentId”
I tried:

• Adding and removing the prop componentId
• Making it optional/compulsory
• Setup and not set-up registerAppLaunchedListener
• Making the prop static

Bulding is fine, but on run time when the debugger hits this line it will complain that FirstScreenName does not have a componentId. However, It really has the prop componentId set.

Steps to Reproduce / Code Snippets / Screenshots

Create a bare react-native application and try to use react-native-navigation according to the documentation.
This statement crashes:

Navigation.registerComponent("FirstScreenName", () => () =>
 (<FirstScreen componentId="FirstScreen" />));

This also:

Navigation.registerComponent("FirstScreenName", () => FirstScreen);

This also:

Navigation.registerComponent("FirstScreenName", () => (props) => <FirstScreen {...props} />);

Complaining that FirstScreenName does not have a componentId.
Am I missing to set the componentId somewhere by hand or I am using the API incorrectly?

The crash happens before hitting the setRoot call, so it might be unrelated to setRoot. That said, the setRoot call is done as described in the documentation:

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      component: {
        name: 'navigation.playground.WelcomeScreen'
      }
    }
  });
});

---

Environment

• React Native Navigation version: 2.7.1
• React Native version: 0.57.8
• Platform: Android
• Device info : LG V20, debug mode.

[L-Yeiser]

You are registering your component incorrectly. In your case componentId will be passed to the second anonymous arrow function.

Navigation.registerComponent("FirstScreenName", () => FirstScreen);

[JoseFMP]

@L-Yeiser Thank you for your answer.
I did not understand what you mean. So you mean that

Navigation.registerComponent("FirstScreenName", () => FirstScreen);

is the expected way? I get the exact same error.

[byonghun]

@JoseFMP The error is probably coming from when you setRoot. Can you show me the code where you register your app?

[JoseFMP]

@byonghun Thank you for your answer.
Apparently now. I.e. without any setRoot call, the described error appears.
I can stop the debugger and see setRoot calls were no made before the crash. So I strongly believe is unrelated.
Other than that, setting the root as described in the documentation:

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      component: {
        name: 'FirstScreenName'
      }
    }
  });
});

[byonghun]

@JoseFMP
'Navigation.registerComponent("componentName", () => Component)' is the correct way and the way you setRoot is correct.

Try adding id to component. I know in iOS it works fine without an Id as it automatically generates it for you but it doesn't hurt to add an id to the component.

If that doesn't work I would try these next commands to clear some of your cached data
rm -rf ios/build
rm -rf ~/Library/Developer/Xcode/DerivedData
watchman watch-del-all

[JoseFMP]

Dear @byonghun thank you for your answer.

I already tried to add an id to the component, as a prop, as class member. Same error unfortunately.
Also deleted my local artifacts.

[JoseFMP]

FYI:
If I issue:

    AppRegistry.registerComponent('myApp', () => FirstScreen );

right before calling Navigation.registerComponent
It works like a charm.
What leads me to think there is a bug in Navigation.registerComponent. Because seeing the source code implementation of Navigation.registerComponent I can see that it is also calling ApRegistry.registerComponent. Correct?

[yavand]

@JoseFMP
I think you should replace AppDeligate.m content with this:

#import "AppDelegate.h"

 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
 #import <ReactNativeNavigation/ReactNativeNavigation.h>

 @implementation AppDelegate

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
     NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
     [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];

     return YES;
 }

 @end

and it should work properly :)

[JoseFMP]

@yavand Thank you for the tip. I might try that in iOS. I understand changes in that file only affects iOS.
However, the issue is happening in android.

[dooleyb1]

@JoseFMP did you manage to resolve this issue, experiencing the same problem here?

[JoseFMP]

So far I no. :(

[support[bot]]

We use the issue tracker exclusively for bug reports and feature requests. This issue appears to be a general usage or support question. Instead, please ask a question on Stack Overflow with the react-native-navigation tag.

[mikechan1234]

I'm also facing the same issue as @JoseFMP . My component props does not have componentId, it just ends up as undefined. The set up is the same as mentioned ;(

[a-troncoso]

Hi, @JoseFMP I had the same issue. I solved it by prefixing the name of the project each time you refer to the name of your screens/components, in your case:

Navigation.registerComponent("<ProjectName>.FirstScreenName", () => FirstScreen);

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      component: {
        name: '<ProjectName>.WelcomeScreen'
      }
    }
  });
});

[eduardopelitti]

Facing the same issue after a fresh install with RN 0.60.4 and RNN V3 alpha.7

FYI:
If I issue:

    AppRegistry.registerComponent('myApp', () => FirstScreen );

right before calling Navigation.registerComponent
It works like a charm.
What leads me to think there is a bug in Navigation.registerComponent. Because seeing the source code implementation of Navigation.registerComponent I can see that it is also calling ApRegistry.registerComponent. Correct?

Setting AppRegistry.registerComponent('myApp', () => FirstScreen ); removes the error but bypasses the navigation, so it doesn't appear to actually fix the issue, but rather go around it and stop using RNNavigation.

[riamon-v]

Hi, @JoseFMP I had the same issue. I solved it by prefixing the name of the project each time you refer to the name of your screens/components, in your case:

Navigation.registerComponent("<ProjectName>.FirstScreenName", () => FirstScreen);

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      component: {
        name: '<ProjectName>.WelcomeScreen'
      }
    }
  });
});

I tried your solution and litterally everything thath was mentionned above. But none of theses solutions are working for me.

Any news on that issue ?

[imnaifu]

Any update? Facing the same issue here

[eduardopelitti]

Any update? Facing the same issue here

I went back to the original project which I was working on when I commented here and I see that I don't have anything special.

On App.js I have:

//This line is pseudocode since I actually have a lot of wrapping going on here
Navigation.registerComponent('Onboarding', (props )=> <Onboarding {...props} />)

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      component: {
        name: 'Onboarding',
      },
    },
  })
})

[RNN V3.2.0 / RN 0.61.4]

I believe this is an issue with the setup/installation.

On what version of RNNavigation and React Native are you getting this issue? Do you see the issue only on Android or also iOS?

[gsavvid]

In my case something went wrong with auto linking (npx rnn-link) and resulted at the same error. I fixed it by adding the following to the Header Search Path: $(SRCROOT)/../node_modules/react-native-navigation/lib/ios.

Basically, as described in Native installation step 2.a of the documentation.

[clamiax]

I was editing up the index.js and expecting to see the changes using fast refresh, without recompling the app. Once I ran again npx react-native run-android everything worked properly. Here's my index.js:

import {Navigation} from "react-native-navigation";
import App from './App';

Navigation.registerComponent("MainScreen", () => App);
Navigation.events().registerAppLaunchedListener(() => {
        Navigation.setRoot({
                root: {
                        stack: {
                                children: [
                                        {
                                                component: {
                                                        name: "MainScreen"
                                                }
                                        }
                                ]
                        }
                }
        });
});

Hope this helps anyone.