React Native (TypeScript) + Expo project construction with Docker

Before

Describes the procedure for building a Docker container for a project configured with React Native + Expo on Mac OS X.

Information of each terminal

• PC

  • Mac OS Catalina Ver.10.15.6
  • docker version 19.03.12, build 48a66213fe
  • docker-compose version 1.26.2, build eefe0d31

• iPhone

  • iPhone XR
  • iOS:13.7

Terminals that have been verified with ExpoClient

• iPhone(iOS:13.7)

Premise

--docker, docker-compose installed

procedure

1. Create an Expo account

How to create an Expo account

2. Install and set up the Expo client app.

How to install and set up Expo client app on iPhone

3. Build a Docker environment

file organization

root
└── docker
    └── react_native
        └── dockerfile
└── docker-compose.yml
└── .env

docker/react_native/dockerfile

FROM node:14-alpine

WORKDIR /usr/src/app/

RUN apk update && apk add bash

RUN yarn global add expo-cli

docker-compose.yml

version: "3"
services:
  react_native:
    build: ./docker/react_native
    volumes:
      - ./react_native/:/usr/src/app
    env_file: .env
    command: yarn start
    ports:
      - "19000:19000"
      - "19001:19001"
      - "19002:19002"

.env

It is necessary to set the IP etc. of each terminal that uses Expo.

• ~~ADB_IP~~ --~~ Please specify the IP address of the verification terminal. It seems that you can specify multiple items separated by commas. ~~

• It turned out that this setting is unnecessary. (Added on 2020/11/11)

• REACT_NATIVE_PACKAGER_HOSTNAME --IP address of Docker container movable terminal

Example

REACT_NATIVE_PACKAGER_HOSTNAME=192.168.0.2

4. Build the Docker container

docker-compose build

5. Connect to the Docker container

docker-compose run --rm react_native bash --login

6. Create an expo project

expo init .

7. Select a project template to start setting up the project

I chose [blank (TypeScript)].

? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
  blank                 a minimal app as clean as an empty canvas
❯ blank (TypeScript)    same as blank but with TypeScript configuration
  tabs                  several example screens and tabs using react-navigation
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration

8. Exit the container when setup is complete

9. Start the Docker container

docker-compose up

10. Read the displayed QR code on the verification terminal

11. The Expo Client app starts on the verification terminal and the REACT screen is displayed.

12. If you update react_native / App.tsx ...

Update the file by adding ☺️ to the end of the display text written in the react_native / App.tsx file.

13. The updated content is automatically reflected on the verification terminal.

The ☺️ at the end is automatically reflected on the verification screen on the iPhone by hot reload.

reference

From creating React Native environment with Docker to checking the actual machine with Expo Client Create a React Native + Expo environment with WSL Run Expo / React Native on Docker