Como testar o app React Native gerado por IA no Windows?

Use o Expo Go no seu dispositivo físico ou o Android Emulator. O Claude Code pode configurar o ambiente de testes com Jest e React Native Testing Library. O Codex gera os testes unitários para componentes e serviços.

Tutorial · 2026-07-12

Desenvolvendo um App React Native com Agentes de IA

Name: Orquestra
Price: 39.00 BRL
Availability: InStock

Tutorial completo para criar um aplicativo React Native do zero usando Claude Code e Codex como assistentes de desenvolvimento mobile no Windows 11.

Desenvolver um aplicativo mobile React Native envolve configuração de ambiente, navegação, gerenciamento de estado, chamadas de API, armazenamento local e testes em múltiplas plataformas. Com agentes de IA, cada uma dessas etapas pode ser acelerada significativamente. Neste tutorial, você vai aprender a criar um app React Native com agentes de IA usando Claude Code e Codex de forma orquestrada — tudo no Windows 11.

O que vamos construir

Vamos desenvolver um aplicativo de lista de tarefas com autenticação usando React Native com Expo. O app incluirá:

Autenticação com email e senha
CRUD de tarefas com categorias
Navegação por tabs e stack
Armazenamento local com AsyncStorage
Tema claro/escuro
Notificações push locais

Imagem sugerida: Mockup do aplicativo final mostrando a tela de login e a lista de tarefas com categorias coloridas.

Setup do projeto Expo com agentes

Vamos usar Claude Code para configurar todo o ambiente React Native com Expo.

Inicialização

npx create-expo-app task-manager-mobile --template blank-typescript cd task-manager-mobile

Agora, peça ao Claude Code para instalar as dependências e configurar a estrutura:

claude "Configure o projeto Expo com as seguintes dependências: @react-navigation/native, @react-navigation/bottom-tabs, @react-navigation/native-stack, react-native-screens, react-native-safe-area-context, @react-native-async-storage/async-storage, axios, react-hook-form, zod, @hookform/resolvers, expo-notifications. Crie a estrutura de pastas: src/screens, src/components, src/hooks, src/services, src/contexts, src/types, src/utils, src/navigation."

Em segundos, o Claude Code instala tudo e cria a estrutura de diretórios.

Navegação e telas com Claude Code

Claude Code é excelente para criar a arquitetura de navegação e as telas do aplicativo.

Configuração de navegação

claude "Crie src/navigation/AppNavigator.tsx com navegação aninhada: 1. AuthStack: LoginScreen, RegisterScreen (não autenticado) 2. MainTabs: HomeTab (HomeScreen), TasksTab (TaskListScreen), ProfileTab (ProfileScreen) 3. TaskStack dentro de TasksTab: TaskListScreen, TaskDetailScreen, TaskFormScreen Use @react-navigation/native-stack para stacks e @react-navigation/bottom-tabs para tabs. O navigator principal deve alternar entre AuthStack e MainTabs baseado em um contexto de autenticação."

Tela de login

claude "Crie src/screens/LoginScreen.tsx com formulário de email e senha usando react-hook-form e Zod. Deve ter validação em tempo real, botão de submit com loading state, link para tela de registro e tratamento de erros da API. Use os componentes Input e Button de src/components/ui. Estilize com StyleSheet."

Lista de tarefas

claude "Crie src/screens/TaskListScreen.tsx com FlatList de tarefas, cada item mostrando título, categoria (com cor), status e data de vencimento. Inclua FAB button para adicionar nova tarefa, pull-to-refresh, e swipe-to-delete. Use useCallback e useMemo para performance. O estado vem de um contexto TaskContext."

Hooks e serviços com Codex

Enquanto Claude Code cuida das telas, Codex gera os hooks e serviços — código mais padronizado e repetitivo.

Serviço de API

opencode "Crie src/services/api.ts com uma instância axios configurada: 1. BaseURL de env ou constante 2. Interceptor de request para adicionar token JWT do AsyncStorage 3. Interceptor de response para tratar erros 401 (refresh token ou logout) 4. Tipagem genérica para respostas: ApiResponse<T> = { success: boolean, data?: T, error?: string } 5. Métodos: get, post, put, delete tipados Crie também src/services/authService.ts com login, register, refreshToken, logout. Crie src/services/taskService.ts com CRUD de tarefas."

Contextos e hooks

opencode "Crie src/contexts/AuthContext.tsx com: 1. AuthState: { user, token, isLoading, isAuthenticated } 2. AuthContext com login, register, logout, updateProfile 3. AsyncStorage para persistir token e user 4. Auto-login na inicialização (check stored token) Crie src/contexts/TaskContext.tsx com: 1. TaskState: { tasks, isLoading, error, filter } 2. CRUD operations que chamam taskService 3. Cache local com AsyncStorage para modo offline 4. Funções de filtro por status, categoria e data"

Hooks customizados

opencode "Crie src/hooks/useDebounce.ts, src/hooks/useNetworkStatus.ts (NetInfo), src/hooks/useNotifications.ts (expo-notifications), e src/hooks/useTheme.ts com tema claro/escuro persistido no AsyncStorage."

Testes no mobile

Testar um aplicativo mobile é essencial. Vamos usar Codex para gerar os testes e Claude Code para configurar o ambiente.

Configuração do Jest

claude "Configure Jest no projeto Expo com @testing-library/react-native, jest-expo, @types/jest. Crie jest.config.js com preset jest-expo, setupFilesAfterSetup apontando para jest-setup.js. Adicione mocks para AsyncStorage e expo-notifications."

Testes de tela

opencode "Crie tests/screens/LoginScreen.test.tsx: 1. Renderização: deve mostrar campos de email e senha, botão de login 2. Validação: deve exibir erro se email for inválido, deve exibir erro se senha estiver vazia 3. Submit: deve chamar função de login com dados corretos 4. Navegação: link para RegisterScreen deve estar presente"

Build e publicação

Para finalizar, vamos usar Claude Code para preparar o build do aplicativo.

claude "Configure o app.json do Expo com nome, slug, ícone e splash screen. Crie scripts no package.json para build: eas build --platform android e eas build --platform ios. Adicione configuração de notificações push no app.json. Gere o arquivo eas.json para ambiente de produção e desenvolvimento."

Com isso, seu app React Native com agentes de IA está completo e pronto para publicação nas lojas.

FAQ — Perguntas Frequentes

Preciso de um Mac para desenvolver React Native com agentes de IA?

Não. Com o Windows 11 e WSL 2, você desenvolve React Native normalmente. O Orquestra roda nativamente no Windows, e os agentes funcionam via terminal ou canvas integrado, sem depender de macOS.

Claude Code ou Codex: qual é melhor para componentes React Native?

Claude Code entende melhor o contexto do projeto e é ideal para criar estrutura de navegação, componentes de tela e lógica de estado global. Codex é mais rápido para schemas de validação, testes e código repetitivo.

Os componentes gerados por IA funcionam tanto em iOS quanto Android?

Sim, desde que você use apenas componentes React Native core ou bibliotecas multiplataforma. O agente gera código compatível com ambas as plataformas se você especificar no prompt.

Como testar o app gerado por IA no Windows?

Use o Expo Go no seu dispositivo físico ou o Android Emulator. O Claude Code configura o ambiente de testes com Jest e React Native Testing Library.

É possível usar Claude Code e Codex simultaneamente no mesmo app?

Sim. Com o Orquestra, você conecta ambos no mesmo canvas, define papéis e sincroniza o diretório. Claude Code cria as telas enquanto Codex gera os hooks e serviços — tudo em paralelo.

Comece a desenvolver apps mobile com agentes hoje

Neste tutorial, você aprendeu a criar um app React Native com agentes de IA usando Claude Code e Codex de forma orquestrada. Do setup inicial ao build para produção, cada etapa foi acelerada pelos agentes.

O segredo está na orquestração: Claude Code para contexto e arquitetura, Codex para volume e repetição. Juntos, eles cobrem o espectro completo do desenvolvimento mobile moderno.

Quer levar essa orquestração para o próximo nível? O Orquestra foi construído para conectar Claude Code, Codex e outros agentes no mesmo canvas infinito no Windows 11. Baixe o Orquestra e comece seu teste grátis de 7 dias.

Links internos recomendados

APIs REST com Agentes de IA — crie o backend que seu app mobile vai consumir
TypeScript React com Agentes de IA — tutorial complementar de componentes com TypeScript
Testes Automatizados com Agentes de IA — aprofunde-se em testes para mobile

Pronto para orquestrar seus agentes?

Baixe o Orquestra para Windows 11 e comece a coordenar seus agentes de IA em um canvas infinito. Grátis por 7 dias.

Começar teste grátis