Como estruturar um app React Native escalável

Problema

Tudo em screens/ gigantes, lógica de API nas telas, estado global para cada toggle e imports cruzados entre features. O app funciona no MVP e trava no crescimento.

Solução

Organizar por feature (features/auth, features/checkout) com components, hooks, api e model locais. Navegação tipada (Expo Router ou React Navigation com types). Estado: servidor em TanStack Query; UI local em Zustand/Context enxuto — evitar “um store para tudo”.

Arquitetura

src/
  app/ or navigation/
  features/
    profile/
      screens/
      components/
      api.ts
      queries.ts
  shared/
    ui/
    lib/

• Barrel files mínimos para não quebrar tree shaking.
• Native modules isolados atrás de interface testável.

Código

// features/profile/api.ts
export async function fetchProfile(token: string) {
  const res = await fetch(`${ENV.apiBase}/me`, {
    headers: { Authorization: `Bearer ${token}` },
  });
  if (!res.ok) throw new ApiError(res.status);
  return res.json();
}

// features/profile/screens/ProfileScreen.tsx
export function ProfileScreen() {
  const { data, isPending } = useQuery({
    queryKey: ["profile"],
    queryFn: () => fetchProfile(getAccessToken()),
  });
  if (isPending) return <Skeleton />;
  return <ProfileHeader user={data} />;
}

Performance

FlashList em listas longas; memo em itens pesados; imagens com tamanho correto; Hermes ligado em release.

Melhorias futuras

Módulos nativos próprios com codegen; feature flags; OTA updates (Expo) com política de risco.

Conclusão

RN escalável é fronteiras de código como no web, mais atenção a bridge e bundle. Excelente diferencial em perfis full stack.