Navegação com Expo Router - Crie Seu Projeto de Navegação do Zero!

Neste tutorial, vamos configurar o sistema de navegação do Expo Router, que utiliza uma abordagem baseada no sistema de arquivos similar ao Next.js. A estrutura de diretórios que criamos define automaticamente as rotas da aplicação.

Pré-requisitos

Para começar, precisamos instalar as dependências necessárias:

Configuração Básica

Primeiro, alteramos o ponto de entrada no package.json para um arquivo index.js. Em seguida, configuramos o esquema (scheme) no app.json, que funciona como um identificador único para deep links.

Adicionamos também o plugin do Expo Router na configuração e, para SDK 48, é necessário especificar a versão do Metro no package.json.

Estrutura de Pastas

Criamos um diretório 'app' na raiz do projeto, onde:

• Um arquivo index.tsx se torna a rota principal (/)
• Subpastas criam rotas aninhadas (ex: app/user/index.tsx vira /user)

Cada arquivo exporta um componente React que renderiza o conteúdo da página.

Primeira Página

Criamos uma página inicial simples com um texto centralizado. O Expo Router automaticamente detecta as mudanças e atualiza o aplicativo em tempo real.

Próximos Passos

Nas próximas aulas, exploraremos navegação entre telas, rotas dinâmicas e configurações mais avançadas do sistema de roteamento. Esta configuração inicial permite começar a desenvolver com uma estrutura de navegação robusta e intuitiva, similar à experiência web mas adaptada para aplicativos móveis.