🔨

新規のexpoプロジェクトからexpo routerを外す方法

2025/01/25に公開

経緯

ここ最近expoがnextjs路線に走り始め、ファイルベースルーターのexpo routerというのがリリースされた。そして、新規でのプロジェクトには問答無用でexpo routerをデフォルトで入っている状態になっている、新規で作った後にどうやって外すかの情報があまりなかったので、書いておくことにした。

できれば新規作成時にはexpo router使うかどうかを聞いてほしいとは思うが、ここ最近のeas hosting などの動きを見るとあまりそういうのは期待できなさそうな雰囲気

index.js作る

expoで新規プロジェクト作るとディレクトリ構成が以下のようになっているはず👇

.
├── README.md
├── app.json
├── assets
│   ├── fonts
│   └── images
├── eas.json
├── eslint.config.mjs
├── expo-env.d.ts
├── node_modules
├── package.json
├── scripts
│   └── reset-project.js
├── src
│   ├── app
│   │   ├── _layout.tsx
│   │   ├── index.tsx
├── tsconfig.json

srcの外側にindex.jsファイルを作成し、中身を以下👇のように書く。

index.js
import { registerRootComponent } from "expo";

import App from "./src/App";

registerRootComponent(App);

_layout.tsxを外側に持って来る

index.jsでsrc/Appを読み込むように書いているので、app/_layout.tsxファイルをApp.tsxに変更し、appの外側に持ってくる

そして、Slotとかは要らないので、中身を消しちゃっても良い

src/App.tsx
import {SafeAreaView, Text} from 'react-native';

export default function App() {
    return (
        <SafeAreaView>
            <Text>Hello World </Text>
        </SafeAreaView>
    )
}

package.jsonの編集

package.jsonにはmainフィルドが以下のように変更する

package.jsonjson
-  "main": "expo-router/entry",
+  "main": "index.js",

起動確認

Image from Gyazo

後書き

ファイルベースルーターには好き嫌いが分かれる点があるかもしれない。しかし、React Nativeを使ってクロスプラットフォームアプリを開発する際、Webのプラクティスを活用できることや、Webのコードベースからネイティブのコードを開発できるという大きなメリットがあるように思う。一方で、Webを作る予定のない純粋なネイティブアプリにおいては、ファイルベースルーターは適していないようにも感じる。そもそもファイルベースルーターのコンセプト自体が、HTTPサーバーや過去のPHPのようなWeb技術をベースにしていると考えられ、それをネイティブ環境で使用するのは少し違和感がある。

Discussion