react-native-nitro-fetch is a general purpose network fetching library for React Native. It can be used as a drop-in replacement for the built-in fetch(...) method, as well as provide additional features like prefetching and workletized mappers.

Features

• 🔧 Drop-in replacement for the built-in fetch(...) method
• ⚡️ Fast HTTP stack using Cronet on Android, and URLSession on iOS
• 💪 Supports HTTP/2, QUIC, Brotli, and disk cache
• ⏰ Prefetching on app-startup for even faster initialization
• 🧵 Worklet support for parallel data mapping without blocking the JS Thread
• 🔥 Powered by Nitro Modules

Installation

npm i react-native-nitro-fetch react-native-nitro-modules

Nitro Modules requires react-native 0.75+ or higher

Usage

To simply fetch data, import the fetch(...) method from react-native-nitro-fetch:

import { fetch } from 'react-native-nitro-fetch'

const res = await fetch('https://httpbin.org/get')
const json = await res.json()

This can be used as a drop-in-replacement for the built-in fetch(...) method.

Prefetching in JS

You can prefetch a URL in JS, which keeps the result cached for the next actual fetch(...) call - this can be used shortly before navigating to a new screen to have results hot & ready:

import { prefetch } from 'react-native-nitro-fetch'

await prefetch('https://httpbin.org/uuid', {
  headers: { prefetchKey: 'uuid' }
})

Then, on the new screen that was navigated to:

import { fetch } from 'react-native-nitro-fetch'

const res = await fetch('https://httpbin.org/uuid', {
  headers: { prefetchKey: 'uuid' }
})
console.log('prefetched header:', res.headers.get('nitroPrefetched'))

Prefetching for the next app launch

Prefetching data on app launch (or process start) will make it hot & ready once your JS code actually runs. Call prefetchOnAppStart(...) to enqueue a prefetch for the next app start:

import { prefetchOnAppStart } from 'react-native-nitro-fetch'

await prefetchOnAppStart('https://httpbin.org/uuid', {
  prefetchKey: 'uuid'
})

Then, once the app opens the next time, a call to fetch(...) might resolve faster since it will contain already cached results:

import { fetch } from 'react-native-nitro-fetch'

const res = await fetch('https://httpbin.org/uuid', {
  headers: { prefetchKey: 'uuid' }
})
console.log('prefetched header:', res.headers.get('nitroPrefetched'))

In our tests, prefetching alone yielded a ~220 ms faster TTI (time-to-interactive) time! 🤯

Worklet Mapping

Since Nitro Fetch is a Nitro Module, it can be used from Worklets. This can be useful to parse data without blocking the main JS-Thread:

import { nitroFetchOnWorklet } from 'react-native-nitro-fetch'

const data = await nitroFetchOnWorklet(
  'https://httpbin.org/get',
  undefined,
  (payload) => {
    'worklet'
    return JSON.parse(payload.bodyString ?? '{}')
  }
)

Project Status

Nitro Fetch is currently in an alpha stage. You can adopt it in production, but keep in mind that the library and it's API is subject to change.

Limitations & Alternatives

• HTTP streaming is not yet supported. As an alternative, use Expo's expo-fetch. Streaming is on the roadmap.
• WebSockets are not supported. For high‑performance sockets and binary streams, consider using react-native-fast-io by our friends at Callstack.

Documentation

• Getting Started
• API Reference
• Android Details
• iOS Details
• Prefetch & Auto-Prefetch
• Worklets
• Troubleshooting
• Cronet (Android) notes
• Cronet (iOS) notes

Margelo

Nitro Fetch is built with ❤️ by Margelo. We build fast and beautiful apps. Contact us at margelo.com for high-end consultancy services.

Contributing

• Development workflow: CONTRIBUTING.md#development-workflow
• Sending a pull request: CONTRIBUTING.md#sending-a-pull-request
• Code of conduct: CODE_OF_CONDUCT.md

Authors

• Szymon Kapala
• Alex Shumihin
• Ronald Goedeke
• Marc Rousavy

License

MIT