Expo (React Native) のエントリポイントになるファイル App.js を変更する

便利な Expo

React Native を簡単に使うことができる Expo、便利ですよね。
Expo CLI をインストールして、 初期設定コマンドを実行するだけで、Android と iOS の両方に対応した React Native アプリの雛形を生成してくれます。

$ npm install expo-cli -g
$ expo init sandbox-expo

このあといくつかの質問に答えて、

$ cd sandbox-expo
$ yarn start # or `npm start`

これだけでアプリの開発環境が立ち上がります。実機でもシミュレーターでもOK。

ファイルの命名規則が..

expo init で作られるプロジェクト雛形を見てみると次のような感じ。

$ tree . -I node_modules
.
├── App.js
├── app.json
├── assets
│   ├── icon.png
│   └── splash.png
├── babel.config.js
├── package.json
└── yarn.lock

1 directory, 7 files

エントリポイントのファイル名が App.js で決め打ちになっているのが困る人もいそうで、別のパスに変えたいことはよくあるのではないでしょうか。ファイル名を case-sensitive にしたい・したくないなど、色々ありそうです。

エントリポイントがどのように指定されているかを確認する

Expo の雛形がどのようにしてエントリポイントを指定しているのかを確認してみます。

まずは package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

main フィールドとして、 node_modules 以下のファイルが指定されています。

そして node_modules/expo/appEntry.js:

import { KeepAwake, registerRootComponent } from 'expo';
import App from '../../App';

if (__DEV__) {
  KeepAwake.activate();
}

registerRootComponent(App);

node_modules 以下にインストールされている expo/appEntry.js は、依存関係がピュアな若干行の JavaScript であることが分かりました。 registerRootComponent 関数 を呼ぶことでエントリポイントを作成できそうです。

エントリポイントをカスタマイズ

上記のことから、 expo/appEntry.js 相応のエントリポイントを作成すれば、 App.js のパスを変更できることが分かりました。カスタマイズを行ってみます。

$ cat ./package.json
{
  ...
  "main": "main.js",
  ...
}

$ tree . -I node_modules
.
├── app.json
├── assets
│   ├── icon.png
│   └── splash.png
├── babel.config.js
├── main.js
├── package.json
├── src
│   └── app.js
└── yarn.lock

2 directories, 8 files

// main.js
import { KeepAwake, registerRootComponent } from 'expo';
import App from './src/app';

if (__DEV__) {
  KeepAwake.activate();
}

registerRootComponent(App);

例えば、上記のように main.js を作成し、 App.js を src/app.js に書き換えて、 package.json の main フィールドを書き換えると、エントリポイントをカスタマイズすることができます。