DEV Community

Lacerda
Lacerda

Posted on

Path Mapping no React Native

Vou estar mostrando como deixar as importações no React Native de forma mais elegante, deixando-as mais dinâmicas.

Em vez de usarmos aquela importação de ../../components podemos usar @components

veja exemplos nas imagens abaixo:

Image description

Image description

Primeiro, comece instalando a seguinte dependência:

yarn add babel-plugin-module-resolver
Enter fullscreen mode Exit fullscreen mode

ou

npm install babel-plugin-module-resolver
Enter fullscreen mode Exit fullscreen mode

Depois, procure na raiz do seu projeto o seguinte arquivo:

babel.config.js

Nele iremos fazer algumas configurações que será o path personalizado que iremos utilizar.

Dentro desse arquivo deve existir alguma configuração com presets.

Exemplo:

Image description

Coloque uma vírgula depois dessa configuração, pois iremos fazer a nossa.

primeiro comece colocando da seguinte forma:

plugins: [ ],
Enter fullscreen mode Exit fullscreen mode

Dentro dos colchetes abre outro e coloque entre aspas o seguinte:

'module-resolver'

plugins: [ [ 'module-resolver' ] ],
Enter fullscreen mode Exit fullscreen mode

Agora coloque uma vírgula depois de module-resolver e abra chaves, pois vamos fazer o mapeamento dos caminhos.

plugins: [ [ 'module-resolver', { } ] ],
Enter fullscreen mode Exit fullscreen mode

Dentro de chaves colocamos o seguinte atributo para apontar para a pasta principal dos nosso arquivos, normalmente criamos uma pasta chamada de src e vamos estruturando nosso projeto ali.

plugins: [ [ 'module-resolver', { root: ['./src'], // pasta raiz dos nossos arquivos } ] ],
Enter fullscreen mode Exit fullscreen mode

Vamos dizer como deve ser o alias dessas pastas que estão dentro de src.

plugins: [ [ 'module-resolver', { root: ['./src'], // pasta raiz dos nossos arquivos alias: { '@components': './src/components' // o primeiro atributo diz como vai ser o alias (apeliado) // o segundo atributo é o caminho daquela pasta. // você pode fazer com outras pastas, exemplo: // assets, screens, styles. } } ] ],
Enter fullscreen mode Exit fullscreen mode

Typescript

se você estiver usando typescript, mais um passo deve ser realizado para ele entender a nossa configuração.

no arquivo tsconfig.json, vamos fazer umas configurações também.

{ "extends": "expo/tsconfig.base", "compilerOptions": { "strict": true, "baseUrl": "./", "paths": { "@components/*": ["./src/components/*"], } } }
Enter fullscreen mode Exit fullscreen mode

Agora você já pode iniciar a sua aplicação e testar a nova forma de importação.

Lembre, sempre que fazer um mapeamento de uma nova importação, é preciso primeiro, fazer no babel.config.js e se estiver usando typescript, também é necessário colocar no arquivo tsconfig.json. Depois é só iniciar a aplicação, se algo der errado, limpe o cache da aplicação e teste novamente.

Top comments (0)