I was just working around with react native for implementing phone verification for android and ios version but when i tried the example version i couldn't get it working because it gives me a error: Oops! Network request failed.
I got no idea why is this so or have i missed any cruciel step and i couldn't possibly find any tutorial or enough support for that program anywhre so please tell me if iam missing anything.
Here is a screenshot of the error iam getting: https://preview.ibb.co/krbyFk/screenss_PM.png
This is the program i been trying to work around: https://github.com/joinspontaneous/react-native-phone-verification
Edited, I see in the code that
const api = new Frisbee({
baseURI: 'http://localhost:3000',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
Do i have to do something specifically about that?
I was getting the same error because I was running this on emulator. when running on real device this error went . Also ensure that you have any dummy server running on the specified port.
Related
I've seen answers to this question everywhere but none of them seem to work for me.
I'm trying to do a react native fetch from my android emulator and hit my local API running on https://localhost:5002/v1/users.
This is what my fetch looks like right now:
var response: Response = await fetch(`https://10.0.2.2:5002/v1/user/${initialContext.userId}`, {
method: "GET",
headers: {
"Authorization": `Bearer ${initialContext.accessToken}`
}
});
and this is the error that I'm getting:
Possible Unhandled Promise Rejection (id: 0):
TypeError: Network request failed
TypeError: Network request failed
at C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:26139:20
at C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:30727:21
at _callTimer (C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:30643:9)
at Object.callTimers (C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:30851:9)
at MessageQueue.__callFunction (C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:2781:31)
at C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:2513:17
at MessageQueue.__guard (C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:2735:13)
at MessageQueue.callFunctionReturnFlushedQueue (C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\index.bundle:2512:14)
at C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\debuggerWorker.js:199:58
at process.<anonymous> (C:\Users\raffaele.leo\Downloads\Source-Code\cbt-systems\1.x\trunk\src\CBTravel.Mobile.AirPortal\.vscode\.react\debuggerWorker.js:68:9)
As you can see I've tried running it with 10.0.2.2 (the local host equivalent for the emulator) and I've also tried my computer's IP address. I've also tried running adb reverse and other port forwarding methods.
The hardest part for me to wrap my head around is that if I go to https://10.0.2.2:5002 on chrome on my emulator I'm able to hit my local API. I'm also able to hit an API in the cloud from that fetch statement, just not anything running on local host.
Any ideas would be appreciated.
Actually it's easy to work using ngrok, which acts in between your emulator and localhost(network tunnelling). It provides you with a domain and forwards all your requests to localhost.
You can check this documentation https://ngrok.com/docs
I have an axios call to a presigned url in s3 for upload, this work well in IOS but trow "Netowork Error" in android.
The code is pretty simple but without any other information (the response is empty) I do not kwno how to solve this.
axios.post(presignedPostData.url, formData, config)
.then(function (response) {
})
.catch(function (err) { console.log('S3err',err, err.response) })
I use react-native with expo, the axios call work in ios and also in the web version.
UPDATE
The problem seems relative to formdata, if for example I remove the formdata obviously my post not work but the error (missing pre-conditions...) and the status (412) code are ok, but with formdata I've not error description nor status code..
UPDATE 2: the formdata, autogenerated from s3.createPresignedPost (they work in ios and web)
{"_parts":[["Content-Type","video/mp4"],["key","src-058ef4d0-0d49-11ea-8478-3b47e74a5983.mp4"],["acl","public-read"],["bucket","my.bucket"],["X-Amz-Algorithm","AWS4-HMAC-SHA256"],["X-Amz-Credential","mycredentials"],["Policy","mypolicy"],["X-Amz-Signature","mysignature"],["file",{"cancelled":false,"width":1280,"type":"video","uri":"file:///data/user/0/host.exp.exponent/cache/ExperienceData/%myapp%252Fmyapp/ImagePicker/8d68fafa-5c47-4436-9323-dc0d8702dc5d.mp4","rotation":90,"height":720,"duration":1280}]]}
Also tested with fetch (in place of axios), same problem.
UPDATE 3
If I use FyleSystem
`import * as FileSystem from 'expo-file-system';
//mediaArray['file'] = file;
mediaArray['fileALT'] = FileSystem.cacheDirectory+name
I'm able to du the upload with code 204 but the file uploaded isn't right. Maybe there is a permission problem on imagepicker. Still not working the process but with this new informations maybe someone can have an idea.
the problem seem to be solved, I'm looking to upload video, the file picker add "video" as type, this works on IOS and WEB but not in ANDROID, to get work also in android the type had to be more specific, for example "video/mp4" for .mp4 video o "video/mov" for mov video etc.. I hope that this help someone to achieve mutlipart/form-data in android.
I have a react-native app that logs in and grabs user information based on the following code:
TestCall(){
console.log(`${myLocation}/login`);
return fetch(`${myLocation}/login`, {
method:'POST',
headers: {Accept: 'application/json',
'Content-Type': 'application/json',
},
credentials: "include",
body: JSON.stringify({
email:this.state.email,
password:this.state.password,
})
})
.then(response => response.json())
.then(json => console.log(json))
}
I have different options for myLocation because I'm using this to grab account info from multiple sites that all allow login based on email and password. All start with https. This works perfectly for IOS no matter what I'm using for myLocation. This works perfectly on Android for all except for one option for myLocation.
For this specific combination of this specific myLocation and Android I get 'Network Request Failed' no matter which user account I try. This includes user account/myLocation combos that work on IOS. It's not giving me a 400, or 404, or 500 or anything like that because it's not even getting that far. When I use catch to see what's happening it just goes straight to the catch and always gives me the 'Network Request Failed' as the error that's being logged.
Also, I am using Android emulator and IOS simulator on the same computer so IP gateway and IP address are the same for both. Only user agent is different (okhttp for android and CFNetwork Darwin for IOS). I'm stumped. Does anyone know why this would be happening? Thanks!
This problem went away after the certificate was changed for the site that I was having a problem with.
I'm trying to receive some simple json from mocky.
React native fetch function:
getMemberDomainList = async (name) => {
try {
let response = await fetch('https://5c9cc9ed3be4e30014a7d287.mockapi.io/api/domain', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
});
let responseJson = await response.json();
return responseJson;
} catch (error) {
console.error(error);
}
}
I have tested the address in chrome on windows, it returns the expected mock data. But when the function is called on my android phone I get this error
Error from remote debugger
...\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:2348 TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (...\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:4337)
at XMLHttpRequest.dispatchEvent (...\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:10760)
at XMLHttpRequest.setReadyState (...\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:10511)
at XMLHttpRequest.__didCompleteResponse (...\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:10343)
at ...\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:10449
at RCTDeviceEventEmitter.emit (...\Libraries\Components\DrawerAndroid\DrawerLayoutAndroid.android.js:11)
at MessageQueue.__callFunction (...\Libraries\ART\ReactNativeART.js:362)
at blob:http://localhost:8081/79251787-d190-4650-8040-23d091c08738:2334
at MessageQueue.__guard (...\Libraries\ART\ReactNativeART.js:312)
at MessageQueue.callFunctionReturnFlushedQueue (...\Libraries\ART\ReactNativeART.js:139)
I'm also running a WebView in my app, which is pointing to a web url, it loads perfectly so I am sure that the phone has internet permission and access etc.
In the latest android versions http requests are not allowed by default. Take a look at this post for further information about allowing http request: How to allow all Network connection types HTTP and HTTPS in Android (9) Pie?
Can't get mockapi.io to work. But the error is not persistent when using services such as:
https://jsonplaceholder.typicode.com/todos/1
Might not be an android or react native related problem after all. Also had issues with mockapi.io in postman, though it works fine in chrome.
If you are using emulator then check whether internet is working or not in this emulation using browser. If not check this: Android emulator not able to access the internet
I have also face this problem in emulator but when I generate a release app and install in a real device(andoid 9) then it works fine.
Please check backend response status.
If backend is sending contents using 205 status - 205 RESET CONTENT
Android system recognize it as an error - HTTP 205 had non-zero Content-Length: 25.
You can check the status code on postman.
So, in this case, the error should be fixed on backend.
It should send contents with 200 status code.
I am new to React-native. I am trying to perform a simple get request using the following code:
axios.get('http://push-cycling-backend.dev/api/test')
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
I have tested the request using Postman and everything works fine, but when I run the request in my react-native app using the ANDROID EMULATOR, I get the following error:
Error: Network Error
I have a feeling this is because I am trying to access a Api end point hosted locally through Xammp via the Android emulator, but I have no idea what to do.
Please any guidance would be greatly appreciated.
Kind regards,
Matt
I managed to get it working by changing the request URL from http://push-cycling-backend.dev/api/test to http://10.0.2.2:80/push-cycling-backend/public/api/test. From what i understand, since the android emulator, emulates a actual device, I believe 'localhost' was referring to an address on the emulated device instead of my local server 10.0.2.2 is something like a keyword that refers to your local machines ip address.