1

I'm new to react-native. I currently try to set the login of react-native by using the Laravel API. The API that I used already tested and its work. But when I tried to put in the react-native, it shows the error while i called the API. The warning in the emulator is: Possible Unhandled Promise Rejection (id:0): TypeError: Network request failed

Here is my code.

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    TextInput,
    Text,
    TouchableOpacity,
    Alert,
    AsyncStorage,
} from 'react-native';
import {Actions} from 'react-native-router-flux';
import Logo from '../components/Logo';


export default class Login extends Component   {

    constructor(props) {
        super(props);
        this.state = {
            email: "",
            password: ""
        }
    };
    signup(){
        Actions.signup()
    }
    home(){
        Actions.home()
    }
    handleLogin = () => {
        fetch('http://localhost:8888/api/login',{
            method: 'POST',
            header:{
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                email: this.state.email,
                password: this.state.password,
            })
        })
        .then((response) => response.json())
        .then((res) => {

            if (res.success === true){

                alert(res.message)

            }else{
                alert(res.message)
            }

           alert('test')
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <Logo/>

                <View style={styles.inputContainer}>
                    <TextInput style={styles.inputBox}
                        underlineColorAndroid='0,0,0,0'
                        placeholder='Email'
                        placeholderTextColor= 'grey'
                        keyboardType= 'email-address'
                        onChangeText={(text) => this.setState({email:text})}
                        onSubmitEditing={()=> this.password.focus()}
                    />

                    <TextInput style={styles.inputBox}
                        underlineColorAndroid='0,0,0,0'
                        placeholder='Password'
                        placeholderTextColor= 'grey'
                        secureTextEntry= {true}
                        ref={(input) => this.password = input}
                        onChangeText={(text) => this.setState({password:text})}

                    />
                    <TouchableOpacity style={styles.button} onPress={this.handleLogin}>
                        <Text style={styles.buttonText}>Login</Text>
                    </TouchableOpacity>
                </View>  

                <View style={styles.signupText}>
                    <Text>Don't have an account? </Text>
                    <TouchableOpacity onPress={this.signup}>
                        <Text style={styles.signupButton}>Signup</Text>
                    </TouchableOpacity>
                </View>

            </View>
        );
    }

}

Anyone know what's the problem?

18
  • What do you get if you add this to the end of the last .then((res) => call .catch((e) => console.log('Error: ', e)) Commented Apr 2, 2020 at 11:27
  • can your put headers instead of header inside your fetch in handleLogin function. Commented Apr 2, 2020 at 11:30
  • @HY98 do let me know if that doesn't work. Commented Apr 2, 2020 at 11:37
  • @AkhilNayak it doesn't work. Commented Apr 2, 2020 at 11:50
  • @speak u means .then((response) => response.json()) .then((res) => { if (res.success === true){ alert(res.message) }else{ alert(res.message) } alert('test') }) .catch((e) => console.log('Error: ', e)) like this? Commented Apr 2, 2020 at 11:51

1 Answer 1

0

Problem solved by setup the adb and use the adb reverse command.

EXAMPLE

adb reverse tcp:8081 tcp:3333

https://stackoverflow.com/a/39108921/12988525

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.