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;