React native Question posted in
The official React Native documentation can be found here.

React native – How to navigate to the Home screen.?

My code has an error when logging in successfully but does not redirect to the Home screen.
I don’t know what happened this my code. I think the problem is my young code and a really don’t know how to fix that.
Please help me to fix my code. Tks !

StackNavigation.js

import { createNativeStackNavigator } from '@react-navigation/native-stack'
import React, { useState, useEffect } from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Startup_screen from '../screens/Begin/Startup_screen';
import Authorization from '../screens/Begin/Authorization';
import Home from '../screens/Main/HomeTab/Home';
import { COLOR, ICON } from '../constants/Theme';
import { appStyle, windowHeight } from '../constants/AppStyle';
import Registration from '../screens/Begin/Registration';
import MyorderCurrent from '../screens/Main/HistoryTab/MyorderCurrent';
import MyorderHistory from '../screens/Main/HistoryTab/MyorderHistory';
import { Image, Text, View } from 'react-native';
import Account from '../screens/Main/ProfileTab/Account';
import Forgot_password from '../screens/Begin/Forgot_password';
import MyCart from '../screens/Main/HomeTab/MyCart';
import UpdateAccount from '../screens/Main/ProfileTab/UpdateAccount';
import Reward from '../screens/Main/ProfileTab/Reward';
import OrderDetail from '../screens/Main/HomeTab/OrderDetail';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();


const StackBegin = () => {
  return (

    <Stack.Navigator
      initialRouteName="Start"
      screenOptions={{ headerShown: false }}>
      <Stack.Screen name='Start' component={Startup_screen} />
      {props => <Startup_screen {...props} />}
      <Stack.Screen name='Authorization' component={Authorization} />
      {props => <Authorization {...props} />}
      <Stack.Screen name='Registration' component={Registration} />
      {props => <Registration {...props} />}
      <Stack.Screen name='ForgotPassword' component={Forgot_password} />
      {props => <Forgot_password {...props} />}
    </Stack.Navigator>


  )
};

const StackHome = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Home" component={Home}></Stack.Screen>
      <Stack.Screen name="MyCart" component={MyCart}></Stack.Screen>
      <Stack.Screen name="OrderDetail" component={OrderDetail} />
    </Stack.Navigator>
  );
};

const StackHistory = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="MyorderCurrent" component={MyorderCurrent}></Stack.Screen>
      <Stack.Screen name="MyorderHistory" component={MyorderHistory}></Stack.Screen>
    </Stack.Navigator>
  );
};

const StackProfile = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Account" component={Account}></Stack.Screen>
      <Stack.Screen name="UpdateAccount" component={UpdateAccount}></Stack.Screen>
      <Stack.Screen name="Reward" component={Reward}></Stack.Screen>
    </Stack.Navigator>
  )
};

const Main = ({ name }) => {
  return (
    <Tab.Navigator
      initialRouteName="StackHome"
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName, label;

          if (route.name === 'StackHome') {
            iconName = focused ? ICON.HomeFocus : ICON.Home;
            label = "Trang chủ";


          } else if (route.name === 'StackHistory') {
            iconName = focused ? ICON.HistoryFocus : ICON.History;
            label = "Lịch sử";

          } else if (route.name === 'StackProfile') {
            iconName = focused ? ICON.AccountFocus : ICON.Account;
            label = "Hồ sơ";
          }
          return (
            <View
              style={{
                flex: 1,
                alignItems: 'center',
                marginTop: 10,
              }}>
              <View>
                <Image
                  source={iconName}
                  style={{
                    width: 26,
                    height: 26,

                    resizeMode: 'stretch',
                    tintColor: focused ? COLOR.primary : COLOR.grayText,
                  }}
                />
              </View>
              <Text
                style={{
                  fontSize: 10,
                  fontWeight: 600,
                  marginTop: 4,
                  color: focused ? COLOR.primary : COLOR.grayText,
                }}>
                {label}
              </Text>
            </View>
          );
        },
        tabBarHideOnKeyboard: true,
        headerShown: false,
        tabBarShowLabel: false,
        tabBarStyle: {
          height: windowHeight * 0.075,
          position: 'absolute',
          backgroundColor: COLOR.background,
        },
      })}
    >
      <Tab.Screen name="StackHome" component={StackHome} initialParams={{ name }} />
      {props => <StackHome {...props} />}
      <Tab.Screen name="StackHistory" component={StackHistory} />
      {props => <StackHistory {...props} />}
      <Tab.Screen name="StackProfile" component={StackProfile} />
      {props => <StackProfile {...props} />}
    </Tab.Navigator>
  )
};

const StackNavigation = () => {
  const [isLogin, setIsLogin] = useState(false);
  return (
    <>
      {
        isLogin ? <Main/> : <StackBegin />
      }
    </>

  )
}

export default StackNavigation;

Authorization.js

const Authorization = () => {
    const navigation = useNavigation();
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [isLogin, setIsLogin] = useState(false);

    const handleLogin = async () => {
        try {
            const response = await axios.post('http://10.0.2.2:3000/users/login', {
                email: email,
                password: password
            });

            console.log('Server response:', response.data);

            if (response.data && response.data.token) {
                // Lưu trữ token vào AsyncStorage
                await AsyncStorage.setItem('userToken', response.data.token);
                setIsLogin(true);
                Alert.alert('Login successful');

                const storedToken = await AsyncStorage.getItem('userToken');
                console.log('Stored token:', storedToken);
            } else {
                Alert.alert('Login failed', 'Token not found in server response');
            }
        } catch (error) {
            console.log('Login error:', error);
            if (error.response && error.response.data) {
                Alert.alert('Login failed', error.response.data.message);
            } else {
                Alert.alert('Login failed', 'An error occurred during login.');
            }
        }
    };

    const handleSignUp = () => {
        navigation.navigate('Registration');
    };

    const handleForgot = () => {
        navigation.navigate('ForgotPassword');
    };

    return (
        <SafeAreaView style={appStyle.container}>
            <TouchableOpacity onPress={() => navigation.goBack()}>
                <FastImage resizeMode="stretch" source={ICON.Back} style={appStyle.icon} />
            </TouchableOpacity>
            <View style={{ marginTop: windowHeight * 0.06, marginBottom: windowHeight * 0.04 }}>
                <Text style={appStyle.text24}>Sign in</Text>
                <Text style={[appStyle.text16, { color: COLOR.lightText, marginTop: 27 }]}>Welcome back</Text>
            </View>

            {/* INPUT EMAIL */}
            <View style={[styles.viewRow]}>
                <View style={styles.rowbetween}>
                    <FastImage tintColor={COLOR.primary} resizeMode="stretch" source={ICON.Mail} style={[appStyle.icon, { width: 26 }]} />
                    <Text style={{ fontSize: 35, color: COLOR.lightText, fontWeight: '200' }}>|</Text>
                </View>
                <TextInput
                    style={{ marginLeft: 25 }}
                    placeholder="Email address"
                    placeholderTextColor='#C1C7D0'
                    fontSize={16}
                    value={email}
                    onChangeText={setEmail}
                >
                </TextInput>
            </View>

            {/* INPUT PASSWORD */}
            <View style={[styles.viewRow]}>
                <View style={styles.rowbetween}>
                    <FastImage tintColor={COLOR.primary} resizeMode="stretch" source={ICON.Lock} style={[appStyle.icon, { height: 26 }]} />
                    <Text style={{ fontSize: 35, color: COLOR.lightText, fontWeight: '200' }}>|</Text>
                </View>
                <TextInput
                    style={styles.input}
                    placeholderTextColor='#C1C7D0'
                    placeholder="Password"
                    fontSize={16}
                    value={password}
                    onChangeText={setPassword}
                    secureTextEntry
                >
                </TextInput>
                <TouchableOpacity>
                    <FastImage tintColor={COLOR.primary} resizeMode="stretch" source={ICON.Eye} style={[appStyle.icon, { width: 26 }]} />
                </TouchableOpacity>
            </View>

            {/* FORGOT PASSWORD */}
            <TouchableOpacity
                onPress={() => handleForgot()}
                style={{ width: windowWidth * 0.32, alignSelf: 'center', borderBottomWidth: 1, borderColor: COLOR.primary, marginTop: 30 }}>
                <Text style={[appStyle.text16Bold, { color: COLOR.primary }]}>Forgot Password?</Text>
            </TouchableOpacity>

            {/* BUTTON SIGN IN */}
            <View style={styles.next}>
                <AppButton
                    icon={ICON.Next}
                    width={70}
                    height={70}
                    borderRadius={35}
                    onPress={handleLogin}
                />
            </View>

            {/* SIGN UP */}
            <View style={styles.form3}>
                <Text style={styles.title3}>New member?</Text>
                <TouchableOpacity onPress={() => handleSignUp()}>
                    <Text style={styles.title4}>Sign up</Text>
                </TouchableOpacity>
            </View>
        </SafeAreaView>

    )
}

export default Authorization

I try everything to do this problem but not good

enter image description here
enter image description here

Tags:

2

Answers


  1. 0

    This is how I handle my navigation. Please refer,

    Login.js

    import React, { useState,useRef  } from 'react'
import {  View,SafeAreaView,Image,ActivityIndicator,StatusBar } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler';
import axios from 'axios';
import { DataTable, Divider, TextInput,Button,Text } from 'react-native-paper';

import Footer from '../Templates/Footer';
import ApiPath from '../../resources/ApiPath';
import Styles from '../../resources/Style';
import {setStorage} from '../../resources/Utill';
import {showError,showSuccess} from '../../resources/Notice/ErrorMessage';
import Logo from '../../resources/images/logo.jpg';
import OfflineNotice from '../../resources/Notice/OfflineNotice';
import { useLogin } from '../Navigation/LoginProvider';


const Login = ({navigation}) => {

    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [isloading, setisLoading] = useState(false)
    const inputRef = useRef();
    const {setIsLoggedIn} = useLogin();


    const handleButtonClick = () => {
        inputRef.current.focus();
    }

    funcLogin= async()=>{
        
        if(!username.trim()) {
            showError("Username required");
            return false
        }
        if(!password.trim()){
            showError("Password required");
            return false
        }
        try{
            let path = ApiPath.getAuthLogin();
            setisLoading(true);
            axios.post(path, {
                user: username,
                pwd: password,
            }).then( function  (response) {
                if(response.data.msg == 1){
                    setStorage(response.data);
                    setisLoading(false)
                    setIsLoggedIn(true)
                    // navigation.navigate('app');
                }
                else if(response.data.msg == 0){
                    showError(response.data.message);
                    setisLoading(false)
                    handleButtonClick();
                    setIsLoggedIn(false)
                }
                else{
                    // navigation.navigate('auth');
                    setisLoading(false)
                    setIsLoggedIn(false)
                }
            }).catch((error) => {
                showError('Error: ' + error)
            });
        }catch (error){
            showError('Error: ' + error)
            // navigation.navigate('auth');
            setisLoading(false)
            setIsLoggedIn(false)
        }
       
    }

  return (
    <SafeAreaView style={Styles.root}>
        <StatusBar barStyle="light-content" backgroundColor="#b61b1b" />
        <OfflineNotice/>
            <View style={Styles.logocontainer}>
                <Image source={Logo} style={Styles.logo} resizeMode="contain" />
            </View>
             <Text variant="titleLarge" style={Styles.heading}>Parliament of Sri Lanka.</Text>
                 <View style={Styles.container}>
                    <TextInput label="Username" mode="outlined"  style={{width:'80%'}}  onChangeText={(username) => setUsername(username.toLowerCase())} ref={inputRef} />
                 </View>
                 <View style={Styles.container}>
                    <TextInput label="Password"  mode="outlined"  style={{width:'80%' }} onChangeText={(password) => setPassword(password)} secureTextEntry={true} ref={inputRef}/>
                 </View>
                 <View style={{alignItems:'center', paddingTop:10}}>
                    <Button  mode="elevated" onPress={() =>funcLogin()} style={{ width:'80%'}} buttonColor="#3377FF" textColor="#fff" >
                        {(setisLoading===true ? 'Loading' : 'Login'  )} 
                    </Button>
                    {(isloading ?
                      <View>
                        <ActivityIndicator/>
                    </View>
                   : '')}
                 </View>
                <Footer/>
        </SafeAreaView>
  )
}

export default Login

    Here I have used useContext hook to maintain my loggedInstatus. In your code You also set setIsLogin(true);
    but you have used useState Hook. It is not managing state globaly. please refer useContext

    In here I checked for user token.

    LoginProvider.js

    import React,{ createContext, useContext, useState, useEffect} from 'react'
import { View, Text } from 'react-native'
import AsyncStorage from '@react-native-async-storage/async-storage';


const LoginContext = createContext();

const LoginProvider = ({children}) => {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    useEffect(async()=>{
        const token= await AsyncStorage.getItem('userToken') 
        console.log(token)
        (token ? setIsLoggedIn(true) : setIsLoggedIn(false))
      },[])

  return (
    <LoginContext.Provider value={{isLoggedIn, setIsLoggedIn}}>
        {children}
    </LoginContext.Provider>
  )
}

export const useLogin = () => useContext(LoginContext)


export default LoginProvider

    Now I have checked setIsLoggedIn true or false based on it I rendered the navigations. I have one drawer navigation called Appstack and stack navigation Authstack

    Route.js

    import React, { Component, useEffect, useState } from 'react';
import { NavigationContainer} from '@react-navigation/native';
import 'react-native-gesture-handler';

import AuthStack from './Authstack';
import AppStack from './Appstack';
import { useLogin } from './LoginProvider';


function Route() {

  const {isLoggedIn, setIsLoggedIn} = useLogin()

    return (
      <NavigationContainer  >
          {(isLoggedIn ? <AppStack/> : <AuthStack/>) }
      </NavigationContainer>
    );
  }

  export default Route;

    Hope you can get an idea

    Login or Signup to reply.
  2. 0

    Here Buddhika Athukorala is correct.

    But if you want to do temparary switch when you are successfully login, then you can do one thing, when your successfully login you can store the response data in reducer assume you have initalState in reducer of userDetail: [], empty array.

    import { useSelector } from 'react-redux';
const StackNavigation = () => {
const hasUserDetails = useSelector(state => state.auth.userDetails);
  return (
    <>
      {
        hasUserDetails.length !== 0 ? <Main/> : <StackBegin />
      }
    </>

  )
}

export default StackNavigation;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search