Don't know how to use navigation.navigate in React Native app

I created a basic SplashScreen.tsx that just has some text on it. Then, I created this LoginCreateAccountScreen.tsx, which has a Login button and Create Account button. I want my app to show the SplashScreen.tsx for a few seconds before it automatically navigates to LoginCreateAccountScreen.tsx. Also, pressing the buttons should redirect the user to other screens, but that also does not work. I don't know how to do this and have had a lot of difficulties figuring out exactly how to accomplish this.

I used this React Native Navigation Article as well as This Tutorial to get to where I am right now, along with various StackOverflow posts. But to be honest, I am pretty lost as there is just so much going on with regards to frontend navigation.

I don't understand how AppNavigator.js and App.js (the entry point for my app) work in conjunction to let me be able to navigate to another screen from my current screen. Right now, I can't get any kind of navigation working. I have to manually change the screen by setting it in App.js.

My App.js, which renders the SplashScreen. But won't transition to the LoginCreateAccountScreen.

import React, { Component } from 'react';

import EmojiDict from './screens/EmojiDict';
import SplashScreen from './screens/SplashScreen';
import LoginCreateAccountScreen from './screens/LoginCreateAccountScreen'

export default class App extends Component {
    render() {
        return <SplashScreen />;
    }
}

My AppNavigator.js:

import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation";
import MainTabNavigator from "./MainTabNavigator";
import { Platform } from "react-native";
// Importing my screens here.
import LoginCreateAccountScreen from "../screens/LoginCreateAccountScreen";
import CreateAccountScreen from "../screens/CreateAccountScreen";
import LoginScreen from "../screens/Login/LoginScreen";
import SplashScreen from "../screens/SplashScreen";

const MainNavigator = createStackNavigator({
  SplashScreen: {screen: SplashScreen},
  LoginCreateAccountScreen: {screen: LoginCreateAccountScreen},
  LoginScreen: {screen: LoginScreen},
  CreateAccountScreen: {screen: CreateAccountScreen},
});

const App = createAppContainer(MainNavigator);

export default App;

My SplashScreen.tsx:

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

class SplashScreen extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.title}>
                    The Good App
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    title: {
        fontSize: 45,
        textAlign: 'center',
        fontWeight: 'bold'
    }
});

export default SplashScreen;

My LoginCreateAccountScreen.tsx:

import React, { Component } from 'react';
import {
  StyleSheet,
  Button,
  View,
  SafeAreaView,
  Text,
  Alert,
  TouchableOpacity
} from 'react-native';
import Constants from 'expo-constants';

function Separator() {
  return <View style={styles.separator} />;
}

class CreateAccountOrLogin extends Component {
    handleLogInButton = () => {
        Alert.alert('Log In pressed')
        this.props.navigation.navigate("LoginScreen");
    };

    handleCreateAccountButton = () => {
        Alert.alert('Create Account pressed')
        this.props.navigation.navigate("CreateAccountScreen");
    };

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity
                style={styles.customButtonBackground}
                onPress={() => this.handleLogInButton()}>
                    <Text style={styles.customButtonText}>Login</Text>
                </TouchableOpacity>
                <TouchableOpacity
                style={styles.customButtonBackground}
                onPress={() => this.handleCreateAccountButton()}>
                    <Text style={styles.customButtonText}>Create Account</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    /* Here, style the text of your button */
    customButtonText: {
        fontSize: 35,
        fontWeight: '400',
        color: "#fff",
        textAlign: 'center'
    },
    /* Here, style the background of your button */
    customButtonBackground: {
        backgroundColor: "#007aff",
        paddingHorizontal: 30,
        paddingVertical: 5,
        borderRadius: 30,
        width: "70%",
        aspectRatio: 5 / 1,
    }
});

export default CreateAccountOrLogin;

I get the following error when I press on the Login or Create Account button, which is the same for both: