Login.js

import React, {useState} from 'react';
import {
  Button,
  DrawerLayoutAndroid,
  Text,
  TextInput,
  TouchableOpacity,
  View,
  StyleSheet
} from 'react-native';
import LoginTextbox from './Textbox'
import axios from 'axios'


const Login = (props, route) =>
{
  const [state, stateupt] = useState({cardnum:'', pass:''})
  const [Username, SetName] = useState('')
  const [Password, Setpass] = useState('')
  
const LoginFunc = () => {

  var cardno = state.cardnum
  var password = state.pass
  
  if(cardno.length == 0 || password.length == 0)
  {
    alert("Required Fields Missing!")
  }else 
  {

  //  Login with axios

    var Data =
    {
      Username: cardno,
      Password: password
    }
   
   let URL1 = 'http://www.smartpaygs.com:87/Api/Users/Authentication'
   axios.post(URL1, Data)
  .then(function (response) {
   if (response.status == 200)
   { 
       props.navigation.navigate('Home',response.data)
   }
  })
  .catch(function (error) {
    alert(error.response.data)
  });

  //   Login With PHP API

  //   let URL = 'https://scrapcollector12.000webhostapp.com/cardLogin.php'
  //   var headers = {
  //       'Accept' : 'application/json',
  //       'Content-Type': 'application.json' 
  //   }
  //   var Data =
  //   {
  //     cardno: cardno,
  //     password: password
  //   }
  //   fetch(URL, {
  //     method: 'POST',
  //     headers: headers,
  //     body: JSON.stringify(Data)
  //   })
  //   .then((response)=> response.json())
  //   .then((response) => 
  //   {
  //     alert(response[0].Message)
  //     if (response[0].Message =='success') {
        
  //        props.navigation.navigate('Home')
  //     }else{
           
  //     }
  // })
  //   .catch(error =>
  //     {
  //       alert("Error" + error)
  //     }
  //   )

//  Through Fetch Api

//  let URL = 'http://www.smartpaygs.com:87/Api/Users/Authentication'
// //  let URL = 'https://reqres.in/api/register'
 
//     let Data =
//     {
//        Username: cardno,
//        Password: password
//     }
//     console.warn(Data)
//     fetch(URL, {
//       method: 'POST',
//       mode: 'no-cors',
//       headers: {
//          'Accept': 'application/json',
//         'Content-Type': 'application/x-www-form-urlencoded',
//       },
//       body:
//        Data
//     })
//     .then((response)=> response.json())
//     .then((response) => 
//     {
//       console.log(response)
//     }
//     )
//     .catch(error =>
//       {
//         alert("Error" + error)
//       }
//     )

  // Through Fetch Api -- Get Method

  // let URL = "http://www.smartpaygs.com:87/api/users/Authentication?Username="+cardno+"&Password="+password
  
  //   fetch(URL, {
  //     method: 'GET',
  //     headers: {
  //        Accept: 'application/json',
  //       'Content-Type': 'application.json'
  //     }
  //   })
  //   .then((response)=> response.json())
  //   .then((response) => 
  //   {
  //     console.warn(response)
  //   })
  //   .catch(error =>
  //     {
  //       alert("Error" + error)
  //     }
  //   )
  }
 }

  return(
      <View style={{marginTop:40}}>
        <LoginTextbox 
          placeholder='Enter card Number'
          keyboardType='numeric'
          placeholderTextColor='darkgrey'
          width='60%'
          value={state.cardnum /*Username*/}
           onChangeText={(e) => stateupt({...state, cardnum:e})
           //SetName(e)
          }
        />
         <LoginTextbox 
          placeholder='Enter Your Password'
          secureTextEntry={true}
          placeholderTextColor='darkgrey'
          width='60%'
          value={state.pass /*Password*/}
          onChangeText={(e) => stateupt({...state,pass:e})
          //Setpass(e)
        }
        />
        <Text>{state.cardnum}</Text>
        <Text>{state.pass}</Text>
       {/* <Button title="Login" onPress={()=> {LoginPress2()} /*(props.navigation.navigate('Home')}/> */}
       <TouchableOpacity style={styles.btn} activeOpacity={0.8} onPress={()=>{LoginFunc()}}>
           <Text style={styles.btnText}>Login</Text>
       </TouchableOpacity> 
       <Text onPress={() => {props.navigation.push('Signup',state.cardnum)}} style={{marginTop:30, marginLeft: 30}}>Sign Up</Text>
       {/* const regular_icon_btn = <FontAwesome5.Button name={'comments'} />; */}
      </View>
  )
}

const styles = StyleSheet.create
({
  btnFormValid:
  {
    marginTop: 10,
    backgroundColor: "purple",
    height: 50,
    width: 130,
    justifyContent:'center',
    alignItems:'center',
    alignSelf:'center'
  },
    btnAPi:
    {
      marginTop: 10,
      backgroundColor: "red",
      height: 50,
      width: 70,
      justifyContent:'center',
      alignItems:'center',
      alignSelf:'center'
    },
    btn:{
        marginTop: 10,
        backgroundColor: "maroon",
        height: 50,
        width: 70,
        justifyContent:'center',
        alignItems:'center',
        alignSelf:'center'
    },
    btnText:{
        color: 'white',
        fontSize: 15
    }
})

export default Login