Element type is invalid: expected a string when using NavigatorIOS on React Native

Question

I get an error when trying to render a NavigatorIOS component. When attempted with a simple View and a Text, it worked fine. But for the NavigatorIOS it gives an error.

import React, {Component} from 'react';

const LandingPage = require('./layouts/landing_page/LandingPage');
const I18n = require('react-native-i18n');
const AsyncStorageHelper = require('./ios_commons/helper/AsyncStorageHelper');
const moment = require('moment');
var TranslationProperty = require('./properties/TranslationProperties.json');

import {StyleSheet, StatusBar, NavigatorIOS} from 'react-native';

export default class App extends Component<{}> {
    constructor(props) {
        super(props);
        this.state = {};
        I18n.fallbacks = true;
        I18n.translations = require('./ios_commons/Strings');
        // Text.defaultProps.allowFontScaling = false;
        StatusBar.setBarStyle('light-content', true);
        this.loadAppSpecificLanguage();
    }

    loadAppSpecificLanguage = () => {
        AsyncStorageHelper.getAppSpecificLanguage()
            .then(item => {
                if (item !== null) {
                    console.log('Found app specific locale ' + item);
                    let userDefinedLocale = JSON.parse(item).code;
                    I18n.locale = userDefinedLocale;
                    moment.locale(userDefinedLocale);
                } else {
                    console.log('App specific language property not found');
                    let defaultLocale = TranslationProperty.slice()[0];
                    if (defaultLocale === null || defaultLocale === undefined) {
                        console.log(
                            'LOCALIZATION WARNING: Couldn\'t find default locale. Setting to locale \'en\'',
                        );
                        I18n.locale = 'en';
                        moment.locale('en');
                    } else {
                        console.log('Setting default locale ' + defaultLocale.code);
                        moment.locale(defaultLocale.code);
                        AsyncStorageHelper.saveAppSpecificLanguage(defaultLocale);
                    }
                }
            })
            .catch(error => {
                console.log('Failed to obtain app specific language ' + error);
            });
    };

    render() {
        return (
            <NavigatorIOS
                style={styles.navigationContainer}
                ref="nav"
                initialRoute={{
                    title: 'LandingPage',
                    component: LandingPage,
                }}
                navigationBarHidden={true}
            />
        );
    }
}

const styles = StyleSheet.create({
    navigationContainer: {
        flex: 1,
    },
});

The error I'm seeing is as follows:

Unhandled JS Exception: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

This error is located at: in App (at renderApplication.js:45) in RCTView (at AppContainer.js:109) in RCTView (at AppContainer.js:135) in AppContainer (at renderApplication.js:39)

What is causing this? How to fix this?