REACT NATIVE QUESTION TypeError: undefined is not an object (evaluating 'navigation.navigate') ...,

Question

App.js (Login)
    import * as React from 'react';
    import {useState} from 'react';
    import { Text, StyleSheet, 
    KeyboardAvoidingView, ScrollView, Image,
    TextInput, TouchableOpacity, View } from 'react-native';
    import { CheckBox } from 'react-native-elements';
    import {Ionicons} from '@expo/vector-icons'
    import {statusBar01} from './src/statusBar';
    
    
    
    
    const Login = ({navigation}) => {
    const [input, setInput] = useState('');
    const [hidePass, setHidePass] = useState(true);
    const [ischecked1, setIschecked1] = useState(true)
    //const navigation = useNavigation(); 
    
    
    return (
        
        <KeyboardAvoidingView
            style={styles.container}
        >
            <ScrollView>
                <Image
                    source={require('./assets/logo.png')}
                    style={styles.logo}
                />
                <Text style={styles.helloText}> 
                    Olá de novo !
                </Text>
                <Text style={styles.welcomeText}>
                    Bem-vindo(a) de volta,
                    sentimos sua falta! 
                </Text>
                
                <TextInput
                    style={styles.inputArea}
                    placeholder="Digite o e-mail"
                />
                <TextInput
                    style={styles.inputArea}
                    placeholder="Senha"
                    value={input}
                    onChangeText={ (texto) => setInput(texto)}
                    secureTextEntry={hidePass}
                />
                <TouchableOpacity style={styles.eye} onPress={ () => setHidePass(!hidePass) }>
                    <Ionicons name={hidePass ? 'eye' : 'eye-off'}
                        color="#A0D800" size={25}
                    />
                </TouchableOpacity>
                <View style={styles.checkBoxStyle}>
                    <CheckBox
                        left
                        size={18}
                        checkedColor='#A0D800'
                        value={ischecked1}
                        checked={ischecked1}
                        onPress={() => setIschecked1(!ischecked1)}
    
                        containerStyle={{ backgroundColor: "transparent",
                        borderColor: "transparent", marginRight: 0}}
                    />
                    <TouchableOpacity>
                    <Text style={styles.Connected}> 
                        Manter-se conectado
                    </Text>
                    </TouchableOpacity>
    
                    <TouchableOpacity>
                    <Text style={styles.forgotPassword}> 
                        Esqueci minha senha
                    </Text>
                    </TouchableOpacity>
                </View>
                
    
                <TouchableOpacity 
                    style={styles.botao}
                    
                    onPress={() => navigation.navigate('HomeScreen')}
                >
                    <Text style={styles.botaoText}>Entrar</Text>
                </TouchableOpacity>
            </ScrollView>
        </KeyboardAvoidingView>
    );
    
    }
    const styles = StyleSheet.create({
    container: {
        flex: 2,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    logo: {      
        marginTop:50,
        marginBottom: 80,
        width: 150,
        height: 40,
        
    },
    inputArea:{
       marginTop: 30,
       padding: 15,
       height: 60,
       width: 370,
       borderColor: '#808080',
       borderWidth: 1,
       backgroundColor: '#fff',
       fontSize: 16,
       fontWeight: 'bold',
       borderRadius: 15
    },
    botao: {
        width: 350,
        height: 60,
        backgroundColor: '#000000',
        marginTop: 35,
        marginLeft: 8,
        borderRadius: 15,
        alignItems: 'center',
        justifyContent: 'center',
        
    },
    botaoText: {
      fontSize: 15,
      fontWeight: 'bold',
      color: '#fff'
    },
    helloText: {
      fontSize: 40,
      fontWeight: 'bold',
      marginTop: 15,
      color: '#000000',
      marginEnd: 120,
      marginTop: 8
    },
    welcomeText: {
      fontSize: 16,
      marginTop: 10,
      marginEnd: 35,
      marginVertical: 10,
      color: '#808080',
    },
    forgotPassword: {
      textDecorationLine: 'underline',
      fontWeight: 'bold',
      marginTop: 15,
      marginBottom: 15,
      marginLeft: 30,
      fontSize: 12
    },
    Connected:{
      textDecorationLine: 'underline',
      fontWeight: 'bold',
      marginTop: 15,
      fontSize: 12,
      marginRight: 55,
      marginLeft: -5
    },
    checkBoxStyle:{
      marginTop: 15,
      flexDirection: 'row',
      marginStart: -10
    },
    eye:{
    alignSelf: 'flex-end',
    bottom: 42,
    right: 40
    }
    })
    
    export default Login;
    
    HomeScreen.js
    
    
    import * as React from 'react';
    import { useState } from 'react';
    import { Text, View, ScrollView, KeyboardAvoidingView, Image, TouchableOpacity} from 'react-native';
    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
    import { Entypo, Feather } from 'react-native-vector-icons';
    import SwitchSelector from "react-native-switch-selector";
    import {Card} from 'react-native-shadow-cards';
    import * as Progress from 'react-native-progress';
    import { NavigationContainer } from '@react-navigation/native';
    import statusBar01 from './src/statusBar';
    import 'react-native-gesture-handler';
    import {createStackNavigator} from 'react-navigation/stack'
    
    import Login from '../../App';
    //import { HomeScreen } from './src/screens/HomeScreen';
    //import { TasksScreen } from './src/screens/TasksScreen';
    //import { SettingsScreen } from './src/screens/SettingsScreen';
    
    
    
    function TasksScreen() {
    
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Tasks!</Text>
        </View>
      );
    }
    
    function HomeScreen() {
        const options = [
          { label: "Active", value: "a" },
          { label: "New", value: "n" },
        ];
        const [showHide, setShowHide] = useState(false);
        
    
      return (
        <KeyboardAvoidingView style={{
          flex: 2,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#fff'
        }}>
          <ScrollView >
        
          <Text style={{textAlign:'left', fontSize: 33,
           fontWeight:'bold', paddingTop: 100,
           paddingLeft: 20, bottom: 55}}>
           {'Olá, \nUsuário!'}
          </Text>
    
          <Text style={{paddingLeft: 20,
               color: '#808080', bottom: 80,
               fontSize: 20 , paddingTop: 50}}>
              Minhas tasks</Text>
    
          <Image
          source={require('./assets/images/user.jpeg')}
          style={{marginTop:50,
            width: 55,
            height: 55,
            borderRadius: 10,
            top: -250,
            left: 300,
            borderColor: '#ECECEC',
            borderWidth: 1
           }    
          }
            />
    
            <SwitchSelector 
            style={{width:390,paddingLeft: 15, bottom: 160}}
            textColor={'#FFFFFF'}
            selectedColor={'#000000'}
            fontSize={15}
            height={60}
            bold
            backgroundColor={'#000000'}
            valuePadding={-1}
            hasPadding
            borderRadius={15}
            options={options}
            initial={0}
            //onPress={value => console.log(`Call onPress with value: ${value}`)}
             />
    
          <Card style={{ margin: 19, height: 170,
             marginTop: -125}}>
           <Feather name={'file-text'}
           color={'#F2CB1D'} 
           size={20}
           style={{paddingLeft: 20, 
           top: 20,}}/>
            <Text
            style={{paddingLeft: 50}}>Task 59788</Text>
            <Entypo name={'controller-record'}
            style={{paddingLeft: 270, bottom: 14
           }}
            color={'#007ACC'}
            size={10}
            />
            <Text
            style={{paddingLeft: 290, bottom: 30}}
            >Active</Text>
            <Text style={{fontSize: 12,
            paddingLeft: 20, bottom: 15
            }}>App corporativo OnlineTeam</Text>
            <Text style={{paddingLeft: 20,
            fontSize: 20, bottom: 10}}>Criar telas no Figma</Text>
            <Text style={{paddingLeft: 20, 
            fontSize: 12}}>Original Estimate: 4h</Text>
            <Text style={{paddingLeft: 250,
            bottom: 17, fontSize: 12}}>Completed: 2h</Text>
    
            <Text style={{textAlign: 'left',
            bottom: 10, fontSize: 10,
             paddingLeft: 55}}>
            0%</Text> 
            <Progress.Bar progress={0.1} 
            width={200}
            color={'#A0D800'}
            backgroundColor={'#ECECEC'}
            borderColor={'transparent'}
            height={10}
            borderRadius={10}
            style={{alignSelf: 'center'}}
            bottom={20}
            
             />
             <Text style={{textAlign: 'right',
              fontSize: 10,bottom: 35, 
              paddingRight: 40}}>
              100%</Text>
    
    
    
          </Card>
    
          <Card style={{ margin: 19, height: 170,
             marginTop: -125, marginTop: 5}}>
           <Entypo name={'bug'}
           color={'#FF0000'} 
           size={20}
           style={{paddingLeft: 20, 
           top: 20,}}/>
            <Text
            style={{paddingLeft: 50}}>Bug 59352</Text>
            <Entypo name={'controller-record'}
            style={{paddingLeft: 270, bottom: 14
          }}
            color={'#FF0000'}
            size={10}
            />
    
            <Text
            style={{paddingLeft: 290, bottom: 30}}
            >Issue</Text>
            <Text style={{fontSize: 12,
            paddingLeft: 20, bottom: 15
            }}>Cargo Online Team</Text>
            <Text style={{paddingLeft: 20,
            fontSize: 20, bottom: 10}}>
            Acusando duplicidade de contrato...</Text>
            <Text style={{paddingLeft: 20, 
            fontSize: 12}}>Original Estimate: 4h</Text>
            <Text style={{paddingLeft: 250,
            bottom: 17, fontSize: 12}}>Completed: 2h</Text>
            <Text style={{textAlign: 'left',
            bottom: 10, fontSize: 10,
             paddingLeft: 55}}>
            0%</Text> 
            <Progress.Bar progress={0.1} 
            width={200}
            color={'#A0D800'}
            backgroundColor={'#ECECEC'}
            borderColor={'transparent'}
            height={10}
            borderRadius={10}
            style={{alignSelf: 'center'}}
            bottom={20}
            
             />
             <Text style={{textAlign: 'right',
              fontSize: 10,bottom: 35, 
              paddingRight: 40}}>
              100%</Text>
    
          </Card>
    
          </ScrollView>
        </KeyboardAvoidingView>
          
    
      );
    }
    
      function SettingsScreen() {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'  }}>
            <Text>Settings!</Text>
          </View>
        );
      }
    
    
    
    
    
    
    export default function App() {
      const Tab = createBottomTabNavigator();
      return (
        <NavigationContainer>
          <Tab.Navigator 
    
          screenOptions={{
            tabBarActiveTintColor: "#A0D800",
            tabBarInactiveTintColor: "#FFFFFF",
            //tabBarActiveBackgroundColor: "#FFFFFF",
            //tabBarInactiveBackgroundColor: "#000000",
            backgroundColor: "#FFFFFF",
            
            headerShown: false,
            
    
            tabBarSelectedItemStyle: {
              borderBottomWidth: 2,
              borderBottomColor: 'red',
            },
            
            tabBarStyle: [
              {
                display: "flex",
                backgroundColor: "#000000",
                borderTopLeftRadius: 20,
                borderTopRightRadius: 20,
                height: 70,
                overflow: 'hidden',
                alignItems: 'center',
                justifyContent: 'center', 
                
                
              },
              
              null,
            ], 
            tabBarHideOnKeyboard: true,
    
    
            tabBarLabelStyle:{
    
              //fontSize: 20,
              //fontWeight: 'bold',
              
              backgroundColor: "#000000",
              width: 60,
              flex: 0.000004,   
    
            },
    
            
          }}
          >
              
            <Tab.Screen name="  " 
            component={TasksScreen}
            options={{
              tabBarIcon: ({ color}) => (
                <Entypo name="add-to-list" 
                size={30}
                color={color}
                
                 />
                )
            }}
             />
    
            <Tab.Screen name=" " 
            component={HomeScreen}
            options={{
              tabBarIcon: ({ color}) => (
                <Feather name="home" 
                size={30}
                color={color}
                 />
                )
            }} />
            
            
            <Tab.Screen name="   " 
            component={SettingsScreen}
            options={{
              tabBarIcon: ({ color}) => (
                <Feather name="settings" 
                size={30}
                color={color}
            
             />
            )
        }}
         />
      </Tab.Navigator>
    </NavigationContainer>
    );
  }

I'm not managing to organize the code or implement a navigation on the login button for the home screen, someone helps me please??? I tried to create a Login.js and export it and the HomeScreen to the App.js but it also failed. Could someone help me with the resolution so I can proceed with my code? I need help whit this I am a begginer dev Please:(:(:(

Answer 1

Instead of relying on getting the navigation object as a prop, import useNavigation from react-navigation/core

import { useNavigation } from '@react-navigation/core';

export default function App(){
   const navigation = useNavigation()


   return(
   <View>
     <Button onPress={()=> navigation.navigate("homescreen")}/>
   </View>
   
   )
 }

Answer 2

It seems that you did not import useNavigation. Add this to your code:

import { useNavigation } from '@react-navigation/native';

then declare a const within your login function:

const navigation = useNavigation(); 

then try it again. Also ensure you are calling the correct component name within the navigation.navigate('')

Answer 3

You should define names to your screens.

For example:

<Tab.Screen name="TasksScreen" 
        component={TasksScreen}
        options={{
          tabBarIcon: ({ color}) => (
            <Entypo name="add-to-list" 
            size={30}
            color={color}
            
             />
            )
        }}
         />

        <Tab.Screen name="HomeScreen" 
        component={HomeScreen}
        options={{
          tabBarIcon: ({ color}) => (
            <Feather name="home" 
            size={30}
            color={color}
             />
            )
        }} />
        
        
        <Tab.Screen name="SettingsScreen" 
        component={SettingsScreen}
        options={{
          tabBarIcon: ({ color}) => (
            <Feather name="settings" 
            size={30}
            color={color}
        
         />

Then you can navigate them with their names like navigation.navigate("HomeScreen")

You should name them carefully.

For detailed information and examples you can check: https://reactnative.dev/docs/navigation

Have a good day!