Skip to content
This repository has been archived by the owner on Jul 23, 2022. It is now read-only.

React Native development environment for VS Code remote session and physical Android device.

License

Notifications You must be signed in to change notification settings

michalsvorc/docker-react-native

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native development environment Docker image

Dockerized React Native development environment for VS Code remote development and USB connected physical Android device. Works without Android Studio.

Features:

  • based on Ubuntu LTS
  • Android SDK version: see repository tags
  • Node.js version: v14 LTS

Start Docker container

Use docker.sh script in project directory.

  1. Build Docker image: execute ./docker.sh build.
  2. Run Docker image: execute ./docker.sh run.

Docker container is not removed after exiting the application. To start the container again, execute ./docker.sh start.

Setup VS Code

  1. Install VS Code extension Remote - Containers.
  2. Optional: Install VS Code extension React Native Tools.

Connect Android device

  1. Enable Developer mode and USB debugging option on your device.
  2. Plug your device into your computer.
  3. Select PTP or MTP connection on your device. PTP worked for me in most cases.
  4. In VS Code, run Attach to Running Container command.
  5. Run adb devices command in attached VS Code terminal and verify the output.
  6. If prompted on your device, authorize your computer to access the device.

Mount directories overview

  • workspace: share files between the host and containerized app

You can initialize new React Native applications inside the workspace directory to make them persistent on host machine.

Initialize new React Native application

  1. Connect your Android device as described above.
  2. Open attached VS Code terminal.
  3. cd $HOME/workspace for persistent code base.
  4. react-native init appName
  5. cd $HOME/workspace/appName && react-native start
  6. Open new remote terminal tab in attached VS Code.
  7. cd $HOME/workspace/appName && react-native run-android

Troubleshooting

Write access to mounted directories

Mount directories must be writable by group with id 1000. Execute these commands in project root directory:

chown -R $(id -u):1000 "${PWD}"/workspace
chmod -R g+w "${PWD}"/workspace

adb: no permissions (user in plugdev group; are your udev rules wrong?)

Try running adb kill-server command in container and reconnect the device

React Native white blank screen issue

Run react-native start in a separate terminal and then run react-native run-android. Source

About

React Native development environment for VS Code remote session and physical Android device.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published