Desenvolver aplicativos mobile com React Native Expo agentes e uma das formas mais produtivas de criar apps para iOS e Android em 2026. Com Claude Code e Codex como assistentes, o desenvolvimento mobile ganha velocidade — desde a configuracao do ambiente ate o build final com EAS. Este tutorial mostra o passo a passo para criar um app React Native com Expo usando agentes de IA no Windows 11.
Setup do Expo no Windows 11 com Claude Code
O setup de um projeto React Native Expo Claude Code e rapido com a ajuda do agente:
Criacao do projeto Expo
claude "Crie um novo projeto Expo com TypeScript. Use 'npx create-expo-app@latest task-manager-app --template blank-typescript'. Navegue ate a pasta e confirme que o projeto foi criado corretamente. Instale as dependencias: @react-navigation/native, @react-navigation/native-stack, @react-navigation/bottom-tabs, react-native-screens, react-native-safe-area-context."
Claude Code executa a criacao do projeto Expo, instala as dependencias e verifica se tudo esta pronto.
Configuracao do app.json
claude "Leia o app.json do projeto e atualize: - Nome do app: 'Task Manager' - Slug: 'task-manager-app' - Versao: '1.0.0' - Adicione a configuracao de splash screen com background color #6366f1 - Adicione o plugin expo-splash-screen - Configure o scheme para 'taskmanager'"
Estrutura de pastas
Peja ao Claude Code para organizar o projeto:
claude "Crie a estrutura de diretorios do app: src/screens/ (telas), src/components/ (componentes reutilizaveis), src/navigation/ (config de navegacao), src/services/ (API e dados), src/hooks/ (hooks customizados), src/theme/ (cores e estilos), src/types/ (tipos TypeScript), src/utils/ (utilitarios)."
Estrutura de telas com Claude Code
Com o projeto configurado, Claude Code cria as telas principais do app:
Tela inicial
claude "Crie src/screens/HomeScreen.tsx com: - E um componente funcional React Native - Mostra um header com saudacao baseada no horario - Uma FlatList de tarefas com pull-to-refresh - Cada item da lista mostra titulo, status badge e prioridade - Botao flutuante (FAB) no canto inferior direito para adicionar nova tarefa - Estilos com StyleSheet.create() e cores do tema"
Tela de detalhes
claude "Crie src/screens/TaskDetailScreen.tsx que: - Recebe o ID da tarefa via route.params - Mostra todos os campos da tarefa - Botoes para editar, excluir e marcar como concluida - Animacao de entrada com Animated API - Opcao de compartilhar via Share API do React Native"
Tela de formulario
claude "Crie src/screens/TaskFormScreen.tsx com: - Formulario com campos: titulo (TextInput), descricao (TextInput multi-line), prioridade (Picker ou botoes), data limite (DateTimePicker) - Validacao de campos antes de salvar - Suporte a criacao e edicao (recebe task opcional via params) - KeyboardAvoidingView para evitar que o teclado cubra campos"
Componentes nativos com Codex
Codex e excelente para gerar componentes React Native reutilizaveis com Expo agentes IA:
Componentes de UI com Codex
opencode "Crie src/components/TaskCard.tsx:
- Props: task (Task), onPress (() => void), onLongPress (() => void)
- Card estilizado com borderRadius, sombra (elevation no Android, shadow no iOS)
- Mostra titulo, status badge colorido, prioridade e data
- Badge de status com cores: pending (laranja), in_progress (azul), completed (verde)
- Animacao sutil de pressionar (opacity) via Pressable"
Componente de Empty State
opencode "Crie src/components/EmptyState.tsx: - Props: icon (string, nome do icon), title (string), subtitle (string, opcional) - Centralizado na tela com icone grande - Texto de titulo em negrito, subtitulo em cinza - Botao 'Criar Primeira Tarefa' opcional com onPress prop"
Hook de armazenamento local
opencode "Crie src/hooks/useStorage.ts:
- Hook generico que usa AsyncStorage do Expo
- Funcoes: getItem<T>(key: string) -> Promise<T | null>,
setItem<T>(key: string, value: T) -> Promise<void>,
removeItem(key: string) -> Promise<void>
- Tratamento de erros com try/catch
- Dica: use JSON.stringify/parse para objetos"
Navegacao com React Navigation
A navegacao e um dos pontos mais criticos em apps mobile. Claude Code configura o React Navigation de forma completa:
Configuracao de navegacao
claude "Crie src/navigation/AppNavigator.tsx com: - NavigationContainer como wrapper - BottomTabNavigator com 3 abas: Home, Tasks, Profile - StackNavigator aninhado na aba Tasks com: TaskListScreen, TaskDetailScreen, TaskFormScreen - Configuracao de tema: cores do tab bar, header styles, active/inactive tint - Typescript para os parametros de cada rota (RootStackParamList)"
Tipos de navegacao
opencode "Crie src/types/navigation.ts com os tipos TypeScript:
- RootStackParamList: Home, TaskDetail { taskId: string },
TaskForm { task?: Task }, Profile
- RootTabParamList: HomeTab, TasksTab, ProfileTab
- Use NativeStackScreenProps e BottomTabScreenProps do React Navigation"
Com a navegacao configurada por Claude Code e os tipos gerados por Codex, voce tem um app com navegacao type-safe e telas conectadas.
Exemplo pratico: App de tarefas completo
Vamos unir tudo em um app funcional de gerenciamento de tarefas.
Contexto de dados com Claude Code
claude "Crie src/services/TaskContext.tsx com: - React Context para gerenciar o estado global das tarefas - Provider que carrega dados do AsyncStorage na inicializacao - Funcoes: addTask, updateTask, deleteTask, toggleTaskStatus - Persistencia automatica no AsyncStorage a cada alteracao - Hook customizado useTasks() para acesso nos componentes"
Tela Home com Claude Code
claude "Crie src/screens/HomeScreen.tsx que usa o TaskContext: - Mostra resumo: total de tarefas, concluidas, pendentes - Lista das 5 tarefas mais recentes - Botao 'Ver Todas' que navega para a aba Tasks - Loading state enquanto carrega do AsyncStorage"
Build com EAS
claude "Configure o EAS Build para o projeto Expo. Crie eas.json com perfis: development, preview, production. Configure o Android build com keystore generada. Execute 'npx eas build --platform android --profile preview'."
Com Claude Code e Codex orquestrados, voce tem um app React Native Expo completo — telas, navegacao, estado global e persistencia — em horas, nao dias. Tudo rodando no Windows 11 com o Orquestra.
FAQ — Perguntas Frequentes
Preciso de um Mac para desenvolver React Native com Expo?
Nao. O Expo SDK 52+ permite desenvolver e testar apps iOS e Android diretamente do Windows usando o Expo Go no celular (iOS ou Android) ou emuladores Android. Para build final do iOS, voce ainda precisa de um Mac ou usar o EAS Build da Expo na nuvem.
Claude Code e Codex entendem a sintaxe do React Native?
Sim. Ambos os agentes conhecem os componentes nativos (View, Text, ScrollView, FlatList), as APIs do React Native (StyleSheet, Dimensions, Platform) e as diferencas para o React web. Basta especificar que o projeto usa React Native com Expo.
Da para usar agentes de IA para gerar telas complexas com navegacao?
Sim. Claude Code pode configurar React Navigation com Stack, Tab e Drawer navigators. Codex e excelente para gerar as telas individuais com os componentes corretos do React Native.
Agentes de IA conseguem lidar com permissoes nativas (Camera, GPS)?
Sim. Claude Code gera o codigo correto para solicitar permissoes, configurar o app.json com as permissoes necessarias no Expo, e lidar com os estados de autorizacao (granted, denied, undetermined).
O Orquestra funciona com emuladores Android no Windows?
Sim. O Orquestra roda lado a lado com o Android Studio e seus emuladores. Voce pode ter Claude Code gerando codigo em um terminal, o build do Expo em outro, e o emulador Android rodando em paralelo.
Comece a criar apps mobile com agentes hoje
React Native Expo agentes e a combinacao ideal para desenvolvimento mobile em 2026. Com Claude Code para estrutura e navegacao, Codex para componentes e tipos, e o Expo SDK para build, voce cria apps iOS e Android do Windows 11 com produtividade maxima.
O Orquestra potencializa esse workflow conectando Claude Code e Codex no mesmo canvas, com terminais lado a lado para o Expo dev server e os agentes.
Baixe o Orquestra para Windows 11 e comcece seu teste gratis de 7 dias.
Links internos recomendados
- TypeScript React com Agentes de IA — conceitos de React que se aplicam ao React Native
- APIs REST com Agentes de IA — crie o backend que seu app mobile vai consumir
- Testes Automatizados com Agentes de IA — teste seu app mobile com agentes
Links externos recomendados
- Expo Documentation — documentacao oficial do Expo SDK
- React Native Documentation — documentacao oficial do React Native
- React Navigation — documentacao da biblioteca de navegacao
Pronto para orquestrar seus agentes?
Baixe o Orquestra para Windows 11 e comece a coordenar seus agentes de IA em um canvas infinito. Gratis por 7 dias.