Implement Network Requests and Data Fetching

This skill covers Expo/React Native networking end to end, and states it must be used for any API request, data fetching, caching, or network debugging work. It prefers the built-in expo/fetch over axios. Basic usage covers GET and POST requests with explicit response.ok status checks. For data fetching and caching it uses React Query (TanStack Query): a QueryClient provider setup with staleTime and retry defaults, useQuery for fetching with loading/error states, and useMutation with queryClient.invalidateQueries to refetch after a mutation. Error handling wraps fetch in a typed ApiError class distinguishing HTTP errors from network errors, plus a retry helper with exponential backoff. Authentication stores tokens in expo-secure-store (never AsyncStorage, which is not secure for sensitive data), wraps fetch calls with a Bearer-token header, and includes a single-flight token-refresh pattern that avoids concurrent refresh calls by sharing one in-flight promise. Offline support uses @react-native-community/netinfo for connectivity status, either as a useNetworkStatus hook or wired into React Query's onlineManager so queries automatically pause offline and resume online. Environment variables use Expo's EXPO_PUBLIC_ prefix, inlined at build time (not runtime) and visible in the built client bundle - so write-access API keys and database passwords must never use that prefix, only variables without it, and only inside API routes. Request cancellation uses AbortController on unmount for raw fetch, while React Query cancels automatically on invalidation or unmount.

Use this for implementing API requests, setting up data fetching with React Query or SWR, using Expo Router's useLoaderData route-level loaders (web, SDK 55+, documented separately in references/expo-router-loaders.md), debugging network failures, implementing caching or offline strategies, managing authentication tokens, or configuring API URLs and environment variables per environment.

A companion decision tree routes each of these needs to the right tool - React Query for complex apps versus SWR or custom hooks for simpler ones, expo-secure-store for token storage versus a refresh flow for token expiry, EXPO_PUBLIC_ env vars for client-safe config versus non-prefixed vars for server secrets in API routes only. As with other skills in this family, use it only when the task matches this scope and treat it as guidance rather than a substitute for environment-specific validation.

Input is a networking requirement (a specific API call, an auth flow, an offline scenario, an environment-config question). Output is TypeScript/TSX code using the recommended pattern - fetch with status checking, a useQuery/useMutation hook, a SecureStore-backed auth wrapper, a NetInfo-driven offline hook, or an EXPO_PUBLIC_-prefixed environment variable setup with a typed env.d.ts declaration.

Built on Expo's fetch, expo-secure-store, and EXPO_PUBLIC_ environment variables, with TanStack Query (React Query) for caching/mutations/offline pause-resume and @react-native-community/netinfo for connectivity detection. Cross-references a separate Expo Router loaders skill/reference for web-only route-level data loading on SDK 55+.

Expo/React Native developers implementing API calls, caching, authentication, offline behavior, or environment-specific API configuration.

useEffect(() => {
  const controller = new AbortController();

  fetch(url, { signal: controller.signal })
    .then((response) => response.json())
    .then(setData)
    .catch((error) => {
      if (error.name !== "AbortError") {
        setError(error);
      }
    });

  return () => controller.abort();
}, [url]);