expo / expo

An open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.
https://docs.expo.dev
MIT License
33.12k stars 5.28k forks source link

React Native expo API is not working in release. #25057

Closed Develens closed 9 months ago

Develens commented 11 months ago

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.

image

I decided to test it on android studio and after installing build on emulator checked the logs it is giving the following error.

image

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

rafakwolf commented 11 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

rafakwolf commented 10 months ago

Anything new about this topic? Still not able to make http requests :|

NickAtumJunior commented 10 months ago

I'm also facing the same issue Maybe we are all using express.js as a backend

NickAtumJunior commented 10 months ago

@rafakwolf what if i update my API's to https

Develens commented 10 months ago

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.

rafakwolf commented 10 months ago

@NickAtumJunior my API is HTTPS @Develens I'll try that and come back with the outcome here thanks folks!

rafakwolf commented 10 months ago

@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

syedaffanhamdani commented 10 months ago

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: image

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.

rafakwolf commented 10 months ago

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 :|

rafakwolf commented 10 months ago

Hello @alanjhughes anything new here? Any workaround I can try? Thank you so much!

edilsonborges commented 9 months ago

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",

Develens commented 9 months ago

@rafakwolf Could you share any API endpoints, if possible? I'd like to try using your API, and perhaps I can offer assistance.

Dalu26 commented 9 months ago

@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

rafakwolf commented 9 months ago

@Dalu26 thank you, indeed, building it locally works fine.

alanjhughes commented 9 months ago

Hi - I'm going to close this. If anyone can provide a minimal project that reproduces the problem, I'll reopen.

Dalu26 commented 9 months ago

We've been left to our fate

rafakwolf commented 9 months ago

one more reason to wipe out expo from my projects

Dalu26 commented 9 months ago

I've been on this issue for over a week and I think of suggesting moving away from expo. It is very frustrating

alanjhughes commented 9 months ago

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.

alanjhughes commented 9 months ago

Also, if your build is working locally but not with EAS, I would take a look at your environment variables

brentvatne commented 9 months ago

@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:

rafakwolf commented 9 months ago

@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

brentvatne commented 9 months ago

@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

Develens commented 9 months ago

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.

flattracker commented 8 months ago

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.

savkelita commented 8 months ago

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.

lucadboer commented 8 months ago

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

Rohit-Parte commented 7 months ago

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

  1. Install:

npx expo install expo-build-properties

  1. Add usesCleartextTraffic: true to app.json :

{ "expo": { .... "plugins": [ [ "expo-build-properties", { "android": { "usesCleartextTraffic": true } } ] ] }

emporteme commented 7 months ago

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

NiAlCa commented 7 months ago

image i have the same problem, any solution works

@emporteme the image is the locate

emporteme commented 7 months ago

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');
    }
}
hotlabs-technology commented 6 months ago

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?

meikuv commented 5 months ago

Thank You guys

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.

worked for me, thanks a lot

thethanglol commented 5 months ago

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

thethanglol commented 5 months ago

@syedaffanhamdani i have also checked the manifest.xml with apktools and usesCleartextTraffic is there but it's still not working rrr'

ugniusu commented 1 month ago

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 Screenshot 2024-08-05 151958

Any some ideas ? Thanks

JovanRocks commented 1 month ago

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.

pritamp17 commented 1 month ago

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 .

JovanRocks commented 1 month ago

Found out the solution. The SSL certificates for the server were not setup correctly. The issue is fixed now

abdulwahid211 commented 5 days ago

@JovanRocks would you please share your solution?