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:

Primeiro, comece instalando a seguinte dependência:

yarn add babel-plugin-module-resolver

ou

npm install babel-plugin-module-resolver

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:

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

primeiro comece colocando da seguinte forma:

plugins: [

],

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

'module-resolver'

plugins: [
  [
    'module-resolver'
  ]
],

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

plugins: [
  [
    'module-resolver',
    {

    }
  ]
],

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

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.
      }
    }
  ]
],

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/*"],


        }
    }
}

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.