How do I connect my RN app to a local api consuming the data in post?

Question

Good morning guys, I’m stuck since yesterday and need help. I can’t connect the app I’m developing the api that is on my pc.

1° Error 404
2° I don’t know if I’m making the request the right way ( My device is on the same computer network and I was able to access the API by it - this indicates that they are communicating, the problem must actually have the code I’m writing ")
3° Please, I need a hint on how to use this with Async Storage

Code made for the request:

constructor(props) {
        super(props);

        state = {
          email: '',
          password: '',
          error: '',
          sucesso: false
        };

        this.loginUser = this.loginUser.bind(this);
    }


    loginUser() {
        const { email, senha } = this.state;

        this.setState({ error: '', sucesso: true});

        axios.post('http://localhost/api/login',{
            user: {
                email: email,
                senha: senha
            }
        },)
        .then((response) => {
            alert(response);
        })
        .catch((error) => {
            alert(error);
        });
    }

Below the form code:

  <View style={styles.inputContainer}>
                        <Text style={styles.textLabel}>E-mail</Text>
                        <TextInput
                            style={styles.input}
                            onChange={(email) => this.setState( user.email )}
                        />

                        <Text style={[styles.textLabel, style = { marginTop: '5%' }]}>Senha</Text>
                        <TextInput
                            style={styles.input}
                            secureTextEntry={true}
                            onChange={(newValue) => this.setState( user.senha )}
                        />

                        <Ripple style={styles.forgottenPw} onPress={() => this.props.navigation.navigate('PasswordRecovery')}>
                            <Text>
                                Esqueceu a sua senha?
                                </Text>
                        </Ripple>

                        <Button style={styles.btnAcess}
                            onPress={() => this.loginUser()}>
                            <Text style={styles.textBtnAcess}>ENTRAR</Text>
                        </Button>
                    </View>

Answer 1

The localhost will always point to the local machine, in the case of the app localhost will be the device itself, so of the 404, the obviously your server is not running on the device

The easiest way is to point to the IP of your machine, where the server is running and ready.

instead of axios.post('http://localhost/api/login' will look something like axios.post('http://192.168.1.10/api/login', logic that the IP will be another there on your machine.

Simulator

This works only in the simulator, use the address 10.0.2.2 in place of localhost, causes requests to the simulator’s localhost to be redirected to the localhost of your machine.