I have a problem in navigation in react-native while using the Axios

Question

1. I want to navigate to a new page when the email and password is correct(when click the button) .
2. ie while click button I i want to check API and navigate to another page ,if email and password is correct
3. Here I use AXIOS for API integration.

---------This is my code----------

import React, {useState} from 'react';
import {View,Text, TextInput, Button} from 'react-native';
import axios from 'axios';
import { useNavigation } from '@react-navigation/native';
const NewsCard = ()=>{

  
  const navigation = useNavigation();


  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
   const[name ,setName] = useState('namesssssssss')
    return(       
        <View>   
            <Text>{name}</Text> 
            <TextInput
          
          autoCorrect={false}
          autoCapitalize="none"
          keyboardType="email-address"
          onChangeText={ (text) => setEmail(text)}
          value={email}
        />

        <TextInput
         
          
          autoCorrect={false}
          autoCapitalize="none"
          onChangeText={(pswrd) => setPassword(pswrd)}
          value={password}
        />
            <Button onPress={ ()=>
axios.post('http://10.0.2.2:5000/api/admin/login',
{
  email: email,
  password: password,
})
.then(function (response) {
  // handle success
  console.log(response.data);
})
.catch(function (error) {
  // handle error
  alert('Wrong Email or Password');
})
.then(function () {
})
           } title="Click"></Button>
        </View>   
    )
}

export default NewsCard

Answer 1

Calling an API request directly from Button is highly unadvised, but this solution should work

First Create a handle function for login , calling API from render (return) is bad practice.

handleLogin

const NewsCard = ()=>{

  
const navigation = useNavigation();

const handleLogin = () => {
  axios.post('http://10.0.2.2:5000/api/admin/login',
{
  email: email,
  password: password,
})
.then(function (response) {
  // handle success
  navigation.navigate('RouteName');
  console.log(response.data);
})
.catch(function (error) {
  // handle error
  alert('Wrong Email or Password');
})
.then(function () {
})

call it in the Button component

<Button onPress={handleLogin} title="Click"></Button>

That way your code will look way more readable and clean

Answer 2

import React, {useState} from 'react';
import {View,Text, TextInput, Button} from 'react-native';
import axios from 'axios';
import { useNavigation } from '@react-navigation/native';
const NewsCard = ()=>{

  
  const navigation = useNavigation();


  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
   const[name ,setName] = useState('namesssssssss')
    return(       
        <View>   
            <Text>{name}</Text> 
            <TextInput
          
          autoCorrect={false}
          autoCapitalize="none"
          keyboardType="email-address"
          onChangeText={ (text) => setEmail(text)}
          value={email}
        />

        <TextInput
         
          
          autoCorrect={false}
          autoCapitalize="none"
          onChangeText={(pswrd) => setPassword(pswrd)}
          value={password}
        />
            <Button onPress={ ()=>
axios.post('http://10.0.2.2:5000/api/admin/login',
{
  email: email,
  password: password,
})
.then(function (response) {
  // handle success
  navigation.navigate('SomeComponent');
  console.log(response.data);
})
.catch(function (error) {
  // handle error
  alert('Wrong Email or Password');
})
.then(function () {
})
           } title="Click"></Button>
        </View>   
    )
}

export default NewsCard
react-native

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Above code can fix your problem but it isn't a right way to do this.

To do this right, you should do this in Navigator

import * as React from "react";

import { NavigationContainer } from "@react-navigation/native";
import { useSelector } from "react-redux";

import HomeStack from "./HomeStack"; //stack navigator which holds your actual app
import AuthStack from "./AuthStack"; //stack navigator which ables a user to login to your app

export const Navigator = () => {
  // some state that you may have declared in your reducers
  const auth = useSelector((state) => state.auth);
  return (
    <NavigationContainer>
      {auth.isLoggedIn ? <HomeStack /> : <AuthStack />}
    </NavigationContainer>
  );
};

You can read more about authentication flows here