Saat Kita mengembangkan aplikasi React Native yang kompleks, struktur direktori Anda bisa menjadi sangat besar. Hal ini dapat membuat pengelolaan file dan impor modul menjadi sulit dan memakan waktu. Salah satu cara untuk mengatasi masalah ini adalah dengan menggunakan Path Alias Import atau Module Resolver. Fitur ini memungkinkan Kita untuk membuat alias untuk direktori dan modul tertentu, membuat kode Anda lebih mudah dibaca dan dikelola. Artikel ini akan membahas cara membuat Path Alias Import pada proyek React Native Kita.

Mengapa Kita Membutuhkan Path Alias Import?

Sebelum kita membahas cara melakukannya, mari kita lihat mengapa Kita perlu menggunakan Path Alias Import:

1. Memperpendek Jalur Impor: Aliasing memungkinkan Kita mengganti jalur panjang ke modul atau direktori dengan alias yang lebih pendek. Misalnya, Kita dapat mengganti import MyComponent from '../../../components/MyComponent' dengan import MyComponent from '@components/MyComponent'.
2. Meningkatkan Keterbacaan Kode: Aliasing mempermudah pembacaan kode. Aliases yang jelas dapat memberi petunjuk tentang sumber kode yang Kita impor.
3. Meminimalkan Kesalahan: Aliasing dapat membantu menghindari kesalahan penulisan jalur yang sering terjadi. Ini mengurangi risiko kesalahan saat mengimpor modul.

Mengkonfigurasi Path Alias Import

Untuk mengatur Path Alias Import pada proyek React Native Kita, Kita perlu melakukan beberapa langkah berikut:

Install babel resolver

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

Lalu Kita update file babel.config.js  dengan mencocokkan folder yang akan kita daftarkan ssebagai alias pathnya:

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    '@babel/preset-typescript',
  ],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          tests: ['./__tests__/'],
          '@/components': './src/components',
          '@/screens': './src/screens',
          '@/navigation': './src/navigation',
          '@/config': './src/config',
            .........
        },
      },
    ],
    'react-native-reanimated/plugin',
  ],
};

Update Juga tsconfig.json 

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "jsx": "react",
    "baseUrl": "./src",
    "paths": {
      "@trackingApp/components": ["../../packages/themed/src"],
      "@/*": ["*"],
      "@/utils": ["./src/utils/*"],
      "@/components": ["./src/components/*"]
    }
    // ...
  }
}

Kadang kita harus Reset Cache jika terjadi kendaa saat running. Jalankan perintah berikut:

cd android && ./gradlew clean
cd ..

Jalankan kembali project:

npx react-native run android