0

I am creating an application in React Native with Expo and I am using USB debugging mode to see the view of this application.

The problem is that I am consuming an API, which is found locally on my computer. When I run the program with Expo from USB debugging mode I can't connect to localhost, but when I run the application with Expo web mode I can connect and consume the API.

Obviously I tried localhost and 127.0.0.1 but neither one worked for me.

For what it's worth: This would be my code:

import { StatusBar } from 'expo-status-bar';
import React, { Component, useState, useEffect } from 'react';
import { StyleSheet, Text, View, FlatList, ActivityIndicator, Image } from 'react-native';

const API_ENDPOINT = "https://127.0.0.1:5001/api/Medicines/";

export default function App () {

      const [isLoading, setIsLoading] = useState(false);
      const [data, setData] = useState([]);
      const [error, setError] = useState(null);
      useEffect(() => {
        setIsLoading(true);
    
        fetch(API_ENDPOINT)
          .then(response => response.json())
          .then(results => {
            setData(results);
            setIsLoading(false);
          })
          .catch(err => {
            setIsLoading(false);
            setError(err);
          });
      }, []);
      if (isLoading) {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <ActivityIndicator size="large" color="#5500dc" />
          </View>
        );
      }
    
      if (error) {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontSize: 18}}>
              Error fetching data... Check your network connection!
            </Text>
          </View>
        );
      }

    return (
      <View style={styles.container}>
        <Text>Successful connection</Text>
        <StatusBar style="auto" />
      </View>
    );
  }


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

I run the program in the cmd with the command expo start --localhost --android to start the USB debugging mode and see the application from the Expo mobile application, and this is what appears to me:

enter image description here

And this is the same application but from the Expo web option:

enter image description here

Moya
  • 57
  • 6
  • Where is your client app running? If it tries to connect to localhost/127.0.0.1 it tries to connect to a server on the same device as every device is its own localhost. – blackapps Nov 05 '21 at 23:58
  • 1
    Does this answer your question? [How to connect to my http://localhost web server from Android Emulator](https://stackoverflow.com/questions/5806220/how-to-connect-to-my-http-localhost-web-server-from-android-emulator) – Omar Abdel Bari Nov 06 '21 at 00:03
  • **This post should help check it out** https://stackoverflow.com/a/43745599/17028970 – carlosdafield Nov 06 '21 at 00:05
  • Basically my client application would be my real cell phone, and from there I want to access the localhost of my computer since it is the server, I do not know if I am implying @blackapps – Moya Nov 06 '21 at 01:03
  • I already tried that option and apparently it only works when it is an android emulator but in my case it is a real cell phone @OmarAbdelBari – Moya Nov 06 '21 at 01:04
  • In that case you have to pull out the (private) IP of the computer in your router's network and then use it in your app. You may need to also add a firewall setting (on the computer) to allow the phone to connect. – Omar Abdel Bari Nov 06 '21 at 01:10
  • In otherwords, localhost doesn't make sense if on your phone because it's not really local. – Omar Abdel Bari Nov 06 '21 at 01:13
  • Basically yes. @OmarAbdelBari – Moya Nov 06 '21 at 01:30

1 Answers1

0

Full answer is here.

in short:

adb devices //gives your device(s) name
adb -s <device name> reverse tcp:5001 tcp:5001
Mazdak Shojaie
  • 1,620
  • 1
  • 25
  • 32