React Navigation como utilizar

Mobile
#1

Olá amigos!

Estou tentando fazer uma transição de tela login para tela home, porém não está funcionando com o react navigation, alguem pode me dizer se estou fazendo algo errado, segue o codigo :

import React, {useState} from 'react';
import {Alert, Image, StyleSheet, Text, TextInput, TouchableHighlight, View} from 'react-native';
import { useNavigation } from "@react-navigation/native";
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';


 function App() {

   const navigation =useNavigation();

function navigateToHome(){

navigation.navigate("Home");

}

    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");

    const onLogin = () => {
        Alert.alert('Credentials', `${username} + ${password}`);
    }

    return (
        <View style={styles.container}>
            <Image
                source={{uri: 'https://icon-library.com/images/login-icon-png/login-icon-png-18.jpg'}}
                style={styles.topImage}
            />
            <View style={styles.wrapper}>
                <Text style={styles.title}>
                    Entrar
                </Text>

                <TextInput
                    value={username}
                    onChangeText={setUsername}
                    placeholder={'name@example.com'}
                    style={styles.input}
                    secureTextEntry={false}
                />

                <TextInput
                    value={password}
                    onChangeText={setPassword}
                    placeholder={'***********'}
                    secureTextEntry={true}
                    style={styles.input}
                />

                <TouchableHighlight onPress={() =>this.props.navigation.navigate('home')}style={styles.loginBtn}>
                    <Text style={styles.textLoginBtn}>
                        Login
                    </Text>
                </TouchableHighlight>

                <TouchableHighlight
                    style={styles.resetPasswordBtn}
                >
                    <Text>
                        Esqueceu a Senha?
                    </Text>
                </TouchableHighlight>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#E0FFFF',
    },
    topImage: {
        width: '100%',
        height: 200,
        resizeMode: 'contain',
        marginBottom: 50
        
      
        
    },
    wrapper: {
        maxWidth: '80%',
        width: '100%',
        justifyContent: 'center',
    },
    title: {
        fontSize: 30,
        fontWeight: 'bold',
        color: "#1a2c4d",
        marginBottom: 20
    },
    input: {
        width: '100%',
        height: 44,
        padding: 10,
        borderBottomWidth: 1,
        borderColor: '#F2F4F6',
        marginBottom: 20,
        backgroundColor:'#fff'
    },
    loginBtn: {
        width: "100%",
        height: 40,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#FF4500',
        borderRadius: 10,
    },
    textLoginBtn: {
        color: '#fff',
    },
    resetPasswordBtn: {
        width: 300,
        height: 40,
        alignItems: 'center',
        justifyContent: 'center',
        right: 90

    },
});

export default App;

PROXIMA TELA

import React from 'react';

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

import { createStackNavigator } from '@react-navigation/stack';

import home from './home';

import login from './login';

const AppStack = createStackNavigator();

export default function Routes(){

return(

<NavigationContainer>

<AppStack.Navigator>

<AppStack.Screen name="login" component={login}/>

<AppStack.Screen name="home" component={home}/>

</AppStack.Navigator>

</NavigationContainer>

);

}

import React from "react";

import Routes from "./src/pages/routes";

import 'react-native-gesture-handler';

import { StyleSheet } from 'react-native';

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

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {

return <Routes />;

}
#2

Coloca o h maiúsculo: Home, o nome é importante nesse caso.

1 curtida
#3

Tentei mas não funcionou

#4

Deu erro? O que dá?

#5

Não da erro, eu clico no botão login e ele simplesmente não avança para a proxima tela

#6

coloca no github entao, pra eu fazer o teste

#7

não manjo mto de github

#8

:thinking:

nao pode tentar?

#9

Man, fuçando aqui consegui resolver, mas era erro na hora de chamar a proxima tela no button rs vlw pela atençao!!!