React Native screen with Expo and TypeScript, covering every state

Paste a real sample of your API's JSON response and list the libraries you already use. Test the screen on one iOS and one Android device, with airplane mode on and the font size at maximum.

Screen: the user’s order list with a status filter and detail on tap · Data: paginated GET /orders with a token · Navigation: Expo Router · Style: StyleSheet with brand colors.

3. Data hook — hooks/useRecipes.ts

import { useCallback, useEffect, useRef, useState } from 'react';

export type Recipe = { id: string; title: string; image: string; minutes: number }; // id type: [FILL IN]
type RecipesResponse = { items: Recipe[]; total: number };
type Status = 'loading' | 'error' | 'success';

const API_URL = process.env.EXPO_PUBLIC_API_URL;

export function useRecipes(search: string) {
  const [recipes, setRecipes] = useState<Recipe[]>([]);
  const [status, setStatus] = useState<Status>('loading');
  const [refreshing, setRefreshing] = useState(false);
  const controller = useRef<AbortController | null>(null);

  const load = useCallback(async (isRefresh = false) => {
    controller.current?.abort();                        // cancel the previous request
    const ctrl = new AbortController();
    controller.current = ctrl;
    if (isRefresh) setRefreshing(true); else setStatus('loading');
    try {
      // Search parameter name: [FILL IN]
      const params = new URLSearchParams({ page: '1', q: search });
      const res = await fetch(`${API_URL}/api/recipes?${params}`, { signal: ctrl.signal });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const data = (await res.json()) as RecipesResponse;
      setRecipes(data.items);
      setStatus('success');
    } catch {
      if (!ctrl.signal.aborted) setStatus('error');
    } finally {
      if (!ctrl.signal.aborted) setRefreshing(false);
    }
  }, [search]);

  useEffect(() => {
    load();
    return () => controller.current?.abort();           // when the screen unmounts
  }, [load]);

  return { recipes, status, refreshing, retry: () => load(), refresh: () => load(true) };
}

No new dependencies: once the app grows (cross-screen caching, infinite pagination), a data-fetching library would be worth adding. The screen uses status to show a skeleton, an error with a "Try again" button, or the FlatList…