Utilizando caminhos absolutos para imports no React Native

Uma das principais dores que você provavelmente vai sentir ao iniciar um projeto com React Native são os caminhos dos imports. Nesse post vou ensinar duas formas de definir uma pasta como root do seu projeto para que então todos imports partam dessa raiz e você não precise mais utilizar caminhos relativos com vários ../../../

Babel Module Resolver

Utilizando o plugin module-resolver do Babel sua vida vai ficar bem mais fácil, principalmente se você utilizar o ESLint. Para configurar o plugin vamos começar instalando o plugin e adicionando-o às nossas configurações do babel no arquivo .babelrc

yarn add babel-plugin-module-resolver --dev 

// Utilize o npm install --save-dev se preferir

Agora no nosso arquivo .babelrc vamos adicionar as instruções para definir um novo root ao projeto com a propriedade plugins. Seu arquivo deve ficar assim:

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "cwd": "babelrc",
      "root": ["./src"],
      "extensions": [".js", ".ios.js", ".android.js"]
    }]
  ]
}

Estamos dizendo para o babel procurar por todos arquivos JS dentro da pasta src do nosso projeto na hora que importamos um novo módulo. Dessa forma, ao importar um módulo em qualquer lugar do código podemos definir o caminho a partir da pasta src :

// Arquivo: projeto/src/Componente.js

import Componente from 'Componente'

Lembre de reiniciar seu emulador depois de instalar o module-resolver, para que o React Native processe seu arquivo .babelrc novamente.

Configurando ESLint

Mesmo com esse plugin do babel instalado, o ESLint retornará erros pois ele não sabe dessa nova configuração. Para funcionar corretamente, vamos instalar dois módulos do ESLint, o eslint-plugin-import e o eslint-import-resolver-babel-module:

yarn add -D eslint-plugin-import eslint-import-resolver-babel-module

Agora em seu arquivo .eslintrc na propriedade de plugins (crie se não existir), adicione o plugin import:

"plugins": [
  "import"
]

E na propriedade settings vamos adicionar a referência ao módulo do babel:

"settings": {
  "import/resolver": {
    "node": {
      "paths": ["src"]
     },
    "babel-module": {}
  }
}

Seu arquivo .eslintrc vai ficar mais ou menos parecido com esse:

{
  "parser": "babel-eslint",
  "env": {
    "browser": true
  },
  "plugins": [
    "react-native",
    "jsx-a11y",
    "import"
  ],
  "extends": [
    "plugin:react-native/all"
  ],
  "rules": {},
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      },
      "babel-module": {}
    }
  }
}

Pronto, agora seu ESLint não vai mais reclamar dos módulos não encontrados na hora de criar os imports e você já pode ser feliz.

Conclusão

Então basicamente entre as duas formas, eu prefiro a segunda, acho mais escalável e como utilizo ESLint em todos meus projetos, fica difícil ir pela primeira opção. Mas se você está apenas criando um projeto simples para estudar sem ESLint, utilize a primeira opção, muito fácil e rápida de ser configurada.