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.

Apr 20, 2025 - 22:19

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

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.