DEV Community

Renato Rebouças
Renato Rebouças

Posted on • Updated on

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.

terminal

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


Enter fullscreen mode Exit fullscreen mode


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


Enter fullscreen mode Exit fullscreen mode

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";


Enter fullscreen mode Exit fullscreen mode

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"
    }
  }
}


Enter fullscreen mode Exit fullscreen mode

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"
  },


Enter fullscreen mode Exit fullscreen mode

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"),
    ],
  };
};


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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

Tela de 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.

Arquivos antes

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

Arquivos depois

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

Top comments (0)