React Native Navigation Invariant violation

Question

I've been in an issue after I decide to update my RNN dependency to use the new version v2. Also using the latest RN version 0.56. The problem is running on IOS, it Shows the red screen with this message: "Invariant Violation: Element type is invalid: expected a string(for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or might have mixed up default and named imports". The problem is this code works on Android, but . not in IOS.

import { Navigation } from 'react-native-navigation';
import registerScreens from './screens/index';

registerScreens();
Navigation.events().registerAppLaunchedListener(() => {
    Navigation.setRoot({
        root: {
            stack: {
                options: {
                    topBar: {
                        visible: false
                    }
                },
                children: [
                    {
                        component: {
                            name: 'com.passenger.MainScreen',
                            passProps: {}
                        }
                    }
                ]
            }
        }
    });
});

registerScreens(); code:

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

export default registerScreens = () => {

    Navigation.registerComponent(`com.passenger.MainScreen`, () => MainScreen);
    Navigation.registerComponent(`com.passenger.Login`, () => LoginScreen);

}