ReactNative の ExpoCLI で TypeScript を使う設定方法についてまとめました。

Expo プロジェクトの作成方法

今現在（2024/10/7)、ExpoCLI が node17+に対応していないようなので、node16 で環境を作ろうと思ったのですが、後述するエラーが発生したため node.js20 で環境を作ります。

expo -V WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.

ディレクトリ構成

/my-react-native-app
├── docker
│ └── Dockerfile
├── src
└── docker-compose.yml

docker-compose.yml

version: "3.7"
services:
  app:
    build:
      context: .
      dockerfile: ./docker/Dockerfile
    container_name: react-native
    ports:
      - "8084:8081"
    volumes:
      - ./src:/app
    stdin_open: true
    tty: true
    environment:
      - NODE_ENV=development

docker/Dockerfile

FROM node:20
RUN npm install -g expo-cli
RUN apt-get update #必要になった開発ツールを追記
WORKDIR /app

コマンド

expo -V
npx create-expo-app@latest

Wat is your app named?と出るので、

.

と現在のディレクトリにインストールするようにします。

実行結果

npx create-expo-app@latest
✔ What is your app named? … .
✔ Downloaded and extracted project files.
npm install
npm ERR! code FETCH_ERROR
npm ERR! errno FETCH_ERROR
npm ERR! invalid json response body at https://registry.npmjs.org/react-native-reanimated reason: Invalid response body while trying to fetch https://registry.npmjs.org/react-native-reanimated: aborted
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2024-10-06T23_50_31_902Z-debug-0.log
Something went wrong installing JavaScript dependencies. Check your npm logs. Continuing to create the app.
Error: npm install exited with non-zero code: 1
✅ Your project is ready!

エラーが出たのですが、構わずコマンドを打ってみます。

npm i

今度は通りました。なぜだ。

ちなみにデフォルトで勝手に TypeScript が入ります。

node16 で発生したエラー

最初バージョンがサポートされていないと出たので 16 でやってみましたが、

以下のようにエラーがでたため Node.js20 にしたらうまく行きました。

npm run web

を打ったところ、

expo start --web Starting project at /app Starting Metro Bundler Error: Node.js version 16 is not supported. Please upgrade to Node.js 20 or newer.

とエラーが出たしまったので、試しに Node.js20 に変更してビルドし直したら問題なく表示されました。

ローカルサーバーを立てるコマンド

npx expo start
npx expo start --ios
npx expo start --android
npm expo start --web

現在は、expo コマンドではなく、npx expo コマンドを使うみたいです。

昔から書かれた記事は、expo コマンドなはずなので注意が必要だと思います。

ReactNative Expo を学習するなら

React Native, Firebase, Expo でアプリ開発をゼロから始めよう！

こちらの Udemy の教材はしっかりとアップデートされており、現在の環境で学べるようです。

プログラミングが初めての人向けの教材ですので、初心者でも動画と一緒に進めれば ReactNative でネイティブアプリを作れます。

また、プログラミング経験者の人は Expo の環境構築のところからやれば良いと思います。

こんな良い教材がセールで 2000 円で買えてしまうのだから、ありがたいです。

時間使って頑張れさえできればきっとできると思います。自分もこれで学んだので。