native-data-fetching

Implements network requests, caching, and offline support for Expo and React Native apps.

1|Updated Dec 29, 2025

Search Tags:#React Query #authentication #API client #React Native #Expo #fetch #offline support

Ready to run

npx skills add https://github.com/ratnesh-maurya/tracker.ratnesh-maurya.com --skill native-data-fetching-ratnesh-maurya

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: native-data-fetching
Source: https://github.com/ratnesh-maurya/tracker.ratnesh-maurya.com/tree/main/.claude/skills/native-data-fetching
Command: npx skills add https://github.com/ratnesh-maurya/tracker.ratnesh-maurya.com --skill native-data-fetching-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-query, expo-secure-store, @react-native-community/netinfo, and includes references (resource) components.

What problem does it solve? Building reliable networking in Expo and React Native apps involves many pitfalls: unhandled fetch errors, insecure token storage, missing retry logic, and broken offline behavior. This Skill provides proven patterns for every common networking scenario so you avoid these mistakes. ## Core Features & Use Cases - Fetch & Error Handling: Typed API errors, exponential backoff retries, and request cancellation with AbortController. - React Query Integration: Setup, queries, mutations, cache invalidation, and offline-aware synchronization with NetInfo. - Authentication & Configuration: Secure token storage with expo-secure-store, token refresh flows, and environment-based API URLs using EXPO_PUBLIC_ variables. - Use Case: When your app must keep working on flaky connections, use the offline-first React Query setup with NetInfo so queries pause when offline and resume automatically when connectivity returns. ## Quick Start Ask the AI to implement an authenticated API request with error handling and React Query caching for your Expo app.

Frequently Asked Questions about native-data-fetching

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I make API calls in React Native?▼

Use the fetch API with explicit error handling: check response.ok before parsing JSON and throw typed errors for HTTP failures. For Expo apps, prefer expo/fetch over axios, and wrap requests in a reusable API client configured with your base URL.

Should I use React Query or SWR for data fetching?▼

React Query (TanStack Query) suits complex apps needing mutations, cache invalidation, and offline persistence, while SWR fits simpler fetching needs. React Query also handles request deduplication and automatic cancellation on unmount.

How do I store authentication tokens securely in Expo?▼

Store tokens in expo-secure-store, never in AsyncStorage, which is not encrypted. Implement a token refresh flow that deduplicates concurrent refresh attempts and attaches the valid token to requests via an authenticated fetch wrapper.

How do I configure different API URLs for development and production?▼

Use EXPO_PUBLIC_ prefixed variables in .env.development and .env.production files, accessed via process.env in code. Only EXPO_PUBLIC_ variables reach the client bundle, so keep secrets in non-prefixed variables used only in API routes.

How do I make my React Native app work offline?▼

Detect connectivity with @react-native-community/netinfo and sync it to React Query via onlineManager so queries pause offline and resume online. Combine this with React Query persistence to cache data across sessions.

Why do my fetch requests fail silently in React Native?▼

Fetch does not throw on HTTP error statuses, so calling response.json() without checking response.ok hides failures. Always validate the status code, parse error bodies, and distinguish network errors from HTTP errors with typed error classes.