Cannot read Property 'StackView' of undefined

I tried to implement react navigation but i faced a lot of errors even though my codes are well structured according to navigation standards. Idk what could possibly my mistake/s that prevented me from navigating components

Im Using the bare react-native not with the expo

I expected to let me navigate from another component without those issues. I hope someone will resolve this problem. Thanks

App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AppNavigator from './components/AppNavigator';
import {StorageCon} from './components/StorageCon';

export default function App() {
  return (
    <NavigationContainer>
   
      <AppNavigator/>
   
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

AppNavigator.js

import { createStackNavigator } from "@react-navigation/stack";
import TitlescreenPage from "./TitlescreenPage";

const Stack = createStackNavigator();

const AppNavigator=()=>{

    return(
        <>
        <Stack.Navigator>
            <Stack.Screen name = "titlescreen" component={TitlescreenPage} />
        </Stack.Navigator>

        </>
    );
};

export default AppNavigator;

enter image description here enter image description here

you are importing createStackNavigator from "@react-navigation/stack".

import { createNativeStackNavigator } from '@react-navigation/native-stack'

if it does not fix your issue, try installing react-native-gesture-handler