Closed Develens closed 9 months ago
Having the same problem here, api requests simply doesn't work anymore, I tried the usesCleartextTraffic thing, also tried this https://freakycoder.com/react-native-notes-21-android-http-network-security-problem-fix-eeac4e1ea58b
No success so far
Any help would be nice
Thank you so much
Anything new about this topic? Still not able to make http requests :|
I'm also facing the same issue Maybe we are all using express.js as a backend
@rafakwolf what if i update my API's to https
Update: I have successfully resolved my issue. I uninstalled the Android, iOS, and node_modules folders.
After reconfiguring with EAS, the build process is now functioning correctly.
Yes I am also using express.js as backend but it seems to be issue from the expo configuration saved in EAS.
Give it a try and update me.
@NickAtumJunior my API is HTTPS @Develens I'll try that and come back with the outcome here thanks folks!
@Develens no success around here, here's what I did:
To be honest I don't know what else to do
my packages
{
"name": "zzz",
"version": "1.9.29",
"main": "index.js",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"adb-logs": "$(which adb) logcat",
"build-prod": "eas build --platform android --profile production --local",
"build-dev": "eas build --platform android --profile development --local",
"test": "jest",
"lint": "eslint . --ext .ts,.tsx"
},
"dependencies": {
"@clerk/clerk-expo": "^0.19.16",
"@expo/config-plugins": "~7.2.2",
"@react-native-async-storage/async-storage": "1.18.2",
"@react-native-community/netinfo": "9.3.10",
"@react-navigation/drawer": "^6.5.7",
"@react-navigation/native": "^6.1.2",
"@react-navigation/native-stack": "^6.9.11",
"@shopify/flash-list": "1.4.3",
"@tanstack/react-query": "^4.26.1",
"configcat-react": "^3.0.0",
"expo": "^49.0.18",
"expo-application": "~5.3.0",
"expo-auth-session": "~5.0.2",
"expo-background-fetch": "~11.3.0",
"expo-build-properties": "~0.8.3",
"expo-constants": "~14.4.2",
"expo-crypto": "~12.4.1",
"expo-dev-client": "~2.4.12",
"expo-device": "~5.4.0",
"expo-mail-composer": "~12.3.0",
"expo-notifications": "~0.20.1",
"expo-secure-store": "~12.3.1",
"expo-splash-screen": "~0.20.5",
"expo-status-bar": "~1.6.0",
"expo-task-manager": "~11.3.0",
"expo-updates": "~0.18.17",
"expo-web-browser": "~12.3.2",
"moti": "0.25.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.6",
"react-native-adapty": "^2.6.0",
"react-native-dotenv": "^3.4.9",
"react-native-dropdown-picker": "^5.4.6",
"react-native-gesture-handler": "~2.12.0",
"react-native-google-mobile-ads": "^12.2.0",
"react-native-reanimated": "~3.3.0",
"react-native-safe-area-context": "4.6.3",
"react-native-screens": "~3.22.0",
"react-native-svg": "13.9.0",
"react-native-web": "~0.19.6",
"typescript": "^5.1.3"
},
"devDependencies": {
"@babel/core": "^7.23.0",
"@types/node": "^20.2.5",
"@types/react": "~18.2.14",
"@typescript-eslint/eslint-plugin": "^5.59.5",
"@typescript-eslint/parser": "^5.59.5",
"eslint": "^8.40.0",
"eslint-plugin-react": "^7.32.2"
},
"private": true
}
app.json
{
"expo": {
"name": "zzz",
"description": "zzzs",
"slug": "zzzzz",
"scheme": "com.zzzz",
"version": "1.9.29",
"icon": "./src/assets/icon.png",
"assetBundlePatterns": [
"**/*"
],
"owner": "zzzz",
"android": {
"versionCode": 1090154,
"permissions": [
"READ_EXTERNAL_STORAGE",
"WRITE_EXTERNAL_STORAGE",
"INTERNET",
"RECEIVE_BOOT_COMPLETED",
"WAKE_LOCK",
"BILLING",
"POST_NOTIFICATIONS",
"ACCESS_NETWORK_STATE"
],
"package": "com.zzz"
},
"extra": {
"eas": {
"projectId": "d7e0254c-zzzz8d12a6"
}
},
"plugins": [
[
"expo-build-properties",
{
"android": {
"extraMavenRepos": [
"../../node_modules/react-native-adapty/lib/android/localMaven"
]
}
}
]
],
"updates": {
"enabled": false,
"url": "https://u.expo.dev/d7e0254c-axsdcv12a6"
},
"ios": {
"bundleIdentifier": "com.zzzz"
}
},
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-rrrr~sssss",
"ios_app_id": "ca-app-pub-tttttt~errrrr"
}
}
eas file
{
"cli": {
"version": ">= 0.48.1"
},
"build": {
"development": {
"distribution": "internal",
"developmentClient": true,
"android": {
"gradleCommand": ":app:assembleDebug"
},
"ios": {
"simulator": true
},
"channel": "development"
},
"preview": {
"distribution": "internal",
"channel": "preview"
},
"production": {
"node": "18.17.0",
"channel": "production"
}
},
"submit": {
"production": {}
}
}
@alanjhughes
I was having the same issue. Following docu at expo build properties :
I did the following:
npx expo install expo-build-properties
and then adding:
Using apk-tools I inspected the generated apk file. It had correctly usesCleartextTraffic flag in AndroidManifest.xml And my app also worked fine. Hope it helps others.
If I understood it correctly, I actually do not need to use the usesCleartextTraffic
option, because I'm using https server. But even adding it, no success :|
Hello @alanjhughes anything new here? Any workaround I can try? Thank you so much!
I am having the same problem. I can see that android:usesCleartextTraffic="true" is present in debug manifest, but not on main (i tried to manually put there but nothing). "axios": "^1.6.2", "expo": "^49.0.21", "expo-build-properties": "~0.8.3",
@rafakwolf Could you share any API endpoints, if possible? I'd like to try using your API, and perhaps I can offer assistance.
@rafakwolf Same issue here but I noticed that when I make a build using the command line on my laptop everything works fine. I only have this issue when I use eas to make a build
@Dalu26 thank you, indeed, building it locally works fine.
Hi - I'm going to close this. If anyone can provide a minimal project that reproduces the problem, I'll reopen.
We've been left to our fate
one more reason to wipe out expo from my projects
I've been on this issue for over a week and I think of suggesting moving away from expo. It is very frustrating
There is nothing expo is doing to have an affect on your network requests. It's the same as in a bare react native. I cannot investigate an issue unless I can reproduce it. I am happy to look into it if you can provide me a reliable way to recreate the issue.
Also, if your build is working locally but not with EAS, I would take a look at your environment variables
@Dalu26 @rafakwolf - as @alanjhughes pointed out, we need a minimal reproducible example. the issue is almost certainly something in your own project, given that this seems to be impacting you two but nobody else, and we're happy to help you if there is actually an issue with expo here but that has not been demonstrated and there isn't anything we can actually go on here to help you. so you will need to "help us to help you"
here are a couple helpful links:
@brentvatne I couldn't agree more with you, but, my first message was on October 27th, answering us 3 days ago to say "I'm going to close the ticket" is not exactly helpful.
And no, it was not only two devs who reported it.
Thank you
@rafakwolf - we provide best-effort support on github issues with our small team, and sometimes issue reports take some time get to them. we prioritize actionable issues that provide the information we request in the issue template. the amount of time that an issue has been open for doesn't change the criteria for what is required when reporting an issue.
we ask for a minimal reproducible example in the issue report template, i'll have to double check why the issue wasn't automatically closed by our bot for not fitting that criteria. here is what we usually print along with it:
Hi there! It looks like your issue requires a minimal reproducible example, but it is invalid or absent. Please prepare such an example and share it in a new issue.
The best way to get attention to your issue is to provide a clean and easy way for a developer to reproduce the issue on their own machine. Please do not provide your entire project, or a project with more code than is necessary to reproduce the issue.
A side benefit of going through the process of narrowing down the minimal amount of code needed to reproduce the issue is that you may get lucky and discover that the bug is due to a mistake in your application code that you can quickly fix on your own.
Resources
Common concerns
"I've only been able to reproduce it in private, proprietary code"
You may not have spent enough time narrowing down the root cause of the issue. Try out the techniques discussed in this manual debugging guide to learn how to isolate the problem from the rest of your codebase.
"I didn't have time to create one"
That's understandable, it can take some time to prepare. We ask that you hold off on filing an issue until you are able to fully complete the required fields in the issue template.
"You can reproduce it by yourself by creating a project and following these steps"
This is useful knowledge, but it's still valuable to have the resulting project that is produced from running the steps, where you have verified you can reproduce the issue.
as @alanjhughes pointed out, we'd be happy to help you but we need your help in the form of a minimal reproducible example in order to do so
When I first encountered the issue, I experienced a significant level of frustration. I attempted various solutions, but the problem persisted until I finally found a resolution by deleting the 'node_modules' directory and removing local Expo builds. It appears that the issue may be related to the use of EAS.
Upon reflection, I identified two potential reasons for the problem:
When attempting to build the APK in release mode, EAS seems to upload outdated build files. EAS may be utilizing a cached build, possibly the 'Manifest.xml' file, when building the release APK.
While these are my observations, I acknowledge the possibility of error. To ensure clarity, I encourage everyone facing this issue to investigate whether they are using the domain or API without SSL installation before (As I was doing this) or if the API was hosted on a local machine before. This insight might help us collectively understand and address the root cause of the problem.
I had the same issue and tried adding it to the app.json
file but that didn't work. I then added it as part of the AndroidManifest.xml file as an attribute and that did the trick.
<application android:usesCleartextTraffic="true" etc />
Hope that helps someone out.
I had the same problem where API
protocol is HTTP
. The solution for me was:
1. Install:
npx expo install expo-build-properties
2. Add usesCleartextTraffic: true
to app.json
:
{ "expo": { .... "plugins": [ [ "expo-build-properties", { "android": { "usesCleartextTraffic": true } } ] ] }
Also, for testing purposes, I added an extra HTTPS API
call (https://jsonplaceholder.typicode.com/todos/1) that also works as expected.
Hello everyone,
I've explored various solutions to address the issue at hand, and what proved effective was incorporating the following code snippet into the android/app/src/main/AndroidManifest.xml
file:
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="true"
android:theme="@style/AppTheme"
// THIS LINE BELOW
android:usesCleartextTraffic="true">
By adding the line android:usesCleartextTraffic="true", the problem was successfully resolved. If you have any questions or need further clarification, feel free to ask.
I hope that this helps your problem
I also had a same problem after upgrading project from expo 47 to 50. Http & https requests were being failed. Below solutions worked as mentioned by many people
npx expo install expo-build-properties
{ "expo": { .... "plugins": [ [ "expo-build-properties", { "android": { "usesCleartextTraffic": true } } ] ] }
I had the same issue and tried adding it to the
app.json
file but that didn't work. I then added it as part of the AndroidManifest.xml file as an attribute and that did the trick.<application android:usesCleartextTraffic="true" etc />
Hope that helps someone out.
Hello Can you please provide a route, where to create this file? I am using expo router and there is no android or ios folders just app folder
i have the same problem, any solution works
@emporteme the image is the locate
I just made a try catch and it worked Maybe it would not solve your problem, but mine worked well
below the example (just try it):
async function fetchTest() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users/1'); // Using JSONPlaceholder mock API
if (!response.ok) {
throw new Error('Failed to fetch profile data');
}
const data = await response.json();
alert('Hello ' + data.name);
console.log(data);
} catch (error) {
console.error(error);
alert('Failed to fetch profile data');
}
}
Same problem, getting a "Network error" while calling an OpenAI endpoint using axios. It works like a charm on expo go but when I create an .apk with eas I get the network error. I tried the solution proposed with usesCleartextTraffic
, but nothing changes. I have also checked inside the .apk produced by eas and the usesCleartextTraffic property is set.
Yet, it doesn't work. Can anybody help?
Thank You guys
I had the same problem where
API
protocol isHTTP
. The solution for me was:1. Install:
npx expo install expo-build-properties
2. Add
usesCleartextTraffic: true
toapp.json
:
{ "expo": { .... "plugins": [ [ "expo-build-properties", { "android": { "usesCleartextTraffic": true } } ] ] }
Also, for testing purposes, I added an extra
HTTPS API
call (https://jsonplaceholder.typicode.com/todos/1) that also works as expected.
worked for me, thanks a lot
i am having the same problem
SERVICES: FIREBASE analytics, OpenAI
Development build: FIREBASE analytics shows 1 connected device (me) Open AI: i get responses from them
Production/release build:
FIREBASE analytics shows 0 connected device (me) Open AI: i don't get responses from them
I did a prebuild clean, "usesCleartextTraffic": true is present on androidManifest
@horacio-a said they were calling without an ssl cert, i don't know how to do that for both firebase and openai @Develens said removing 'node_modules' directory and removing local Expo builds solved the problem for them he also mentioned to investigate whether they are using the domain or API without SSL installation, I am using Firebase analytics and OpenAi as is, so i don't think thats the issue.
will try removing node modules and expo builds and reinstall to see what happens, evn though expo prebuild --clean should clean the caches
@syedaffanhamdani i have also checked the manifest.xml with apktools and usesCleartextTraffic is there but it's still not working
Still having the same issue, can't get access to API through Expo Go, from browser everything works. I did npx expo install expo-build-properties
then in app.json wrote this
Any some ideas ? Thanks
I have a problem where the fetch function works on first load of the app, but when the android app goes into background appState and comes back to foreground the fetch function stops working. Tried every possible solution i found
this is the error: [TypeError: Network request failed]
this is from hermes:
jsEngine: "hermes" message: "Network request failed" stack: "TypeError: Network request failed\n at anonymous (http://192.168.0.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:6484:33)\n at apply (native)\n at anonymous (http://192.168.0.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:14816:26)\n at _callTimer (http://192.168.0.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:14727:17)\n at callTimers (http://192.168.0.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:14935:19)\n at apply (native)\n at __callFunction (http://192.168.0.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:2676:38)\n at anonymous (http://192.168.0.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:2392:31)\n at __guard (http://192.168.0.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:2609:15)\n at callFunctionReturnFlushedQueue (http://192.168.0.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:2391:21)"
Any help would be great, i am trying to solve this for a whole month.
I am using Image from expo-image and passing 'source' as https url but images are not loading ,when i do a eas build, get an apk and run it with npm start --dev-client
.
I am also using clerk , it is also not loading in dev build i don't know why
`<ClerkProvider publishableKey={ CLERK_KEY || process.env.CLERK_KEY } tokenCache={tokenCache} >
<ClerkLoaded>
</ClerkLoaded>
</ClerkProvider>`
i am passing correct clerk key , i even replaced CLERK_KEY variable in provider with original key , it is still not loading then i came across this thread , seems like problem is with expo, unnable to make https requests
this is my package.json
`{
"name": "client",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"@clerk/clerk-expo": "^0.20.5",
"@expo/vector-icons": "^14.0.2",
"@react-native-async-storage/async-storage": "1.23.1",
"@react-native-community/datetimepicker": "8.0.1",
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"@types/react-native": "^0.73.0",
"axios": "^1.7.2",
"expo": "^51.0.0",
"expo-constants": "~16.0.2",
"expo-dev-client": "~4.0.21",
"expo-image": "~1.12.13",
"expo-image-picker": "~15.0.7",
"expo-linear-gradient": "~13.0.2",
"expo-linking": "~6.3.1",
"expo-router": "~3.5.20",
"expo-secure-store": "~13.0.2",
"expo-status-bar": "~1.12.1",
"firebase": "^10.11.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.74.3",
"react-native-confirmation-code-field": "^7.4.0",
"react-native-dotenv": "^3.4.11",
"react-native-gifted-charts": "^1.4.22",
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1",
"react-native-size-matters": "^0.4.2",
"react-native-svg": "15.2.0",
"react-native-vector-icons": "^10.1.0",
"zustand": "^4.5.2",
"expo-build-properties": "~0.12.5"
},
"devDependencies": {
"@babel/core": "^7.24.0",
"@types/react": "~18.2.79",
"typescript": "~5.3.3"
},
"private": true
}
`
guys please need you help .
Found out the solution. The SSL certificates for the server were not setup correctly. The issue is fixed now
@JovanRocks would you please share your solution?
Summary
I have developed a react native application using expo. I have tested application all along but when I am going to release it on Playstore. I got stuck in a issue. API is not working. I have tried multiple solutions. I already know about
usesCleartextTraffic
and added that.I decided to test it on android studio and after installing build on emulator checked the logs it is giving the following error.
403 error.
So then I removed CORS from backend API but there is no change. I don't know why is that issue.
I am very frustrated about this. If anyone can help me about this Thanks!
Managed or bare workflow?
bare
What platform(s) does this occur on?
Android
Package versions
No response
Environment
expo-env-info 1.0.5 environment info:
System:
OS: Windows 10 10.0.19045
Binaries:
Node: 18.17.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD SDKs: Android SDK: API Levels: 31, 32, 33 Build Tools: 29.0.2, 30.0.2, 30.0.3, 33.0.0, 33.0.2 System Images: android-33 | Google APIs Intel x86_64 Atom IDEs: Android Studio: AI-222.4459.24.2221.9971841 npmPackages: expo: ^49.0.13 => 49.0.16 react: 18.2.0 => 18.2.0 react-native: 0.72.6 => 0.72.6 Expo Workflow: bare
Reproducible demo
App.json as follow
{ "expo": { "name": "Jobs Australia", "slug": "jobsapplication", "plugins": [ "@react-native-google-signin/google-signin", "@react-native-firebase/app", "@react-native-firebase/auth", [ "@stripe/stripe-react-native", { "merchantIdentifier": "", "enableGooglePay": false } ], [ "expo-build-properties", { "android": { "usesCleartextTraffic": true } } ] ], "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "light", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "assetBundlePatterns": [ "**/*" ], "ios": { "supportsTablet": true, "bundleIdentifier": "com.anonymous.jobsApplication", "googleServicesFile": "./GoogleService-Info.plist" }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/anImageThat.png", "backgroundColor": "#ffffff" }, "googleServicesFile": "./google-services.json", "package": "com.anonymous.jobsApplication", "versionCode": 1 }, "packagerOpts": { "sourceExts": [ "js", "json", "ts", "tsx", "jsx", "vue"] }, "web": { "favicon": "./assets/favicon.png" }, "extra": { "eas": { "projectId": "7060e1ae-b62b-4807-9345-9f3a2baf0afc" } }, "owner": "tayyabrana" }, "react-native-google-mobile-ads": { "android_app_id": "ca-app-pub-3940256099942544~3347511713", "ios_app_id": "ca-app-pub-3940256099942544~3347511713" } }
eas.json
{ "cli": { "version": ">= 5.1.0" }, "build": { "development": { "developmentClient": true, "distribution": "internal" }, "preview": { "android": { "buildType": "apk" } }, "production": {} }, "submit": { "production": {} } }
Stacktrace (if a crash is involved)
No response