Having trouble retrieving information from the local API in React-Native

Currently, I have a web application built using React and an API developed in Laravel. Now, I am planning to create a mobile app that will also utilize the same API. However, I'm encountering an issue where I cannot fetch data due to receiving the error message:

NETWORK REQUEST FAILED.

This is the code snippet I am using to attempt fetching the data:

handleButton = () => {
    try {
        fetch(`127.0.0.1:8081/test`).then(response =>
        console.log(response)
    );
        } catch (e) {
            console.log(e);
        }
    };

I have attempted solutions like changing the IP address in the dev settings to my machine id or using localhost instead of the IP address 127.0.0.1, but unfortunately, these attempts did not resolve the issue. The error message I keep encountering states:

Possible Unhandled Promise Rejection (id: 0):
TypeError: Network request failed
TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (blob:http://localhost:8081/cfc373de-8318-4df3-b46a-7b17d4926c5e:42556:18)
    at XMLHttpRequest.dispatchEvent (blob:http://localhost:8081/cfc373de-8318-4df3-b46a-7b17d4926c5e:47998:27)
    at XMLHttpRequest.setReadyState (blob:http://localhost:8081/cfc373de-8318-4df3-b46a-7b17d4926c5e:46859:20)
    at XMLHttpRequest.__didCompleteResponse (blob:http://localhost:8081/cfc373de-8318-4df3-b46a-7b17d4926c5e:46686:16)
    at blob:http://localhost:8081/cfc373de-8318-4df3-b46a-7b17d4926c5e:46796:47
    at RCTDeviceEventEmitter.emit (blob:http://localhost:8081/cfc373de-8318-4df3-b46a-7b17d4926c5e:16875:37)
    at MessageQueue.__callFunction (blob:http://localhost:8081/cfc373de-8318-4df3-b46a-7b17d4926c5e:16488:44)
    at blob:http://localhost:8081/cfc373de-8318-4df3-b46a-7b17d4926c5e:16245:17
    at MessageQueue.__guard (blob:http://localhost:8081/cfc373de-8318-4df3-b46a-7b17d4926c5e:16442:13)
    at MessageQueue.callFunctionReturnFlushedQueue (blob:http://localhost:8081/cfc373de-8318-4df3-b46a-7b17d4926c5e:16244:14)

EDIT:

To interact with my Android Studio emulator, as I do not currently own an Android device running on Android version above 5.

Answer №1

Find the IP address of your device on the local network.

Access the command line interface.

For Mac users, utilize the ifconfig command, typically found under en0. Look for an output like 192.168.0.32 or similar.

For Windows users, use the ipconfig command.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS - Alter the URL with $state.go without refreshing the HTML content

Struggling with routing in angularJS and can't seem to find a solution despite trying various methods online. Any assistance would be greatly appreciated. Encountering an issue with the $state.go function in which it changes the URL but fails to load ...

There seems to be an issue with declaring Gulp Open

Here is the code snippet for my `open.js` task: import gulp from 'gulp'; import gulpOpen from 'gulp-open'; gulp.task('open', () => { // doesn't work with `function()` either. const options = { uri: 'local ...

Stylish Navigation Menu Logo/Site Name

Currently in the process of upgrading my website and I have my website name included as part of my menu, as opposed to a logo. This has been an easy solution that has worked well for me. For mobile screens, the template I purchased includes a slicknav men ...

$http({method}) is malfunctioning while $http.get is functioning properly

Issue Description: While working on my project, I encountered an issue where using $http({ method : 'GET', url : data : ..... param works fine for both GET and POST requests. However, when the same method is used in JSFiddle, it blocks my reques ...

Using Vue to dynamically wrap a component with a tag

Have you ever wondered how the v-if directive in Vue.js can hide an entire component along with its content based on a condition? I am curious to know: Is it possible to only hide the surrounding tag or component without removing its contents? ...

Why does the error message "$(…).functionName() is not a function" occur and what steps can be taken to prevent it from

I have encountered a console error message: $(...).functionName() is not a function Here is my function call: $("button").functionName(); This is the actual function: $.fn.functionName = function() { //Do Something }(jQuery); What ca ...

Angular: How can objects be efficiently stored in a service for display in the view and use of CRUD functions to interact with the server?

I am exploring different options for creating a service that retrieves relational data from the server. I have two potential approaches in mind, but I am having trouble deciding between them. The first option involves returning the data as a multidimensio ...

Elevate your website design by adding interactive Ripple Buttons using a combination of Javascript and

Recently, I came across a script that allows for an animation to occur when a button is clicked. However, I have encountered an issue where the script does not redirect to a link. (function() { var cleanUp, debounce, i, len, ripple, rippleContainer, rip ...

Arrows indicating the direction of a LineString feature in Openlayers 4

I'm attempting to create a LineString with arrows at the end of each line to indicate the direction of the route. I found an example on the official site: The example code in the link creates arrows through user drawing, but I need arrows for a give ...

Utilizing Phantom Js with Apache server

After creating a JavaScript app, I realized the importance of making it SEO friendly. I am curious if anyone has experience setting up a crawlable webpage on Apache using Backbone.js (potentially with assistance from PHP and .htaccess files, or with Phant ...

SelectBoxIt jquery plugin can be applied after the completion of populating options in the select element with AngularJS

Utilizing AngularJS, I am dynamically populating a select box with the code below: <select ng-model="department" ng-options="dept as dept.name for dept in departmentList" class="fancy"> <option value="">-- select an optio ...

The timestamp will display a different date and time on the local system if it is generated using Go on AWS

My angular application is connected to a REST API built with golang. I have implemented a todo list feature where users can create todos for weekly or monthly tasks. When creating a todo, I use JavaScript to generate the first timestamp and submit it to th ...

Utilizing the jexcel plugin to seamlessly integrate arrays for a personalized subtitle editing experience

Could you please assist me in understanding how to utilize the jexcel plugin for pushing arrays? To achieve the push functionality, I would like it to behave similarly to arrays containing 6 different colors as outlined below: Subtitles = orange, Caption ...

Utilizing the Vue feature of dynamic route naming within a component's function

Currently, I am working on creating a dynamic view rendering using Vue and Laravel. However, I am facing difficulty in understanding how to pass the dynamic parameter to the component function. Router.map({ '/cms-admin/:page': { comp ...

What could be causing the error when trying to use a PUT request with fetch in Vue?

Whenever I attempt to send a PUT request, an error pops up on the console. export function putUserData() { fetch(`${url}/user/${getCookie("ID")}`, { method: "PUT", headers: { "Authorization": `B ...

Submitting multiple forms using AJAX and PHP

I am currently trying to send the form data to another page for processing, but I am not receiving any data. Below are the forms in question: The default form is the login form for requesting a username and password, with only one submit button. ...

Tips for setting unique click functions for each face of a cube using React Three Fiber

Hey there! I have created a basic Cube component using react three fibre. import {useState,useRef} from 'react'; import { useFrame } from '@react-three/fiber'; const Box = ({props}) =>{ const ref = useRef() const [hove ...

What is the best way to retrieve information from an Array within a JSON Object?

I currently have a Json object called FriendJson, which contains an array field named friends. This is the Json Object: [ { "id": 4, "updated": "2023-01-07T22:06:23.929206Z", "created": "2023-01-0 ...

Angular: NaNa: Attempting to access a property of an undefined variable

I've encountered these errors although the values are displayed correctly in the browser. I'm unsure about how to resolve this issue. ERROR TypeError: Cannot read property 'length' of undefined ERROR TypeError: Cannot read property &ap ...

Saving props in React-select

I'm currently utilizing react-select to enable multiple selection on my UI. However, I need to extract the props from react-select since I will be sending the selected values to the backend. My query is how can I store the state values in an array for ...