Typeerror: Cannot read Property 'navigate' of Undefined

Question

I can do the navigation of my page of Main for page Home but I can’t do Home for Athletes, where the configuration ta equals.

I’m using a guy in the middle, so it would be from my page Home I call the Lists and within the Lists I’m trying to call the navigation.navigate('Athletes'); Wrong:

Typeerror: Cannot read Property 'navigate' of Undefined

Follow the files:
Main.js
Home js.
Routes.js
Lista.js
Athletes.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'
    },
});

Answer 1

From what I’ve seen of your code, what happens is the following, the props "navigation" will only exist for the pages you reported in your route file. Looking at your "Routes.js" file, your.Navigator stack consists of "Main", "Home" and "Athletes". As the "List" is not there, it does not receive this props.

As you said that "List" is called from "Home", and "Home" gets navigation, what you can do (without changing the route file) is to send "navigation" to the "List" as a parameter. In your "Home" file, the "Listscreen" function would look like this:

function ListScreen() {
    return (

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

    );
}

This way you could access "Athletes" from "List"