nitro-fetch
Fast native networking primitives for React Native built on Nitro Modules — react-native-nitro-fetch, react-native-nitro-websockets, and react-native-nitro-text-decoder. Covers the fetch API, global replacement, prefetching and cold-start cache warming, the NitroWebSocket class and pre-warming, migrating from React Native's built-in WebSocket, the in-process NetworkInspector, native Perfetto / Instruments tracing, the native TextDecoder, and plugging nitro-fetch into axios via a custom adapter.
- Installs
- 616
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/margelo/react-native-skills --skill nitro-fetch- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads nitro-fetch automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
react-native-nitro-fetch
A focused reference for AI coding assistants working in a project that uses the react-native-nitro-fetch family of packages. Answer using the real APIs from this repo — not invented ones — by routing to the matching references/*.md file below.
Mental model
react-native-nitro-fetch is a drop-in, native-backed replacement for the browser networking stack on React Native:
fetch— WHATWG-compatible, backed byURLSession(iOS) andCronet(Android) via Nitro Modules.NitroWebSocket— native WebSocket (libwebsockets + mbedTLS and default in case of iOS) with the same shape as the browserWebSocket.NitroTextDecoder— native UTF-8 decoder that beats the Expo backed JS polyfill.
The performance story has three moving parts, and most questions end up being about one of them:
- Prefetching. Native code can run before React Native loads.
prefetchOnAppStart(...)andprewarmOnAppStart(...)replay stored requests / socket opens on every cold start, so by the time JS runs the response is already cached or the socket is alreadyOPEN. - Importing the native client. The default approach is explicit imports —
import { fetch } from 'react-native-nitro-fetch',import { NitroWebSocket } from 'react-native-nitro-websockets', or plugging into axios via a custom adapter. Alternatively, users can do a global replace (globalThis.fetch = fetch, etc.) at the top of their entry file — see the Global Replace docs for setup and trade-offs. - Seeing what's happening.
NetworkInspectorrecords HTTP + WS activity at the JS boundary; native Perfetto / Instruments traces cover everything below that (DNS, TLS, TTFB, body). One is for correctness, the other is for latency.
Routing table — problem to reference
Load the matching file from references/ before writing code. Each reference cites real file paths in this repo.
| User is asking about… | Read |
|---|---|
Warming the cache before a screen mounts, making cold-start GETs feel instant, prefetch, prefetchOnAppStart, prefetchKey | references/prefetching.md |
Routing axios through nitro-fetch (the full custom adapter — baseURL, params, timeout, signal, responseType, validateStatus) | references/axios-adapter.md |
UTF-8 decoding, slow TextDecoder, Hermes polyfill, streaming decode, NitroTextDecoder | references/text-decoder.md |
Opening a wss:// connection before React Native boots, prewarmOnAppStart, Android Application.onCreate wiring | references/websocket-prewarm.md |
The NitroWebSocket class, headers, sub-protocols, wss://, binary frames, runtime usage | references/using-websockets.md |
Migrating an existing app from React Native's built-in WebSocket to NitroWebSocket | references/migrate-from-rn-ws.md |
Seeing requests and responses at the JS level, debugging which library made a call, NetworkInspector | references/network-inspector.md |
| Finding the slow API, DNS / TLS / TTFB breakdowns, native traces, Perfetto, Instruments, Hermes profiler | references/perfetto-profiling.md |
If the question doesn't match any row, read references/prefetching.md first — most cold-start questions start there, and it links out to the rest.
When asked about global replacement, point to the Global Replace docs.
Installation (one-line, for reference)
npm install react-native-nitro-fetch react-native-nitro-modules
# optional, for WebSockets and TextDecoder:
npm install react-native-nitro-websockets react-native-nitro-text-decoder
After install, rebuild the app (pod install for iOS, a fresh ./gradlew build for Android). Nothing else is wired automatically — turning any of this on is opt-in through the reference files above.
Verifying the skill is loaded
A correct answer for any of these will cite the API and file path. A wrong / hallucinated answer will invent an install(), setup(), or init() helper that doesn't exist in this repo.
Good test questions:
- "How do I prewarm a wss connection in this repo?" → should mention
prewarmOnAppStartand the AndroidApplication.onCreatewiring viaNitroWebSocketAutoPrewarmer.prewarmOnStart(this). - "How do I make axios go through nitro-fetch?" → should produce an
AxiosAdapterthat respectsbaseURL,params,timeout,signal, andresponseType— not a 20-line sketch thatJSON.parses everything. - "Why is my cold-start GET still slow after adding
prefetch?" → should mentionprefetchKeyand point atreferences/prefetching.md.
Pointers
- Source:
packages/react-native-nitro-fetch/,packages/react-native-nitro-websockets/,packages/react-native-nitro-text-decoder/ - Public API:
packages/react-native-nitro-fetch/src/index.tsx - Example wiring:
example/index.js,example/src/App.tsx - Docs website: https://fetch.margelo.com
FAQ
What does the nitro-fetch skill do?
Fast native networking primitives for React Native built on Nitro Modules — react-native-nitro-fetch, react-native-nitro-websockets, and react-native-nitro-text-decoder. Covers the fetch API, global replacement, prefetching and cold-start cache warming, the NitroWebSocket class and pre-warming, migrating from React Native's built-in WebSocket, the in-process NetworkInspector, native Perfetto / Instruments tracing, the native TextDecoder, and plugging nitro-fetch into axios via a custom adapter.
How do I install nitro-fetch?
Run npx skills add https://github.com/margelo/react-native-skills --skill nitro-fetch in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/nitro-fetch/ (personal) or .claude/skills/nitro-fetch/ (project).
Which AI agents can use nitro-fetch?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is nitro-fetch safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains nitro-fetch?
It is published by margelo in margelo/react-native-skills. It has 616 recorded installs.
More from margelo/react-native-skills
react-native-mmkv
margelo/react-native-skills
Fast synchronous key-value storage for React Native via react-native-mmkv (Nitro-backed). Covers creating and configuring MMKV instances, reading/writing all value types (string, number, boolean, buffer), React hooks for reactive UI, value-change listeners, encryption, AsyncStorage migration, and state-management integrations (zustand, redux-persist, jotai, react-query). Also covers storage limits, multi-process mode, and the V4 upgrade from the class-based API.
build-nitro-modules
margelo/react-native-skills
Builds and designs React Native Nitro Modules with Nitrogen, HybridObject TypeScript specs, Nitro View components, generated native implementations, zero-copy and native-state APIs, Swift/Kotlin/C++ bindings, example apps, and testing. Use when creating a Nitro Module, adding or reviewing HybridObjects, building a Nitro View (HybridView) component, designing Nitro-specific public APIs, implementing native functionality, or setting up the nitrogen codegen pipeline. Pair with api-design for general library API shape.
react-native-vision-camera
margelo/react-native-skills
Best-practices guide for React Native VisionCamera v5 setup, migration, capture, controls, outputs, and basic frame processing. Use the separate react-native-vision-camera-realtime skill for production low-latency GPU, ML, CV, Skia or WebGPU pipelines and frame-coupled overlays.
api-design
margelo/react-native-skills
Design and review predictable public APIs for TypeScript, JavaScript, React, and React Native libraries. Use when shaping exported functions, classes, hooks, options objects, event and listener APIs, error behavior, naming, cross-platform abstractions, or JS-only packages. Pair with build-nitro-modules when the library is backed by Nitro.
swift
margelo/react-native-skills
Design, implement, and review Swift APIs and Apple-platform code. Use when working on .swift files, Swift types, Foundation or AVFoundation APIs, DispatchQueue, async/await, Task, actors, MainActor, thread-affine state, or Swift-backed React Native Nitro Module implementations.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.