IntermediárioMobileAberto

Arquitetura de app React Native com navegação e estado global

Estrutura completa de projeto React Native com React Navigation, estado global e organização de código.

React NativearquiteturanavegaçãomobileExpo

Objetivo do Prompt

Definir a arquitetura base de um app React Native que seja escalável, testável e permita desenvolvimento paralelo por múltiplos devs.

Exemplo Real de Uso

A startup baiana FitTrack está criando um app de acompanhamento de treinos. O time tem 3 devs mobile que nunca trabalharam juntos em React Native. Precisam de uma arquitetura sólida antes de começar a codar para evitar retrabalho.

Prompt

Projete a arquitetura completa de um app React Native [COM/SEM EXPO] para [NOME DO APP], um aplicativo de [CATEGORIA] voltado para [PÚBLICO-ALVO] no mercado brasileiro.

**Funcionalidades principais:**
- [FUNCIONALIDADE 1]
- [FUNCIONALIDADE 2]
- [FUNCIONALIDADE 3]
- [FUNCIONALIDADE 4]
- [FUNCIONALIDADE 5]

**1) Estrutura de Pastas:**
```
src/
├── app/              # Screens organizadas por feature
├── components/       # Componentes reutilizáveis
├── hooks/            # Custom hooks
├── services/         # API calls, storage, analytics
├── stores/           # Estado global (Zustand)
├── navigation/       # Stack, Tab, Drawer navigators
├── theme/            # Tokens de design (cores, tipografia, espaçamentos)
├── utils/            # Helpers, formatters, validators
├── types/            # TypeScript types/interfaces globais
└── constants/        # Configurações, endpoints, feature flags
```

**2) Navegação (React Navigation 7):**
- Stack Navigator: fluxos de auth (login, signup, forgot password)
- Bottom Tab Navigator: telas principais (home, busca, perfil, etc.)
- Drawer Navigator (se aplicável): menu lateral
- Deep linking configuration (URLs universais)
- Proteção de rotas autenticadas (redirect para login)
- Tipagem forte para params de cada rota
- Transições customizadas entre telas

**3) Estado Global (Zustand + React Query):**
- `useAuthStore`: token, user, isAuthenticated, login(), logout()
- `useAppStore`: theme, language, onboarding completed
- React Query para server state (queries, mutations, prefetch)
- Persistência com MMKV (mais rápido que AsyncStorage)
- Tipagem completa de cada store

**4) Camada de Serviços:**
- API client (Axios) com interceptors (auth token, refresh, error handling)
- Tipagem de request/response para cada endpoint
- Error handling padronizado (toast, retry, offline queue)
- Analytics service (mixpanel/amplitude wrapper)
- Storage service (MMKV abstraction)

**5) Padrões de Código:**
- ESLint + Prettier config para React Native
- Commit conventions (conventional commits)
- Component pattern: Container (lógica) + Presentation (UI)
- Custom hooks para lógica reutilizável
- Testes: Jest + React Native Testing Library

**6) Performance:**
- FlashList ao invés de FlatList para listas longas
- Memoização com useMemo/useCallback (onde realmente importa)
- Image caching com expo-image ou react-native-fast-image
- Hermes engine habilitado
- Bundle analysis e code splitting

Inclua código TypeScript para os componentes e hooks mais importantes.

Como usar este prompt

  1. 1Cole o prompt diretamente no ChatGPT, Claude, Gemini ou qualquer assistente de IA.
  2. 2Personalize os campos entre colchetes [assim] com suas informações específicas.
  3. 3Para melhores resultados, forneça contexto adicional sobre seu caso de uso.
  4. 4Combine múltiplos prompts em uma conversa para resultados mais completos.
  5. 5Salve os prompts que mais usa para acesso rápido no futuro.

Prompts relacionados

Ver todos

Explore outras categorias de prompts

Assine o AulasDeIA para desbloquear

Acesse 10.000+ prompts prontos para usar em qualquer profissão, além de todos os cursos da plataforma.

Assinar por R$ 49,90/mês

Cancele quando quiser. Sem multas.