Hot reloading not working in React Native using Docker

Question

I'm trying to get started with React Native on my Windows 10 machine using Docker containers. I get an app running, I connect to it via LAN, but when I change the code, it doesn't change on my device, even if I shake and press Reload.

I'm using the Expo client on my Android phone to open the app. The app is the basic multiple page template offered by expo init. As it suggests, I edited screens/HomeScreen.js, but the app didn't change. I have Live Reloading and Hot Reloading enabled. Pressing Reload reloads the app, but it stays the same. When I cat the file inside the container, it is changed, it just so happens that the bundler doesn not pick up the changes.

I have the following folder structure:

.
├── dev
│   ├── MyProject1
│   └── Dockerfile
└── docker-compose.yml

docker-compose.yml:

version: '3'

services:

  app:
    build: ./dev
    volumes:
      - ./dev:/code
    environment:
      - REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.19
    working_dir: /code/MyProject1
    command: expo start
    ports:
      - "19000:19000"
      - "19001:19001"
      - "19002:19002"

Dockerfile:

FROM node:11.5.0-alpine

RUN apk add bash

RUN mkdir /code
WORKDIR /code
RUN npm install -g expo-cli

The MyProject1 folder contains the app itself.

Answer 1

A bit late, but maybe it helps someone.

I had the same issue and solved it by using 'chokidar' https://www.npmjs.com/package/chokidar .

After installing chokidar you would have to change this in your docker-compose.yml file: command: CHOKIDAR_USEPOLLING=true expo start

Note: I tried this on a Windows 10 machine but it didn't live reload. However, doing this on a Ubuntu machine worked as intended.