Error React Native with Expo, Navigation ''navigation.navigate is not a function"

Question

Im creating a simple React native App using Expo(Typescript) and Ract-navigation. I define two Screens, Login and Home, when i trying to navigate from Login to Home, produces an error:

" TypeError: navigation.navigate is not a function. (In 'navigation.navigate('Home')', 'navigation.navigate' is undefined )"

My principal code:

App.tsx

import React, {useState} from 'react';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import Navigator from './Components/Navigator';

export default class App extends React.Component {
  render(){
   return (
     <NavigationContainer>
       <Navigator/>
     </NavigationContainer>
  );
 }
}

Navigator.tsx

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import Login from '../Views/Login'
import Home from '../Views/Home'

const Stack = createStackNavigator();

const Navigator= () =>{
   return (
        <Stack.Navigator>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Home" component={Home} options={{title:'Home.'}}/>
        </Stack.Navigator>
   );
}

export default Navigator;

Login.tsx (When press button, if texinputs have values then navigate to Home.tsx)

import React, {useState} from 'react'
import {Text, TextInput, View, Image, Button } from 'react-native'
import styles from './Styles/LoginStyles'

const Login=(navigation)=>{
  const [result, setResult] =useState(false);
  const [userName, setUserName] =useState('');
  const [password, setPassword] =useState('');

  return( 
    <View style={styles.container}>
      <Image source={{uri: "https://www.clipartmax.com/png/middle/104-1046810_coffee-png-picture-banner-for-opening-restaurant.png"}}
    style={styles.imgLog}/>
      <Text style={{fontSize:30, paddingBottom:10}}>Welcome!</Text>
      <TextInput placeholder="Username..." defaultValue={userName} onChangeText={txt=> setUserName(txt)} style={styles.txtInputsLog}/>
      <TextInput placeholder="Password..." defaultValue={password} onChangeText={txt=> setPassword(txt)} style={styles.txtInputsLog} secureTextEntry={true}/>
      <Button title="Login" onPress={()=> (userName.length>0 && password.length>0)? navigation.navigate('Home') : setResult(!result)}/>

      {result?<Text>Usuario: {userName}, Password: {password}</Text> : null}
    </View>
   );
}

export default Login;

Answer 1

Full Working App: Expo Snack

import React, { useState } from 'react';
import { Text, TextInput, View, Image, Button, StyleSheet } from 'react-native';

const Login = ({navigation}) => {
  const [result, setResult] = useState(false);
  const [userName, setUserName] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View style={styles.container}>
      <Image
        source={{
          uri:
            'https://www.clipartmax.com/png/middle/104-1046810_coffee-png-picture-banner-for-opening-restaurant.png',
        }}
        style={styles.imgLog}
      />
      <Text style={{ fontSize: 30, paddingBottom: 10 }}>Welcome!</Text>
      <TextInput
        placeholder="Username..."
        defaultValue={userName}
        onChangeText={(txt) => setUserName(txt)}
        style={styles.txtInputsLog}
      />
      <TextInput
        placeholder="Password..."
        defaultValue={password}
        onChangeText={(txt) => setPassword(txt)}
        style={styles.txtInputsLog}
        secureTextEntry={true}
      />
      <Button
        title="Login"
        onPress={() =>
          userName.length > 0 && password.length > 0
            ? navigation.navigate('Home')
            : setResult(!result)
        }
      />

      {result ? (
        <Text>
          Usuario: {userName}, Password: {password}
        </Text>
      ) : null}
    </View>
  );
};

export default Login;