Arquitetura React Native

Padrões prontos para produção para desenvolvimento React Native com Expo, incluindo navegação, gerenciamento de estado, módulos nativos e arquitetura offline-first.

Quando Usar Esta Habilidade

• Iniciando um novo projeto React Native ou Expo
• Implementando padrões de navegação complexos
• Integrando módulos nativos e APIs de plataforma
• Construindo aplicativos móveis offline-first
• Otimizando o desempenho do React Native
• Configurando CI/CD para lançamentos móveis

Conceitos Principais

1. Estrutura do Projeto

src/
├── app/                    # Expo Router screens
│   ├── (auth)/            # Auth group
│   ├── (tabs)/            # Tab navigation
│   └── _layout.tsx        # Root layout
├── components/
│   ├── ui/                # Reusable UI components
│   └── features/          # Feature-specific components
├── hooks/                 # Custom hooks
├── services/              # API and native services
├── stores/                # State management
├── utils/                 # Utilities
└── types/                 # TypeScript types

2. Expo vs React Native Puro

Início Rápido

# Create new Expo project
npx create-expo-app@latest my-app -t expo-template-blank-typescript

# Install essential dependencies
npx expo install expo-router expo-status-bar react-native-safe-area-context
npx expo install @react-native-async-storage/async-storage
npx expo install expo-secure-store expo-haptics

// app/_layout.tsx
import { Stack } from 'expo-router'
import { ThemeProvider } from '@/providers/ThemeProvider'
import { QueryProvider } from '@/providers/QueryProvider'

export default function RootLayout() {
  return (
    <QueryProvider>
      <ThemeProvider>
        <Stack screenOptions={{ headerShown: false }}>
          <Stack.Screen name="(tabs)" />
          <Stack.Screen name="(auth)" />
          <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
        </Stack>
      </ThemeProvider>
    </QueryProvider>
  )
}

Padrões detalhados e exemplos práticos

A documentação detalhada dos padrões está em references/details.md. Leia esse arquivo quando o nível de navegação acima for insuficiente.

Melhores Práticas

O Que Fazer

• Use Expo - Desenvolvimento mais rápido, atualizações OTA, código nativo gerenciado
• FlashList em vez de FlatList - Melhor desempenho para listas longas
• Memoize componentes - Evite re-renderizações desnecessárias
• Use Reanimated - Animações de 60fps na thread nativa
• Teste em dispositivos reais - Simuladores não capturam problemas do mundo real

O Que Não Fazer

• Não use estilos inline - Use StyleSheet.create para desempenho
• Não faça fetch no render - Use useEffect ou React Query
• Não ignore diferenças de plataforma - Teste em iOS e Android
• Não armazene segredos no código - Use variáveis de ambiente
• Não pule os error boundaries - Falhas em mobile são implacáveis