React Native 'TypeError: undefined is not an object (evaluating 'navigation.navigate')'

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow Strict-local
 */
import React from 'react';
import App from './src';
import { ProvIDer as PaperProvIDer } from 'react-native-paper';

export default App;

import * as React from 'react';
import { Text,VIEw,StyleSheet,FlatList,SafeAreaVIEw } from 'react-native';
import { List,button,TexTinput,FAB,Avatar,Card,title,Paragraph } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator} from '@react-navigation/stack';
import ProjectList from '_scenes/projects';
import NewProject from '_scenes/projects/addproject';
import ProjectDetail from '_scenes/projects/projectdetails';
import SetTings from '_scenes/setTings';


const Tab = createBottomTabNavigator();


const Projects = ({ navigation }) => (
    <ProjectList navigation={navigation} />
);


function SetTingsScreen( { navigation} ) {
  return (
    <SetTings />
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRoutename="HomeScreen">
        <Tab.Screen name="Home" component={Projects} options={{ tabbarBadge: 3 }}/>
        <Tab.Screen name="SetTings" component={SetTingsScreen} options={{ tabbarBadge: 2 }}/>
      </Tab.Navigator>
    </NavigationContainer>
  );
}

import React,{ useEffect,useState } from 'react';
import { ActivityInDicator,Text,VIEw } from 'react-native';
import { Item,List,button } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator} from '@react-navigation/stack';
import NewProject from '_scenes/projects/addproject';
import ProjectDetail from './projectdetails';

ProjectList = ({ navisation }) => {

  const [isLoading,setLoading] = useState(true);
  const [data,setData] = useState([]);

  useEffect(() => {
    fetch('http://xxx.xxx.xxx.xxx/projects')
      .then((responsE) => response.Json())
      .then((Json) => setData(Json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  },[]);

  function Projects ( {navigation }) {
    return (
      <VIEw style={{ flex: 1,padding: 24 }}>
        <FlatList
        data={data} 
        keyExtractor={({ ID },indeX) => ID}
        renderItem={renderProject}
        />
      </VIEw>
    )
    }

  const renderProject = ({ navigation,item }) => (
    <List.Item
    title={item.title}
    description={item.description}
    onPress={() => navigation.navigate('ProjectDetails')}
    />
  );

  const AddProject = ({ navigation }) => (
      <NewProject />
  );

  function ProjectDetails({navigation}) {
    return (
      <ProjectDetail />
    );
  }

  function Chat({navigation}) {
    return (
      <VIEw>
        <Text>Chat</Text>
      </VIEw>
    );
  }



  const Stack = createStackNavigator();
  return (
    <Stack.Navigator>
      <Stack.Screen title="Home" name="Home" component={Projects} options={{headerShown: falsE}}/>
      <Stack.Screen title="Add Project" name="AddProject" component={AddProject} />
      <Stack.Screen title="Project Details" name="ProjectDetails" component={ProjectDetails} />
      <Stack.Screen title="Chat" name="Chat" component={Chat} />      
    </Stack.Navigator>

    );
};

export default ProjectList;