native-data-fetching

Implement and debug data fetching in React Native and Expo apps with caching, offline support, and authentication.

1|1|Updated Jul 6, 2026
One-click install
npx skills add https://github.com/muhammaddadu/ai-skill-collection --skill native-data-fetching-muhammaddadu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: native-data-fetching
Source: https://github.com/muhammaddadu/ai-skill-collection/tree/main/3-delivery/native-data-fetching
Command: npx skills add https://github.com/muhammaddadu/ai-skill-collection --skill native-data-fetching-muhammaddadu

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Mobile apps need reliable networking, but developers often struggle with error handling, token management, offline behavior, and environment configuration in React Native and Expo projects. This Skill provides concrete patterns and code for building robust client-side networking. ## Core Features & Use Cases - Data Fetching Patterns: Implement fetch requests with typed error handling, retries with exponential backoff, and request cancellation via AbortController. - State & Caching: Set up React Query (TanStack Query) for caching, mutations, and offline-aware queries synced with NetInfo network status. - Auth & Configuration: Manage tokens securely with expo-secure-store, implement token refresh flows, and configure API URLs with EXPO_PUBLIC_ environment variables. - Use Case: You are building an Expo app that must work offline and authenticate users. Use this Skill to wire React Query with NetInfo for offline resilience and store auth tokens in SecureStore with an automatic refresh flow. ## Quick Start Use the native-data-fetching skill to set up React Query with offline support and secure token storage in my 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 built-in fetch API and always check response.ok before parsing JSON, since fetch does not throw on HTTP error statuses. Wrap requests in a helper that throws typed errors and supports retries with exponential backoff.

Should I use React Query or SWR for React Native 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 integrates with NetInfo through onlineManager to pause queries when offline.

How do I store authentication tokens securely in Expo?

Store tokens with expo-secure-store, not AsyncStorage, because SecureStore encrypts values in the device keychain. Combine it with an authenticated fetch wrapper and a token refresh flow that deduplicates concurrent refresh requests.

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

Define EXPO_PUBLIC_API_URL in .env.development and .env.production files; Expo inlines EXPO_PUBLIC_ variables at build time. Never put secrets in EXPO_PUBLIC_ variables since they are visible in the built app bundle.

Can Expo Router loaders be used on native platforms?

No, Expo Router data loaders are web-only and require SDK 55+ with server or static web output. For native platforms, use client-side fetching with React Query or fetch instead.

Why do my Expo environment variable changes not take effect?

Environment variables are inlined at build time, not runtime, so you must restart the dev server after editing .env files. Also verify the variable uses the EXPO_PUBLIC_ prefix, otherwise it will not be exposed to the client bundle.