This article summarizes how to configure TypeScript using ExpoCLI with ReactNative.

How to Create an Expo Project

As of now (2024/10/7), it seems that ExpoCLI does not support Node 17+, so I initially considered using Node 16 to set up the environment. However, due to the errors mentioned below, I’ll be setting up the environment with Node.js 20.

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.

Directory Structure

/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 # Add any required development tools here
WORKDIR /app

Commands

expo -V
npx create-expo-app@latest

When prompted with "Wat is your app named?", respond with:

.

to install in the current directory.

Execution result:

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!

Even though an error occurred, I proceeded with the following command:

npm i

This time, it worked. Why, I have no idea.

By the way, TypeScript is automatically installed by default.

Error Occurred with Node 16

Initially, I tried using Node 16 after seeing that the version was unsupported. However, I encountered the following error, so I switched to Node.js 20 and it worked smoothly.

npm run web

Resulted in:

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.

This error occurred, so I switched to Node.js 20, rebuilt the project, and it displayed without issues.

Commands to Start the Local Server

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

It appears that the current method is to use npx expo instead of expo. Be cautious when following older articles that still use the expo command.

Learning ReactNative with Expo

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

This Udemy course is well-updated and seems to work in the current environment.

It's a course aimed at beginners, so even if you’re new to programming, you can follow along with the videos to build a native app with ReactNative.

For those with programming experience, you can start from the Expo environment setup section.

It's amazing that such a great course can be bought on sale for 2,000 yen. If you can dedicate time to learning, you’ll definitely make it. I learned with this course as well.