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.
Top comments (0)