createStackNavigation invariant violation element type is invalid expected a string

Question

Upon creating importing and using createStackNavigation I'm getting the following error. Any help would be greatly appreciated! Also, this is my first app in react-native so please be patient with me.

I've tried other versions of StackNavigation read other posts relating to the error but none of them seem to get me anywhere.

import React, { Component } from "react";
import { Center } from "@builderx/utils";
import { View, StyleSheet, Image, Text } from "react-native";
import { createAppContainer } from 'react-navigation';
import { MainNavigation } from '../screens/MainNavigator';


const AppContainer = createAppContainer(MainNavigation);

export default class DlLoading_2 extends Component {
  render() {
    return (
      <View style={styles.root}>
        <Center />
        <AppContainer
          TouchableHighlight onPress={() => 
this.navigation.navigate('DlMain')}>
          Image style={styles.blueDisk} source= . 
  {require('../assets/ComponentTMP_0-image.jpg')} />
        </AppContainer>

        <Center horizontal>
          <Image
            source={require("../assets/ComponentTMP_0-image2.png")}
            style={styles.dlLogo}
          />
        </Center>
        <Center horizontal>
          <Text style={styles.text}>TRANSINDENTAL MEDITATION</Text>
        </Center>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  root: {
    backgroundColor: "#FFFFFF",
    flex: 1
  },
  blueDisk: {
    height: 401.5,
    width: 602,
    position: "absolute"
  },
  dlLogo: {
    height: 97,
    width: 300,
    position: "absolute",
    top: "6.61%"
  },
  text: {
    height: 53,
    width: 301,
    top: 660,

    position: "absolute",
    backgroundColor: "transparent",
    lineHeight: 24,
    letterSpacing: 0,
    fontFamily: "Gotham-Book",
    fontSize: 24,
    textAlign: "center",
    color: "rgba(92,92,95,1)"
  }
});

Here is my MainNavigator.js too:

import DlLoading_2 from "./src/screens/DlLoading_2";
import DlMain from "./src/screens/DlMain";
import { createStackNavigator, createAppContainer } from "react- 
navigation";
import { create } from "handlebars";

const MainNavigator = createStackNavigator({
    DlLoading_2: {
      screen: DlLoading_2
    },
    DlMain: {
      screen: DlMain
    }
  },
  {
    headerMode: "none"
  }
  );

  export default createAppContainer(MainNavigator);

Answer 1

On the DLLoading_2 page

const AppContainer = createAppContainer(MainNavigation);

• It's okay if you don't have the above code.

 constructor(props) {
    super(props);

    this.state = {};
  }
  .
  .
  .
this.props.navigation.navigate('DlMain')

 <View style={styles.root}>
        <Center />

• Is this necessary?

  MainNavigator.js

const AppContainer = createAppContainer(MainNavigator);

export default AppContainer;

Answer 2

Its the problem with 'export default' and import with {} or without {}.

Change this line

import { MainNavigation } from '../screens/MainNavigator';

to (remove the curly brackets)

import  MainNavigation  from '../screens/MainNavigator';