Criando o primeiro app com expo router.

Para iniciarmos, vamos começar criando nosso projeto expo da forma badrão selecionando a a opção de black page como na imagem a baixo.

OBS: estou ultilizando a versão 1.2.1 do react-router no momento que o tutorial foi escrito.

Projeto criado vamos iniciar a configuração do nosso projeto, abra ele no seu editor de preferência e seu terminal. No terminal executar os seguintes comandos:

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

npx expo install react-native-web@~0.18.10 react-dom@18.2.0

Enquanto o pacote é instalado vamos criar um arquivo chamado index.js ou index.ts caso seu projeto seja em typescript e ao abrir o arquivo colar o seguinte código.

import "expo-router/entry";

Agora no seu package.json alterar o main dele e apontar pro arquivo criado a cima.

No app.json colocar o codigo a baixo.

{
  "expo": {
    "scheme": "myapp",

    "web": {
      "bundler": "metro"
    }
  }
}

Na documentação oficial é dito para adicionar o resolutions caso use o yarn ou overrides caso use o npm, como nem sempre uso um padrão eu adicionei ambos.

"resolutions": {
    "metro": "0.73.7",
    "metro-resolver": "0.73.7"
  },
  "overrides": {
    "metro": "0.73.7",
    "metro-resolver": "0.73.7"
  },

Agora o ultimo passo antes de executarmos nosso projeto é alterar o babal.config,js.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      // NOTE: `expo-router/babel` is a temporary extension to `babel-preset-expo`.
      require.resolve("expo-router/babel"),
    ],
  };
};

Para executarmos a primeira vez vamos ultilizar o npm para podermos limpar o cache e ter mais segurança na execução:

npx expo start --clear

Se apareceu essa tela quer dizer que a configuração foi um sucesso.

Nesse ponto observe as pastras do seu projeto antes e depois de clicar no botão que a tela do app está pedindo para tocar.

Note que o proprio expo criou uma pasta chamada app e dentro dela o arquivo index.js.

Agora basta editar seu app/index.js e criar seu app com esse novo pacote que promete executar as rotas de um app como se fosse na web.

Referências:

Doc