react – TypeError: Cannot read property ‘navigate’ of undefined


Consigo fazer o navigation da minha pagina de Main para pagina Home mas não consigo fazer da Home para Atletas, sendo que a configuração ta igual.

Estou usando um cara no meio, então seria da minha pagina Home eu chamo a Listas e dentro da Listas estou tentando chamar a navigation.navigate(‘Atletas’); Dipara o erro:

TypeError: Cannot read property ‘navigate’ of undefined

Seguem os arquivos:
Main.js
Home.js
Routes.js
Lista.js
Atletas.js

**Main**

import React, { useState, Component } from 'react';
import { Text, View, StyleSheet, Button, TouchableOpacity, Alert, KeyboardAvoidingView} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

//Importações Internas
import Atletas from '../Atletas';

export default function Listas({ navigation }){
    
    const chamarAtletas = async () => {
        navigation.navigate('Atletas');
    };
    
    return(
        
        <KeyboardAvoidingView style={styles.background}>
        <TouchableOpacity style={styles.btnAtletas} onPress={chamarAtletas}>
            <Text style={styles.textobtnAtletas}>Atletas</Text>
        </TouchableOpacity>

        </KeyboardAvoidingView>
    );
}


const styles = StyleSheet.create({
    background:{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#000',
        width: '100%'
      },
      btnAtletas:{
        backgroundColor: '#151515',
        width: '95%',
        marginBottom: 5,
        borderRadius: 7,
        padding: 30
      },
      textobtnAtletas:{
        color: '#FFF',
        fontSize: 20
      },
});```



**Home**

import * as React from 'react';
import { Text, View, StyleSheet, KeyboardAvoidingView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/Feather';

import Listas from '../Listas';

function HomeScreen() {
    return (
        <KeyboardAvoidingView style={styles.background}>
            <View style={styles.container}>
                <Text>Home!</Text>
            </View>
        </KeyboardAvoidingView>
    );
}

function ListScreen() {
    return (

        <KeyboardAvoidingView style={styles.background}>
            <Listas />
        </KeyboardAvoidingView>

    );
}

function PostScreen() {
    return (
        <View style={styles.container}>
            <Text>New Post!</Text>
        </View>
    );
}

function NotificationsScreen() {
    return (
        <View style={styles.container}>
            <Text>Notifications!</Text>
        </View>
    );
}

function SettingsScreen() {
    return (
        <View style={styles.container}>
            <Text>Settings!</Text>
        </View>
    );
}

const Tab = createBottomTabNavigator();

export default function App( {navigation} ) {
    return (
            <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarIcon: ({ color, size }) => {
                    let iconName;
        
                    switch (route.name) {
                        case ' ':
                            iconName = 'home';
                            break;
                        case '  ':
                            iconName = 'list';
                            break;
                        case '   ':
                            iconName = 'edit';
                            break;
                        case '    ':
                            iconName = 'bell';
                            break;
                        case '     ':
                            iconName = 'settings';
                            break;
                        default:
                            iconName = 'circle';
                            break;
                    }
        
                    return <Icon name={iconName} size={size} color={color} />;
                },
            })}
                tabBarOptions={{
                activeTintColor: '#FFF',
                inactiveTintColor: '#FFF',
                activeBackgroundColor: '#000',
                inactiveBackgroundColor: '#151515',
            }}
        >
                <Tab.Screen name=" " component={HomeScreen} />
                <Tab.Screen name="  " component={ListScreen} />
                <Tab.Screen name="   " component={PostScreen} />
                <Tab.Screen name="    " component={NotificationsScreen} />
                <Tab.Screen name="     " component={SettingsScreen} />
            </Tab.Navigator>
    );
}

const styles = StyleSheet.create({
    container: {
        left: 1,
        justifyContent: "center",
        alignContent: "center"
    },
    background:{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#000'
    },
});


**Routes**

import React from 'react';
import { createAppContainer, createSwitchNavigator, NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, HeaderTitle } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Main from '../pages/Main';
import Home from '../pages/Home';
import Atletas from '../pages/Atletas';

import { NONE } from 'apisauce';

const Stack = createStackNavigator();

export default function Routes(){
    return (
        <NavigationContainer>
            <Stack.Navigator>
            <Stack.Screen 
                name="Main" 
                component={Main}
                options={{
                    headerShown: NONE
                }}
            />
            <Stack.Screen 
                name="Home"
                component={Home}
                options={{
                    headerShown: NONE
                }}
            />
            <Stack.Screen 
                name="Atletas" 
                component={Atletas}
                options={{
                    headerShown: NONE
                }}
            />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

**Listas**

import React, { useState, Component } from 'react';
import { Text, View, StyleSheet, Button, TouchableOpacity, Alert, KeyboardAvoidingView} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

//Importações Internas
import Atletas from '../Atletas';

export default function Listas({ navigation }){
    
    const chamarAtletas = async () => {
        navigation.navigate('Atletas');
    };
    
    return(
        
        <KeyboardAvoidingView style={styles.background}>
        <TouchableOpacity style={styles.btnAtletas} onPress={chamarAtletas}>
            <Text style={styles.textobtnAtletas}>Atletas</Text>
        </TouchableOpacity>

        </KeyboardAvoidingView>
    );
}

const styles = StyleSheet.create({
    background:{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#000',
        width: '100%'
      },
      btnAtletas:{
        backgroundColor: '#151515',
        width: '95%',
        marginBottom: 5,
        borderRadius: 7,
        padding: 30
      },
      textobtnAtletas:{
        color: '#FFF',
        fontSize: 20
      },
});


**Atletas**

import React, { useState, Component } from 'react';
import { Text, View, StyleSheet, Button, TouchableOpacity, Alert, KeyboardAvoidingView} from 'react-native';
import { FlatList } from 'react-native-gesture-handler';

//Importações Internas
import api from '../../services/api';


export default function Atletas(){
    const (atletas, setAtletas) = useState(());

    const getDados = async () => {
        try {
          
          const response = await api.get('/atletas/mercado');
          const { atletas } = response.data;
          console.log('Renponse = ' + atletas);
          setAtletas(atletas);
    
        } catch (response){
          Alert.alert('Deu Ruim !!!');
        }
    };

    function Lista ( {nomeLista} ){
        return(
            <KeyboardAvoidingView style={styles.backgroundLista}>
                <View style={styles.container}>
                    <Text>{nomeLista.nome}</Text>
                    <Text>{nomeLista.slug}</Text>
                </View> 
            </KeyboardAvoidingView>
        );
    }

    
    return(

        <KeyboardAvoidingView>
            <TouchableOpacity style={styles.btnCriarConta}>
                <Text style={styles.textobtnCriarConta} onPress={getDados}>Atletas</Text>
            </TouchableOpacity>

            <FlatList
                data={atletas}
                keyExtractor={ (item) => item._id }
                renderItem={({item}) => <Lista nomeLista={item}/>}
            />
        </KeyboardAvoidingView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center'
    },
    btnCriarConta:{
        marginTop: 10,
    },
    textobtnCriarConta:{
        color: '#041726'
    },
    background:{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#041726'
    },
});