Network Error when fetched data from api using axios or fetch on Android. Works fine on IOS.

[siddhant124]

Description

Package.json

{
  "name": "Suno",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "postinstall": "patch-package"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.24.0",
    "@react-native-community/slider": "4.5.6",
    "@react-native-firebase/app": "^22.4.0",
    "@react-native-firebase/auth": "^22.4.0",
    "@react-native-firebase/firestore": "^22.4.0",
    "@react-native-google-signin/google-signin": "^15.0.0",
    "@react-native/new-app-screen": "0.80.2",
    "@react-navigation/bottom-tabs": "^7.4.4",
    "@react-navigation/native": "^7.1.16",
    "@react-navigation/native-stack": "^7.3.23",
    "@reduxjs/toolkit": "^2.8.2",
    "axios": "^1.11.0",
    "react": "19.1.0",
    "react-native": "0.80.2",
    "react-native-fast-image": "^8.6.3",
    "react-native-heroicons": "^4.0.0",
    "react-native-pager-view": "^6.8.1",
    "react-native-raw-bottom-sheet": "^3.0.0",
    "react-native-safe-area-context": "^5.5.2",
    "react-native-screens": "^4.13.1",
    "react-native-svg": "^15.12.0",
    "react-native-text-ticker": "^1.15.0",
    "react-native-track-player": "^4.1.2",
    "react-redux": "^9.2.0",
    "redux": "^5.0.1",
    "redux-persist": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "19.1.1",
    "@react-native-community/cli-platform-android": "19.1.1",
    "@react-native-community/cli-platform-ios": "19.1.1",
    "@react-native/babel-preset": "0.80.2",
    "@react-native/eslint-config": "0.80.2",
    "@react-native/metro-config": "0.80.2",
    "@react-native/typescript-config": "0.80.2",
    "@types/axios": "^0.9.36",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.1.0",
    "@types/react-test-renderer": "^19.1.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "patch-package": "^8.0.0",
    "postinstall-postinstall": "^2.1.0",
    "prettier": "2.8.8",
    "react-test-renderer": "19.1.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

app.tsx

/* eslint-disable react-native/no-inline-styles */
import {View, Text, TouchableOpacity, ActivityIndicator} from 'react-native';
import React, {useState} from 'react';

const App = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState('');

  const handleAPICall = () => {
    setIsLoading(true);

    const fetchWithTimeout = (url: string, options: any, timeout = 5000) => {
      return Promise.race([
        fetch(url, options),
        new Promise((_, reject) =>
          setTimeout(() => reject(new Error('Request timed out')), timeout),
        ),
      ]);
    };

    fetchWithTimeout('https://jsonplaceholder.typicode.com/todos/1', {}, 55000)
      .then((resp: any) => resp.json())
      .then(apiResp => setData(apiResp))
      .catch(err => setData('error: ' + err.message))
      .finally(() => setIsLoading(false));
  };

  if (isLoading) {
    return (
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          flex: 1,
        }}>
        <ActivityIndicator color={'blue'} size={'large'} />
      </View>
    );
  }

  return (
    <View
      style={{
        flex: 1,
        margin: 40,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <TouchableOpacity
        onPress={handleAPICall}
        style={{
          backgroundColor: 'pink',
          alignSelf: 'center',
          padding: 20,
        }}>
        <Text>call API</Text>
      </TouchableOpacity>

      <Text>{JSON.stringify(data)}</Text>
    </View>
  );
};

export default App;

Steps to reproduce

create a react native app
add a api call using fetch/axios
run the app
most cases for me when I am on cellular network the api fails (I have fast internet speed [5G]) and when I am in wifi network it successfully fetches the data

React Native Version

0.80.2

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

npx @react-native-community/cli info
info Fetching system and libraries information...
System:
  OS: macOS 15.6.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 134.58 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.9.0
    path: ~/.nvm/versions/node/v22.9.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v22.9.0/bin/yarn
  npm:
    version: 11.4.1
    path: ~/.nvm/versions/node/v22.9.0/bin/npm
  Watchman:
    version: 2024.09.23.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/siddhantgoyal/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK:
    API Levels:
      - "29"
      - "30"
      - "31"
      - "33"
      - "33"
      - "33"
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 29.0.3
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.1
      - 33.0.2
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12700392
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.12
    path: /usr/bin/javac
  Ruby:
    version: 3.1.0
    path: /Users/siddhantgoyal/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 19.1.1
    wanted: 19.1.1
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.80.2
    wanted: 0.80.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: true

info React Native v0.81.4 is now available (your project is running on v0.80.2).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.81.4
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.80.2&to=0.81.4
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Stacktrace or Logs

No crash, just give network error

MANDATORY Reproducer

NIL

Screenshots and Videos

No response

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

• For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.

[riteshshukla04]

Couldn’t repro this even on 3G internet. Can you attach a reproducer

[siddhant124]

@riteshshukla04, I have shared the code in description, I am just calling the API uising fetch and facing issue when connected to cellular data

[riteshshukla04]

Please create a reproducer . Without that it is not possible to help

[harsh25jai]

@siddhant124 Please confirm your emulator or device is correctly connected to internet.

I also faced similar issue when running using Android Studio Emulator. (I deleted and created another emulator and it worked).

Check
android/app/src/main/res/xml/network_security_config.xml file that your localhost is allowed

API you are fetching is https or try once with https.

If none are working try creating a release build and run on the device.

[thearvindgehlod]

@siddhant124
I'm also seeing this on React Native 0.81.4.

Repro:

• Android 15: API requests work fine.
• Android 14 and lower: requests (fetch and axios) fail with TypeError: Network request failed.
• iOS: works fine.
• Same backend and certs work from Postman / browser.
• INTERNET permission is declared.
• Reproduced on both emulator and physical devices.
• Tried android:usesCleartextTraffic="true" and a network_security_config, no change.

This looks like a platform/version difference affecting RN's networking on older Android releases. Happy to provide logs or a minimal repro — please advise what would help debug/triage.