Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

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

$
0
0

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;

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>