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 -

onChangeText={(username)=>this.setState({username})}

value={this.state.username}>

onChangeText={(password)=>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: