ReactNativeでファイルを../無しで呼ぶ方法

背景

ReactNativeでスマホのアプリを作っていると、ファイルの階層が深くなった際に別のファイルを「../../assets/images/logo.png」など「../」を多用して呼び出す場合があります。

プラグインを利用したら../無しで呼べたので、備忘録として方法を記事に残します。

環境

react-native 0.64.1

babel-plugin-module-resolverを利用

上記プラグインでパスのエイリアスを定義できるため、../を使わなくてもファイルを呼べるようになります。

プロジェクトにインストールします。

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

babel.config.jsを下記のように定義すると、 assets/ ディレクトリを../無しで呼べるようになります。

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          'assets': './assets',
        },
      },
    ],
  ],
};

TypeScriptを利用している場合は、tsconfig.jsを下記のように変更するとエディタの静的解析に反映されます。

{
  "compilerOptions": {

    // 以下を追加
    "baseUrl": ".",
    "paths": {
      "assets/*": [
        "./assets/*"
      ]
    },
    // 以上を追加

  }
}

上記の変更により、../連続で読んでいた記述をassets/から始められます。

// before
// const img = require('../../assets/images/logo.png')

// after
const img = require('assets/images/logo.png')

設定の適用直後は--reset-cacheオプションを利用したreact-nativeの起動が必要です。

yarn start --reset-cache

まとめ

babel-plugin-module-resolverを利用したエイリアスの定義により、../を利用せずファイルを呼び出せました。
これをすべての場合に当てはめなくても良いとは思いますが、階層が深くなったファイルから共有ファイルを呼ぶ際などに利用することで、../が無い読みやすいコードになると思います。

参考

babel-plugin-module-resolver
Alias in React Native