Try running React Navigation v5 demo app using Docker + Expo (For Mac)

Before

React Navigation for V5 Demo Application Docker + Expo The procedure for running on a mobile device (iOS or Android) using is posted.

If you are studying about React Navigation, please give it a try.

At the moment (2020/09/30), the operation check of the Android device has not been completed.

We are currently procuring an Android device and will verify it at a later date, but in theory, the Android device should work with the same procedure.

Each terminal information

• 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

Premise

--Expo account registered

The procedure for registering an account is described in the separate article "How to create an Expo account".

• PC

--docker, docker-compose installed --git installed

• mobile computer

--Expo Client installed

The installation procedure is described in another article "How to install and set up the Expo client app on iPhone".

procedure

1. Use the terminal to create and move the project folder.

   mkdir react_navigation_demo
   cd react_navigation_demo
   

2. Download the react-navigation repository on github with the clone command.

   git clone https://github.com/react-navigation/react-navigation.git
   

3. Create each configuration file for Docker and EXPO.

   touch dockerfile
   touch docker-compose.yml
   touch .env
   

4. Describe the settings in the docker file

   ```
   FROM node:14-alpine
   
   WORKDIR /usr/src/app/
   
   RUN apk update && apk add bash
   ```
   

5. Describe the settings in docker-compose.yml

   ```
   version: "3"
   services:
   react-navigation:
     build: ./
     volumes:
       - ./react-navigation/:/usr/src/app
     env_file: .env
     command: bash -c "cd example && yarn start"
     ports:
       - "19000:19000"
       - "19001:19001"
       - "19002:19002"
   ```
   

6. Describe the settings in .env

It is necessary to set the IP address of each terminal that uses Expo. - ADB_IP: Please specify the IP address of the mobile device. It seems that you can specify multiple items separated by commas. - REACT_NATIVE_PACKAGER_HOSTNAME:

Please specify the IP address of the PC terminal that starts Docker.

    ```
    ADB_IP=192.168.1.106, 192.168.1.107
    REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.204
    ```

1. Build the Docker environment

   docker-compose build
   

2. Setup on Docker container

3. Connect to the Docker container

   ```
   docker-compose run --rm react-navigation bash --login
   ```
   

4. Navigate to the example folder

   ```
   cd example
   ```
   

5. Set up with yarn

   ```
   yarn
   ```
   

6. Close the connection with the container

   ```
   exit
   ```
   

7. Start Docker

   docker-compose up
   

8. Read the QR code displayed on the terminal with your mobile device


1. The demo app will launch on your mobile device