React Native Expo para iniciantes: primeiro app 2026
começar seu primeiro aplicativo com React Native e Expo. Um guia detalhado e simples para quem nunca encostou na tecnologia — pronto para rodar no seu celular, Android
Por que isso é importante
React Native Expo para iniciantes em 2026: instale Node LTS + Expo Go no celular, rode npx create-expo-app (TypeScript), abra com QR no Expo Go e aprenda layout com View/Text + Flexbox. Fast Refresh mostra mudanças ao vivo. Quando precisar de módulo nativo fora do Go, migre para dev client/EAS — não no day-one.
O que você precisa saber antes do create-expo-app
Para iniciantes em React Native Expo, você só precisa de três coisas para começar: Expo Go no seu celular, Node.js no seu computador e um editor de código (qualquer um). Com isso, você já consegue criar e rodar apps, sem precisar configurar nada complicado. Mas há segredos importantes sobre ambiente e fluxo de trabalho que transformam um iniciante em alguém que verdadeiramente entende de mobile com React Native. Vamos destrinchar cada um.
Atenção
Não tente instalar Android Studio ou Xcode agora se está começando. Use o Expo para evitar o caos de configurações — isso reduz 90% da frustração inicial. E sim, pode usar seu próprio celular para rodar tudo.
Instalar Node LTS e o ambiente Expo
Três peças bastam para o primeiro run — sem Android Studio ou Xcode agora.
Dica técnica
Seu computador e seu celular precisam estar na MESMA rede Wi-Fi para que o Expo Go encontre seu app. Rode npx expo start no terminal e escaneie o QR Code no Expo Go para começar.
create-expo-app: primeiro projeto (TypeScript)
O Expo permite criar aplicações com o comando npx create-expo-app MyFirstApp . Em segundos, o projeto já está com tudo instalado e pronto para abrir no código. Entre na pasta do projeto, abra no editor que preferir e sinta: agora você possui as bases de um verdadeiro app pronto para rodar.
Atenção
É tentador sair mudando pastas sem entender. Estude a estrutura inicial: o arquivo package.json gerencia dependências e scripts do seu app. Familiarize-se antes de avançar.
Rodar no Expo Go: QR code Android/iOS
Rodar seu app é simples: npx expo start . O Expo abre um painel web com QR Code. Escaneou no Expo Go? O app já aparece na tela do celular, refletindo toda mudança no código em tempo real. Se precisa usar emuladores, eles também são suportados — mas o método físico é sempre mais direto para quem está começando.
Atenção
Lembre-se: Fast Refresh é seu novo superpoder. Faça qualquer alteração, salve, e seu app atualiza instantaneamente sem reinstalar — isso te dá eficiência máxima no aprendizado e nos ajustes.
Expo Go vs dev client / EAS: quando o nativo quebra
Expo Go cobre o happy path (JS + libs do ecossistema Expo). Quando você precisa de módulo nativo custom, config plugin fora do Go, ou build de loja, suba um development build (dev client) e use EAS Build para binários.
Fast Refresh: feedback ao vivo no device
O Fast Refresh do Expo recarrega sua aplicação automaticamente toda vez que você salva o arquivo. Isso elimina aquele tempo perdido recarregando manualmente ou esperando builds demorados como em apps nativos tradicionais.
Produtividade máxima
Caso precise desligar ou ligar o Fast Refresh, use o Dev Menu (chacoalhe seu device, ou pressione M no terminal/seu emulador). Experimente editar o texto para ver as mudanças ao vivo.
Limpar o template: app enxuto para aprender
Expo oferece scripts para resetar o projeto e começar com um app totalmente zerado. Use npm run resetProject dentro da pasta para apagar exemplos e criar sua estrutura do jeito que imaginar. Assim, nada de código inútil te atrapalha.
Atenção ao resetar
Antes de rodar resetProject, salve qualquer alteração importante. O script move exemplos, mas limpezas erradas podem gerar confusão para quem está no início.
Estrutura de pastas (e por que importa)
Entenda bem a pasta app/ — é onde ficam as rotas, telas e navegação. Já o package.json cuida dos scripts e dependências. O projeto já traz exemplos prontos, mas para praticar, troque textos e adicione arquivos para compreender a hierarquia do React Native.
Expo Router + TypeScript: caminho padrão 2026
Em 2026 o caminho oficial feliz é template TypeScript com Expo Router (file-based), não stack manual de React Navigation no day-one. O Router usa a pasta app/ como mapa de rotas.
Árvore mínima mental: app/_layout.tsx (shell, providers, Stack/Tabs); app/index.tsx (rota /); app/about.tsx (rota /about); pastas = segmentos. Tabs ficam em app/(tabs)/_layout.tsx + telas irmãs. TypeScript já vem no template — tipar params com o helper do Router quando a tela crescer.
Editar texto e ver atualizar ao vivo
Edite uma string no seu componente principal: altere para “Welcome to Expo” e salve. Em segundos, veja o app refletir seu texto na tela do celular. Esse ciclo de edição e atualização é o que diferencia o desenvolvimento mobile moderno do antigo.
View e Text: base do layout mobile
Pense na View como o “div” da web: ela agrupa outros componentes e define caixas. O Text lida com textos exibidos na tela. Toda construção começa com eles — e estilizar usando a propriedade style é o próximo passo lógico para deixar o app com sua cara.
Dica para webdevs
A transição Web → Mobile é fácil aqui: contextos como props e herança mudam pouco. O Flexbox é seu velho conhecido, com nomes e funções idênticos.
Estilo: cor, fonte, espaçamento
Stylize componentes em React Native usando objetos. backgroundColor define cor de fundo, color a cor do texto, e fontSize altera o tamanho das letras. Modifique um por vez, salve e observe a live-update. O layout se expande ou contrai conforme o conteúdo.
Flexbox no React Native: eixo e wrap
O Flexbox (essencial para iniciantes) organiza seu layout controlando espaço e alinhamento. Propriedades como flex , justifyContent e alignItems são centrais. Por padrão, o eixo principal é vertical (coluna). Use flexDirection: 'row' para horizontalizar. É intuitivo: defina flex: 1 em múltiplos componentes e eles dividem igualmente o espaço.
Evite Confusão
O maior erro de quem começa: achar que justifyContent: 'center' sempre centraliza na vertical. Na verdade, depende do eixo criado pelo flexDirection . Sempre confira seu eixo principal!
justifyContent e alignItems na prática
justifyContent centraliza ao longo do eixo principal (vertical por padrão). alignItems centraliza no eixo secundário (horizontal, quando padrão é coluna). Invertendo flexDirection , muda-se o comportamento. Entenda essa lógica e você nunca mais terá problemas com layouts desalinhados.
StyleSheet: organizar estilo sem bagunça
Use StyleSheet.create para construir objetos de estilo organizados e reaproveitáveis. Crie blocos de CSS dentro do JS e aplique em componentes via . Isso amplia clareza, manutenção e consistência do seu app.
Boas Práticas
Separe estilos por tela, evite códigos inline extensos. Padronize e documente — apps profissionais são legíveis desde o início.
Próximo passo: além do hello world
Repita pequenas mudanças, brinque com layouts e estilizações. O segredo do domínio em React Native e Expo está na prática constante. E se quiser mergulhar fundo, assista ao canal Dev Doido no YouTube — conteúdo prático, projetos reais e dicas de quem vive mobile todo dia.
Próximo Nível
Aprenda mais sobre navegação, integração com APIs, hooks e publicação nas lojas. Este artigo é só o começo — siga evoluindo e transforme ideias em apps.
Fontes
Revisão em agosto de 2026. Fluxo create-expo-app / Expo Go segue a documentação oficial; taxa Apple Developer Program (US$99/ano) deve ser confirmada na página da Apple.
<a href="https://docs.expo.dev/">Documentação Expo</a>. <a href="https://reactnative.dev/docs/getting-started">React Native Getting Started</a>. <a href="https://developer.apple.com/support/enrollment/">Apple Developer Program — Enrollment</a>.
Perguntas frequentes
Como começar com React Native e Expo em 2026?
Instale Node LTS, rode create-expo-app, abra no Expo Go e construa uma tela com Flexbox. Domine navegação e listas antes de libs extras.
Expo ainda vale para iniciantes?
Sim: setup rápido, Fast Refresh e boa DX. Use dev client/EAS quando precisar de módulo nativo fora do que o Expo Go cobre.
Consigo publicar na App Store com Expo?
Sim via EAS Build/Submit. A conta Apple Developer (US$99/ano) continua obrigatória para distribuição iOS.
React Native ou Flutter se eu já sei JavaScript?
Com JS/TS, React Native + Expo encurta o caminho. Flutter brilha se o time já é Dart ou precisa de UI muito custom.