React-native-navigation: iOS RRN2 issue - Bridge not yet loaded! Send commands after Navigation.events().onAppLaunched() has been called

[Alexisvt]

Issue Description

When I open the app on iOS blow up with a red screen saying a message about the bridge not yet loaded. The app works fine on Android, the problem only occurs on iOS.

Steps to Reproduce / Code Snippets / Screenshots

Full exception description

2019-05-03 06:39:21.443659-0600 rncourse[5148:68828] Exception 'Bridge not yet loaded! Send commands after Navigation.events().onAppLaunched() has been called.' was thrown while invoking setRoot on target RNNBridgeModule with params (
    setRoot3,
        {
        modals =         (
        );
        overlays =         (
        );
        root =         {
            children =             (
                                {
                    children =                     (
                    );
                    data =                     {
                        name = "awesome-places.AuthScreen";
                        options =                         {
                        };
                    };
                    id = Component2;
                    type = Component;
                }
            );
            data =             {
                options =                 {
                    topBar =                     {
                        title =                         {
                            text = Login;
                        };
                    };
                };
            };
            id = Stack1;
            type = Stack;
        };
    },
    30,
    31
)

This is how AppDelegate.m file looks like:

#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

The App.js looks like this

import { Navigation } from 'react-native-navigation';

import AuthScreen from './src/screens/Auth';
import FindPlaceScreen from './src/screens/FindPlace';
import SharedPlaceScreen from './src/screens/SharedPlace';

// Register screens
Navigation.registerComponent('awesome-places.AuthScreen', () => AuthScreen);
Navigation.registerComponent('awesome-places.FindPlaceScreen', () => FindPlaceScreen);
Navigation.registerComponent('awesome-places.SharedPlaceScreen', () => SharedPlaceScreen);

Navigation.setRoot({
  root: {
    stack: {
      children: [
        {
          component: {
            name: 'awesome-places.AuthScreen',
          },
        },
      ],
      options: {
        topBar: {
          title: {
            text: 'Login',
          },
        },
      },
    },
  },
});

The Auht.js file looks like this:

import React, { Component } from 'react';
import { Button, Text, View } from 'react-native';

import startTabs from './MainTabs/startMainTabs';

class AuthScreen extends Component {
  loginHandler = () => {
    startTabs();
  };

  render() {
    return (
      <View>
        <Text>Auth Screen</Text>
        <Button title="Login" onPress={this.loginHandler} />
      </View>
    );
  }
}

export default AuthScreen;

and the index.js:

import App from './App';

you can see the code in the next repository

Environment

• React Native Navigation version: ^2.18.4
• React Native version: 0.59.5
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator iPhone 8/iOS 12.2 Debug

[Alexisvt]

I solved the issue, I was missing the registerAppLaunchedListener event, so now the App.js code looks like this:

import { Navigation } from 'react-native-navigation';

import AuthScreen from './src/screens/Auth';
import FindPlaceScreen from './src/screens/FindPlace';
import SharedPlaceScreen from './src/screens/SharedPlace';

// Register screens
Navigation.registerComponent('awesome-places.AuthScreen', () => AuthScreen);
Navigation.registerComponent('awesome-places.FindPlaceScreen', () => FindPlaceScreen);
Navigation.registerComponent('awesome-places.SharedPlaceScreen', () => SharedPlaceScreen);

// this line was the missing one, after added it, the app on iOS just worked
Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name: 'awesome-places.AuthScreen',
            },
          },
        ],
        options: {
          topBar: {
            title: {
              text: 'Login',
            },
          },
        },
      },
    },
  });
});

[NdauwaRafael]

I have the same issue, I have added registerAppLaunchedListener but still does not solve the problem. However the app works just fine on android.

[msqar]

@NdauwaRafael man, i just installed my app on a different mac and im getting the very same error, what's going on with that bridge? same code, same libs, etc.. but this mac shows the error. Do you know how to fix it for good?

[NdauwaRafael]

I answered the same question you asked on stackOverflow, here