Al crear, importar y usar createStackNavigation obtengo el siguiente error. Cualquier ayuda sería muy apreciada! Además, esta es mi primera aplicación en react-native, así que tenga paciencia conmigo.

He probado otras versiones de StackNavigation, leí otras publicaciones relacionadas con el error, pero ninguna de ellas parece llevarme a ninguna parte.

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)"
  }
});

Aquí también está mi MainNavigator.js:

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);