expo: React Native expo API is not working in release.

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

About this issue

  • Original URL
  • State: closed
  • Created 8 months ago
  • Comments: 35 (2 by maintainers)

Most upvoted comments

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.

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 } } ] ] }

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

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

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

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.

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

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');
    }
}

@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

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.

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

@Develens no success around here, here’s what I did:

  • cleaned up the npm cache
  • cleaned up the gradle cache, although I don’t think this would make any difference since my build are on expo cloud service
  • removed the node_modules folder and reinstalled all packages
  • updated the expo version to the latest (49.0.18) FYI, I’m using expo secrets. After building a new version, same result, the https calls simply doesn’t work, no errors, no nothing I can see on adb logs.

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