New Install doesn't work

[ArshanKhanifar]

What happened?

I simply followed all of the instructions on the website while having created a new react native app:

npx react-native@latest init test_rnn
cd test_rnn

then:

yarn add react-native-navigation
npx rnn-link 
pod install --project-directory=ios # this is new! haha! 

then I changed the index.js file:

/**
 * @format
 */

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

Navigation.registerComponent('com.myApp.WelcomeScreen', () => App);
Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name: 'com.myApp.WelcomeScreen',
            },
          },
        ],
      },
    },
  });
});

And I'm getting this error:

 LOG  Running "test_rnn" with {"rootTag":1,"initialProps":{}}
 ERROR  Invariant Violation: "test_rnn" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes
 ERROR  TypeError: Cannot convert undefined value to object, js engine: hermes

What was the expected behaviour?

app to run.

Was it tested on latest react-native-navigation?

• [X] I have tested this issue on the latest react-native-navigation release and it still reproduces.

Help us reproduce this issue!

I've made a repo for it here.

In what environment did this happen?

React Native Navigation version: React Native version: "^7.33.3-hotfix.2" Has Fabric (React Native's new rendering system) enabled: (no) Node version: v16.13.1 Device model: iPhone14Pro iOS version: 16.5 (20F66)

[LYevhen]

Have the same with 7.34.0, but I'm trying to upgrade from 0.67.5, I also have expo 48.0.19

[LYevhen]

@ArshanKhanifar Looks like there is already solution for it here

[Ngomana]

Avoid using this package, it's been a more than a year an no one has bothered to fix it, i recommend that you use react navigation instead of this dead package.

[ArshanKhanifar]

yeah I ended up using react navigation.

[yogevbd]

Hey, please try 7.36.0-rc.1, sorry for the inconvenience.

[gustavomodena]

Here is not working too. The android version is perfect working but in the iOS is showing the same error. I'm coming from the v62.2 to v72.3 of react native. I tried several solutions here from the people but without success.

My current project is stuck on this and I don't know what to do in this case, so I'm trying to move to another navigation lib :(

I tested all releases of this lib since 7.34 and none worked. In my case I'm not using Expo

[yogevbd]

@gustavomodena have you tried 7.36.0? Are you migrating an old project? If so the link script won't work, in that case you need to migrate manually. What is the error you seeing?

[gustavomodena]

Hi @yogevbd, I'm working in a project using your library since the beginning there in RN v49 I guess. As the time was passing I was updating the project. Recently I needed to upgrade the react native from 62.2 to 72.3 and I got it, the android version is running perfect but iOS don't initialize.

I'm getting this error: "AppName" has not been registered. This can happen if: Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.

• A module failed to load due to an error and AppRegistry.registerComponent wasn't called.

On my index.js I have this:

import {LogBox} from 'react-native';
import {Navigation} from 'react-native-navigation';
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
import NetInfo from '@react-native-community/netinfo';
import NavigationFlow from '@src/utils/flow';
import Settings from '@src/config/settings';
import Routes from '@src/config/routes';
import networkAlert from '@src/utils/networkAlert';

const init = async () => {
  // Register routes
  Routes.forEach(route => {
    Navigation.registerComponent(route.name, () =>
      gestureHandlerRootHOC(route.component),
    );
  });

  // Set default styles
  Navigation.setDefaultOptions(Settings.navigation);

  // Detect network changes
  NetInfo.fetch().then(networkAlert);
  NetInfo.addEventListener(networkAlert);

  NavigationFlow.init();
};

// When the navigation is ready
Navigation.events().registerAppLaunchedListener(init);

On flow.js:

import {Navigation} from 'react-native-navigation';
import SplashScreen from 'react-native-splash-screen';
import Token from '@src/utils/token';
import Styles from '@src/config/styles';

const tabIcons = {
  home: require('@src/images/tabs/home.png'),
  gallery: require('@src/images/tabs/gallery.png'),
  videos: require('@src/images/tabs/videos.png'),
  menu: require('@src/images/tabs/menu.png'),
};

const mountComponent = screen => {
  const name = screen.replace(/^\w/, c => c.toUpperCase());

  return {
    component: {
      name: `thais.${name}Screen`,
    },
  };
};

const mountTab = (name, text) => {
  const icon = tabIcons[name];
  const selectedIconColor = Styles.colors.primary;

  return {
    stack: {
      children: [mountComponent(name)],
      options: {
        bottomTab: {
          iconInsets: {top: 6, bottom: -6},
          selectedIconColor,
          icon,
        },
      },
    },
  };
};

// GUEST FLOW
const guest = () => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [mountComponent('onboarding')],
      },
    },
  });
};

// USER FLOW
const loggedIn = () => {
  const tabs = [
    mountTab('home', 'Home'),
    mountTab('gallery', 'Lançamentos'),
    mountTab('videos', 'Vídeos'),
    mountTab('menu', 'Mais'),
  ];

  Navigation.setRoot({
    root: {
      bottomTabs: {
        children: tabs,
      },
    },
  });
};

const init = async () => {
  try {
    await Token.get();
    loggedIn();
  } catch (e) {
    guest();
  }

  SplashScreen.hide();
};

export default {
  init,
  guest,
  loggedIn,
};

I tested now the v7.37.0 and still not works on iOS :(

[yogevbd]

@gustavomodena hey, please send me a private message on our discord so we can schedule a call and I can help you debug it and also understand what is missing in our docs

[ombogdanJoinToIt]

how to solve this problem?

[akhan118]

This works for me using

"react-native": "0.73.4",
"react-native-navigation": "^7.38.3",

`

#import "AppDelegate.h"
#import <ReactNativeNavigation/ReactNativeNavigation.h>

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>

#import <RCTAppSetupUtils.h>
#if RCT_NEW_ARCH_ENABLED
#import <React/CoreModulesPlugins.h>
#import <React/RCTCxxBridgeDelegate.h>
#import <React/RCTFabricSurfaceHostingProxyRootView.h>
#import <React/RCTSurfacePresenter.h>
#import <React/RCTSurfacePresenterBridgeAdapter.h>
#import <ReactCommon/RCTTurboModuleManager.h>

#import <react/config/ReactNativeConfig.h>

@interface AppDelegate () <RCTCxxBridgeDelegate, RCTTurboModuleManagerDelegate> {
  RCTTurboModuleManager *_turboModuleManager;
  RCTSurfacePresenterBridgeAdapter *_bridgeAdapter;
  std::shared_ptr<const facebook::react::ReactNativeConfig> _reactNativeConfig;
  facebook::react::ContextContainer::Shared _contextContainer;
}
@end
#endif

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  RCTAppSetupPrepareApp(application, true);

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
[ReactNativeNavigation bootstrapWithBridge:bridge];

#if RCT_NEW_ARCH_ENABLED
  _contextContainer = std::make_shared<facebook::react::ContextContainer const>();
  _reactNativeConfig = std::make_shared<facebook::react::EmptyReactNativeConfig const>();
  _contextContainer->insert("ReactNativeConfig", _reactNativeConfig);
  _bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc] initWithBridge:bridge contextContainer:_contextContainer];
  bridge.surfacePresenter = _bridgeAdapter.surfacePresenter;
#endif

  return YES;
}

- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge {
  return [ReactNativeNavigation extraModulesForBridge:bridge];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

#if RCT_NEW_ARCH_ENABLED

#pragma mark - RCTCxxBridgeDelegate

- (std::unique_ptr<facebook::react::JSExecutorFactory>)jsExecutorFactoryForBridge:(RCTBridge *)bridge
{
  _turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge
                                                             delegate:self
                                                            jsInvoker:bridge.jsCallInvoker];
  return RCTAppSetupDefaultJsExecutorFactory(bridge, _turboModuleManager);
}

#pragma mark RCTTurboModuleManagerDelegate

- (Class)getModuleClassFromName:(const char *)name
{
  return RCTCoreModulesClassProvider(name);
}

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
                                                      jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)jsInvoker
{
  return nullptr;
}

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
                                                     initParams:
                                                         (const facebook::react::ObjCTurboModule::InitParams &)params
{
  return nullptr;
}

- (id<RCTTurboModule>)getModuleInstanceFromClass:(Class)moduleClass
{
  return RCTAppSetupDefaultModuleFromClass(moduleClass);
}

#endif

@end

`