React Native Android Fetch failing on connection to local API

Question

I\'m using the fetch API in my react-native Android app to make requests to a local API. I usually query said API from react web apps at http://localhost:8163.

I\'m t

Answer 1

Run the below command to access localhost or 127.0.0.1 or your computer's ip

adb -s  reverse tcp:backend_port tcp:backend_port

Example:

adb -s emulator-5554 reverse tcp:3000 tcp:3000

Now, You can use like below in your component.

import React from 'react';
import {View,Image,TextInput, TouchableOpacity, StyleSheet, ImageBackground, AsyncStorage} from 'react-native';
import {Text,Button} from 'native-base';
    export class Login extends React.Component{
    constructor(props){
        super(props);
        this.state={username:'',password:''}
      }
      login = () =>{
        fetch('http://localhost:3000/users',{
          method:'POST',
            headers:{
              'Accept':'application/json',
              'Content-Type':'application/json'
            },
            body:JSON.stringify({
              username:this.state.username,
              password:this.state.password
            })
        })
        .then((response)=>response.json())
        .then((res)=>{
          if(res.success===true){
            var username=res.message;
            AsyncStorage.setItem('username',username);
            this.props.navigation.navigate('app');
            alert("Login success");
          } else{
            alert("Invalid Credentials");
          }
        })
        .done();
      }
    render(){
      return (
    
                - WELCOME -
                
                  this.setState({username})}
                  value={this.state.username}>
                  
                  this.setState({password})}
                  value={this.state.password}>
                  
                
                
                  LOGIN
                
              
    );
    }
    }
    const styles = StyleSheet.create({
      container:{
        flex:1,
      },
      content:{
        opacity:0.9,
        backgroundColor:'white',
        borderWidth:2,
        margin:10,
        alignItems: 'center',
      },
      logo:{
        justifyContent: 'center',
        alignItems: 'center',
        fontSize:45,
        color:'black',
        textShadowColor:'gray',
        textShadowRadius:10
      },
      input:{
        borderRadius:10,
        padding:10,
        color:'black',
        borderWidth:2,
        borderColor:'lightgray',
        width:200,
        margin:5
      },
      buttonContainer:{
        margin:10,
        padding:10,
        justifyContent: 'center',
        alignItems: 'center',
      },
      buttonText:{
        borderRadius:100,
        padding:10,
        backgroundColor:'magenta',
        color:'white',
        textAlign:'center',
        width:100
      }

    });

Output: