Path Mapping no React Native

Path Mapping? O que isso faz?

Path Mapping é uma ferramenta que permite mapear os módulos da nossa aplicação, criando alises (apelidos) para as pastas e arquivos do nosso projeto.

Assim, melhorando a legibilidade, facilitando as importações e trazendo escalabilidade para aplicação.E foi o Typecript que criou essa ferramenta muito bacana!

Imagina você ter que utilizar diversos ../ para descer ou subir os níveis do seu diretório para conseguir importar um arquivo? Isso se chama SlashPathHell.

import { useHook} from '../../../../hooks/useHook'

Por isso irei te mostrar como conseguimos utilizar o Path Mapping para corrigir esse problema no React Native, borá lá!

Instalando o plugin

Digamos que você já criou o seu aplicativo React Native, então vamos instalar o plugin:

babel-plugin-module-resolver

Esse plugin irá permitir criar nossa pasta raiz e os apelidos das nossas pastas/arquivos, além de gerar o bundle da aplicação. É só executar o comando:

npm install --save-dev babel-plugin-module-resolver

Configurando o plugin

Após a instalação do plugin, vamos adicionar o seguinte código no arquivo babel.config.js | .babelrc:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['module-resolver',
        {
          'root': ['./src'],
          alias: {
            '@screens': './src/screens',
          }
        }
      ],
    ]
  };
};

Adicionamos o plugin que acabamos de baixar, a nossa pasta root e no alias, todos os nossos apelidos que vamos utilizar e o seu caminho, repectivamente.

Configurando o Typescript

Agora só mais uma alteração, e estará prontinho para ser utilizado. Vamos inserir algumas configurações no arquivo tsconfig.json:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": "./",
    "paths": {
      "@screens/*": [
        "./src/screens/*"
      ],
  }
}

Nesse arquivos vamos adicionar nossa baseUrl e os path correspondentes a cada alias que criamos anteriormente.

Finalizando

Agora você pode utilizar o apelido que você criou, para realizar a importações dos arquivos:

import { Home } from '@screens/Home'

Além disso o Typescript aprensenta todos apelidos criados, facilitando ainda mais no desenvolvimento da aplicação.