Imports absolus

Par défaut, React Native ne permet pas de faire des imports absolus depuis le projet lui-même.

On est obligé d'écrire des imports relatifs, par exemple :

import UnComposant from '../../../../components/un_composant'

Il est cependant possible d'ajouter cette fonctionnalité à un projet :)

Recette

Cette recette permet de déclarer un chemin, par exemple ~, comme répertoire racine (correspondant à ./src), et d'écrire des imports tels que :

import KivCard from '~/common/KivCard.react';

1. Installer le module babel-plugin-root-import (une dépendance en mode développement est suffisante) :

npm install -D babel-plugin-root-import

Note : Il existe d'autres modules qui offrent des fonctionnalités équivalentes.

1. Modifier le fichier babel.config.js (Babel est l'outil qui convertit le JSX en javascript standard)

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'babel-plugin-root-import',
      {
        rootPathPrefix: '~',
        rootPathSuffix: 'src'
      }
    ]
  ],
  env: {
    production: {
      plugins: [
        'babel-plugin-root-import',
        {
          rootPathPrefix: '~',
          rootPathSuffix: 'src'
        }
      ]
    }
  }
};

1. Pour que Visual Studio Code retrouve ses petits, ajouter un fichier jsconfig.json. Ce fichier est normalement utilisé par certains frameworks, comme Next.js, mais pas par React Native :

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  }
}

Note : en général, on utilise @ pour désigner la racine (par exemple, en Next.js) mais ici, le module babel-plugin-root-import se mélange les pinceaux avec les modules dont le nom commence par @, en particulier les modules liés à la navigation 🤡🤡🤡