react-native-real-fetch

A not-so-perfect Fetch API implementation that’s good enough to do what React Native’s fetch can’t.

What does this do better ?

• No weird Cookie header behavior — it does not store previous Set-Cookie headers in an internal cookie jar. You have to manage them yourself.
• redirect: "manual" finally prevents any redirection from happening.

Limitations

On both Android and iOS, the statusText property depends on the OS' implementation. It will not retrieve the status text from the server.

Basically, whatever you can do with fetch should be possible here — just check the types to ensure the variables you're passing are supported.

Since I initially developed this for personal use, only basic functionality is supported. If you need advanced features like signal for aborting requests, they likely aren’t supported.

Please open an issue if there's something essential you need that isn’t supported.

Installation

React Native

npm add react-native-real-fetch react-native-nitro-modules@^0.29.3
cd ios && pod install

Expo

npx expo add react-native-real-fetch react-native-nitro-modules@^0.29.3
npx expo prebuild

Usages

import { fetch } from "react-native-real-fetch";

const response = await fetch("https://api.github.com");
const json = await response.json();

import { fetch } from "react-native-real-fetch";

const { status, headers } = await fetch("http://api.local.dev/api/login", {
  method: "POST",
  redirect: "manual",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ username, password }),
});

if (status === 200) {
  const cookies = headers.get("set-cookie");
  console.log(cookies);
}

import { fetch } from "react-native-real-fetch";

const response = await fetch("http://api.local.dev/api/user", {
  headers: { Cookie: "session=some_token; lang=en" },
  // Only the given cookies will be sent, no stored additional cookies will be sent !
  // In fact, nothing is stored.
});

const bytes = await response.bytes();
console.log(bytes); // > Uint8Array

Android configuration for using http:

Since Android 9 (API level 28), cleartext (http:) traffic is restricted by default. To allow it, you need to explicitly enable it.

Allowing HTTP for All Domains

To enable HTTP for all domains, add the following to your AndroidManifest.xml.

<application
    android:usesCleartextTraffic="true"
    ... >
</application>

Allowing HTTP for Specific Domains Only

If you prefer to allow HTTP traffic only for specific domains, use a networkSecurityConfig instead.

<application
  android:networkSecurityConfig="@xml/network_security_config"
  ... >
</application>

Then, create a res/xml/network_security_config.xml file to define the domain-specific configuration.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="true">yourdomain.com</domain>
  </domain-config>
</network-security-config>

Contributing

git clone https://github.com/Vexcited/react-native-real-fetch
cd react-native-real-fetch/package
bun install

After making your changes, you can build the package with the following commands.

bun run clean
bun run codegen
bun run build

To see how to run the example app, head over to the example folder.

Credits

• react-native-fast-io – A lot of code was adapted from this project.