Expo developer tools open black screen on the browser using Docker as Development Environment

Question

I'm trying to dockerize an Expo React Native app in order to have an Development Environment for reuse cases.

At the moment I make it possible to build the container.

http://prntscr.com/rezs9e

The problem is when i go to localhost:19002 trying to access to Expo developer tools it loads the tab image but the window content is a black screen.

http://prntscr.com/reztg5

I find this similar to issue, but his main problem was solved.

I cannot figure out what whats the problem.

Here is the code to reproduce this issue. https://github.com/joselrodrigues/docker-react-native

My Dockerfile

FROM node:12

EXPOSE 19000
EXPOSE 19001
EXPOSE 19002
EXPOSE 19006

WORKDIR /usr/src/app
COPY . .
WORKDIR /usr/src/app/ReactNative

#install latest yarn
RUN curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
#Add expo-cli globaly
RUN yarn global add expo-cli
#install all react-native dependencies
RUN yarn install
CMD yarn start

My docker-compose.yml

version: '3.7'
services: 
    reactnative:
        build: 
            context: ./
            dockerfile: docker/Dockerfile
        container_name: reactNative
        environment:
            - REACT_NATIVE_PACKAGER_HOSTNAME=0.0.0.0
            - EXPO_DEVTOOLS_LISTEN_ADDRESS=0.0.0.0
        ports:
            - "19000:19000"
            - "19001:19001"
            - "19002:19002"
            - "19006:19006"
        volumes: 
            - .:/usr/src/app
            - node_modules:/usr/src/app/ReactNative/node_modules
volumes: 
    node_modules:

Answer 1

I had a similar error with my http://localhost:19002/ starting at a black screen.

What helped was to update my expo cli with npm install -g expo-cli and then start again my project with npm start.

I updated to [email protected]. Hope this helps!