Navegação em Aplicativos React Native com Expo Router

A navegação em aplicativos móveis e web é um aspecto fundamental para proporcionar uma experiência de usuário suave e intuitiva. Tradicionalmente, gerenciar a navegação em projetos React Native exigia uma abordagem mais manual e, muitas vezes, complexa. No entanto, com a introdução do Expo Router, esse cenário está mudando, trazendo uma nova era de simplicidade e eficiência para desenvolvedores de aplicativos universais.

O Que é Expo Router?

O Expo Router é um sistema de roteamento baseado em arquivos, projetado para aplicações React Native e web. Inspirado pelos melhores conceitos de roteamento de sistemas de arquivos do desenvolvimento web moderno, o Expo Router facilita a implementação de uma navegação eficaz e intuitiva em aplicativos, permitindo que eles funcionem perfeitamente em todas as plataformas — Android, iOS e web — com mínima configuração.

A Simplicidade por Trás do Expo Router

A filosofia do Expo Router é baseada na simplicidade. Adicionar uma nova tela ao seu aplicativo é tão fácil quanto criar um novo arquivo no diretório apropriado. Esse arquivo então se torna automaticamente uma rota acessível no seu aplicativo, eliminando a necessidade de definir explicitamente as rotas em um arquivo de configuração centralizado.

Vantagens do Uso do Expo Router

Universalidade

O Expo Router foi criado com a universalidade em mente. Ele permite que os desenvolvedores criem aplicativos que ofereçam uma experiência de usuário consistente em todas as plataformas, utilizando os mesmos componentes React Native e web. Isso não apenas melhora a eficiência do desenvolvimento, mas também garante que os aplicativos mantenham uma aparência e funcionamento uniformes, independentemente do dispositivo.

Facilidade de Uso

Graças à sua abordagem baseada em arquivos, o Expo Router simplifica significativamente o processo de adição e gerenciamento de rotas em um aplicativo. Essa facilidade de uso permite que desenvolvedores concentrem mais tempo e recursos no aprimoramento da experiência do usuário, em vez de lidar com a complexidade da configuração de navegação.

Flexibilidade

Embora o Expo Router promova uma abordagem convencional para a criação de rotas, ele também oferece a flexibilidade necessária para atender a casos de uso mais complexos. Isso inclui suporte para rotas dinâmicas, permitindo que os desenvolvedores implementem funcionalidades avançadas de navegação de forma intuitiva e eficiente.

Convenção de Roteamento com Expo Router

O Expo Router introduz uma abordagem revolucionária para o roteamento em aplicações React Native, utilizando uma convenção de roteamento baseada em arquivos. Essa abordagem simplifica significativamente o processo de adicionar novas rotas e páginas ao seu aplicativo, tornando-a uma ferramenta indispensável para desenvolvedores modernos.

Com o Expo Router, cada arquivo criado no diretório app automaticamente se torna uma rota na aplicação. Por exemplo, os seguintes arquivos resultarão nas rotas correspondentes:

app
├── index.js         -> corresponde a '/'
├── home.js          -> corresponde a '/home'
├── [user].js        -> corresponde a caminhos dinâmicos
├── settings
│   └── index.js     -> corresponde a '/settings'

Páginas com Expo Router

As páginas são definidas exportando um componente React como o valor padrão de um arquivo no diretório app. Os arquivos devem usar uma das extensões .js, .jsx, .tsx, .ts.

Por exemplo, crie o diretório app no seu projeto e, em seguida, crie um arquivo index.js dentro dele. Adicione o seguinte trecho:

import { Text } from 'react-native';

export default function Page() {
  return <Text>Página inicial</Text>;
}

O exemplo acima corresponde à rota / no aplicativo e no navegador. Arquivos nomeados index correspondem ao diretório pai e não adicionam um segmento de caminho. Por exemplo, app/settings/index.js corresponde a /settings no aplicativo.

Rotas Dinâmicas com Expo Router

Rotas dinâmicas correspondem a qualquer caminho não correspondido em um determinado nível de segmento.

Rotas com maior especificidade serão correspondidas antes de uma rota dinâmica. Por exemplo, /blog/roxo corresponderá a blog/roxo.js antes de blog/[id].js.

Vários slugs podem ser correspondidos em uma única rota usando a sintaxe de rest (...). Por exemplo, app/blog/[...id].js corresponde a /blog/123/settings.

Segmentos dinâmicos são acessíveis como parâmetros de pesquisa no componente da página.

import { useLocalSearchParams } from 'expo-router';
import { Text } from 'react-native';

export default function Page() {
  const { slug } = useLocalSearchParams();

  return <Text>Post do blog: {slug}</Text>;
}

Adotando o Expo Router, desenvolvedores podem aproveitar ao máximo a conveniência e eficiência do roteamento baseado em arquivos, agilizando o desenvolvimento de aplicativos React Native e web com uma experiência de usuário coesa e integrada.

Vem ver na prática  com Rodrigo Gonçalves a customização de um Drawer Navigation com Expo Router: