Primeiro app React Native com Expo e TypeScript

Seu primeiro app React Native pode nascer com um único comando e um componente View contendo um Text. Nesta lição, você cria um projeto Expo SDK 57 com TypeScript, troca a tela inicial por um cartão e confirma que o mesmo código é empacotado para Android, iOS e web.

O objetivo não é decorar uma estrutura inteira logo de saída. A gente vai identificar as poucas peças que realmente participam da primeira tela, mudar uma coisa por vez e observar um resultado. Para entender onde React Native se encaixa no ecossistema, mantenha aberto o guia de React Native.

Um set de filmagem entre seu código e o celular

Pense numa cena de filme. O roteiro diz que existe uma cadeira vermelha no centro, mas não fabrica a cadeira: a equipe traduz essa descrição para objetos reais no cenário. No React Native, seu componente é o roteiro, elementos como View e Text são instruções conhecidas pela equipe, e a plataforma monta as views nativas correspondentes na tela.

O nome técnico é renderização de componentes nativos. View representa um contêiner de layout; Text representa texto; Pressable representa uma área de interação. Eles não são tags HTML disfarçadas. No Android e no iOS, React Native conversa com a camada nativa; na web, o adaptador produz elementos próprios do navegador.

A analogia termina aqui: uma filmagem acontece uma vez, enquanto o React pode renderizar de novo quando propriedades ou estado mudam. Voltando ao comportamento técnico, você descreve como a interface deve parecer para os dados atuais, e o React reconcilia essa descrição com o que já está na tela.

Expo entra como a equipe de produção ao redor desse set: cria o projeto, escolhe pacotes compatíveis, inicia o Metro e oferece caminhos de build. Ele não muda o significado de um componente React Native. O guia de Expo separa essas ferramentas para você reconhecer se um problema nasceu na tela, no empacotamento ou na configuração do aplicativo.

Confira as ferramentas antes de criar o projeto

O Expo SDK 57 exige Node 22.13 ou superior. O projeto usado para verificar esta lição rodou com Node 24.16.0. Confirme a sua instalação:

node --version
npm --version

No ambiente de teste, a saída começou assim:

Se node não for reconhecido, pare e instale uma versão LTS atual. Esse erro não é do React Native: o terminal ainda não encontra o runtime que executará as ferramentas do projeto.

Crie uma base compatível com Expo SDK 57

Use o gerador oficial e fixe o template estável desta aula. Assim você não depende da versão escolhida por um prompt futuro:

npx create-expo-app@latest meu-primeiro-app --template default@sdk-57
cd meu-primeiro-app

O gerador instala Expo, React Native, React, TypeScript e Expo Router em versões compatíveis. Isso importa porque “última versão de cada pacote” não significa “combinação que funciona junta”. Em 22 de agosto de 2026, o SDK 57 usa React Native 0.86.2, embora o React Native independente já tenha uma versão mais nova.

O trecho final observado na criação foi:

Confira a matriz instalada sem alterar nada:

npx expo install --check
npx expo-doctor@latest

No projeto de prova, os resultados foram Dependencies are up to date e 21/21 checks passed. O primeiro comando compara dependências com o SDK; o segundo encontra configurações e pacotes incompatíveis. Uma instalação bem- sucedida não substitui essa conferência.

Encontre a porta de entrada sem se perder nas pastas

O template atual usa Expo Router. A tela inicial fica em src/app/index.tsx e o layout raiz em src/app/_layout.tsx. Todo arquivo dentro de src/app pode se tornar uma rota, portanto não coloque ali utilitários ou componentes comuns.

Deixe o layout mínimo:

import { Stack } from 'expo-router';

export default function RootLayout() {
  return <Stack />;
}

RootLayout é um componente: uma função que devolve elementos da interface. Stack organiza telas como uma pilha de navegação. Mesmo com uma única tela, ele fornece a moldura na qual outras rotas poderão entrar depois.

Agora substitua src/app/index.tsx:

import { StyleSheet, Text, View } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Meu primeiro app</Text>
      <Text style={styles.message}>A tela veio de um componente React.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
    backgroundColor: '#f4f7fb',
  },
  title: { color: '#102a43', fontSize: 28, fontWeight: '700' },
  message: { color: '#486581', fontSize: 16, marginTop: 8 },
});

O código entre parênteses é JSX: uma sintaxe que permite descrever a árvore da interface dentro de JavaScript ou TypeScript. style é uma prop, isto é, uma informação passada para o componente. styles.container é um objeto de estilo criado uma vez e referenciado durante a renderização.

Rode o servidor e escolha onde observar

Inicie o servidor de desenvolvimento:

npm start

Expo inicia o Metro, responsável por transformar módulos e servir o bundle. No terminal, pressione w para abrir a web, a para um Android configurado ou i para o simulador iOS no macOS. Um QR code também aparece para fluxos compatíveis com dispositivo físico.

Você deve ver duas linhas centralizadas: “Meu primeiro app” e “A tela veio de um componente React.” Essa é uma observação visual esperada; a prova automatizada desta aula foi o bundle das três plataformas:

npx expo export --platform all --output-dir dist-proof

O projeto verificado produziu bundles Android, iOS e web e listou a rota /:

Exportar não publica o aplicativo e não substitui um teste no aparelho. A saída prova que o grafo de módulos foi resolvido e empacotado para os três destinos.

Leia um erro real em vez de apagar a linha vermelha

Troque temporariamente Text por Texto sem criar esse componente:

-      <Text style={styles.title}>Meu primeiro app</Text>
+      <Texto style={styles.title}>Meu primeiro app</Texto>

Rode a checagem de tipos:

npx tsc --noEmit

O TypeScript informa que o nome não existe:

O termo técnico é identificador não resolvido: o arquivo tentou usar um nome que não foi declarado nem importado. Na comparação do set de filmagem, o roteiro pediu um objeto que a equipe não conhece. Tecnicamente, o compilador interrompe a verificação porque não consegue associar Texto a um valor JSX. Desfaça a mudança e rode o comando de novo; o terminal deve terminar limpo.

O que já é JavaScript, React e React Native

Vale separar as camadas. import, funções, objetos e const pertencem a JavaScript. A função que devolve JSX, as props e a atualização declarativa pertencem a React. View, Text, StyleSheet e os estilos aceitos pertencem a React Native. Expo reúne ferramentas, módulos e serviços ao redor desse app.

Essa separação evita uma confusão comum: Expo não é outra linguagem, e React Native não substitui JavaScript. Quando aparecer um erro, pergunte em qual camada ele nasceu. Um nome inexistente pode ser TypeScript; um componente sem retorno pode ser React; uma propriedade de estilo inválida pode ser React Native; um pacote incompatível pode ser Expo.

Microprática: transforme o cartão em algo seu

Faça uma mudança que possa ser conferida sem copiar outra tela. Acrescente uma terceira linha com a cidade em que você está e mude backgroundColor. Depois, salve o arquivo e observe o Fast Refresh atualizar a tela mantendo o servidor aberto.

Use este critério de pronto:

[ ] O projeto passa em npx tsc --noEmit
[ ] O título e a cidade aparecem na tela
[ ] A cor de fundo é diferente de #f4f7fb
[ ] npx expo export --platform web termina sem erro

Se os quatro itens forem verdadeiros, você já percorreu o ciclo essencial: criar, editar, renderizar, encontrar um erro e validar. Na próxima lição, a gente separa essa tela em peças reutilizáveis e entende componentes e estilos no React Native.