Dockerized React Native

This repository aims to establish a reliable Android build environment for QA and sanity checks in React Native apps. It's designed for parallel iOS development, as 'node_modules', 'Pods', and iOS build artifacts aren't synced between the host and the container, allowing them to function independently of the Docker setup.

Things to keep in mind:

• This does not support iOS builds. For that, you'd require a remote Mac host. While there exist Docker images for Mac, they are experimental and using them goes against Apple's EULA.._

• It's intended strictly for development purposes. The Dockerfile sets up a container that operates everything as root, using default sshd configurations.

Requirements

• Android Studio installed with platform-tools in your path.
  • Note: This is likely configured if you've already developed for Android/RN on your machine
• Docker Desktop
  • OrbStack (great alternative but it will be out of its free beta soon and may not be stable)
• A React Native project to dockerize!

Installation

You will either want to dockerize an app you haven't cloned/created yet, or an existing repository on your machine.

Option 1: Cloning A Project

Expand

Let's say you have a React Native repository you've yet to clone but wish to run under docker. You'll clone this repository first, then clone your React Native project inside this repository with its folder named app.

cd ~/Projects
git clone git@github.com:my-github-org/react-native-dockerized.git my-rn-project-dockerized
cd my-rn-project-dockerized && rm -rf .git
git clone git@github.com:my-github-org/my-rn-project.git app

Option 2: An Existing Project

Expand

Let's say you've already cloned a React Native repository and your directory structure is: ~/Projects/my-rn-project. You'll want to clone this repository, then move the entirety of your react native repository into this repository under a folder named app.

cd ~/Projects
git clone git@github.com:my-github-org/react-native-dockerized.git my-rn-project-dockerized
mv my-rn-project my-rn-project-dockerized/app
cd my-rn-project-dockerized && rm -rf .git

Jump through the other optional setup, particularly Configure Github Auth if your project has dependencies that install from a private Github repository.

Usage

After going through Installation and any of the optional setup:

docker-compose up
./dockdroid.sh start-metro
# boot up an Android emulator before this step
./dockdroid.sh run-android

And you're all set! The following are all of the helper commands for managing the container. Regular docker commands work as well. Refer to dockdroid.sh for examples.

Command	Description
./dockdroid.sh stop-metro	Stop the Metro server
./dockdroid.sh start-metro	Start the Metro server and reset its cache
./dockdroid.sh metro-logs	Check the server logs
./dockdroid.sh connect-android	Connect to your host machine's Android device
./dockdroid.sh run-android	Connects to your host machine's Android device, builds and deploys the app
./dockdroid.sh reinstall-node-modules	Removes the node_modules directory in the project and re-installs dependencies
./dockdroid.sh clear-known-hosts	Removes the Docker container's entries from the host's ~/.ssh/known_hosts file
./dockdroid.sh shell	Starts a bash shell in the project's directory inside the Docker container
./dockdroid.sh init-ssh	Generates an SSH key and adds it to the host's SSH config

You may need to run sudo chmod +x ./dockdroid.sh first for executable permissions.

Settings

You can adjust a few settings in the .env file at the root of the repository.

Variable	Description	Default
CONTAINER_NAME	The name of the Docker container that the script interacts with.	react-native-dockerized
SSH_KEY	Location of the SSH key file that is used for secure communication with the Docker container.	~/.ssh/id_docker_dev
RN_PROJECT_FOLDER_NAME	The name of the React Native project folder. This should match the name of the folder that you cloned at the root of your repository.	app

You will need to rename your container if you'd like to run more than one of these containers at the same time. For example, if you're working on two separate React Native apps, you will not be able to dockerize the second app without it using a different container name.

Please be aware that modifying the RN_PROJECT_FOLDER_NAME variable doesn't rename the project folder on your host machine. Instead, this variable should reflect the name you have already assigned to your project folder.

Configure Github Auth

Expand - optional, but highly recommended

Before booting up the container, the image will run npm install as its getting built and will need to authenticate with a Github account to install any NPM packages from private Github repositories.

1. Create a legacy access token with all Repo-related permissions checked, and save the token in your password manager.
2. Add export GH_TOKEN="your_legacy_access_token" to your ~/.zshrc file

• Alternatively, you could add it to the .env file

Remote Workspace Inside The Container:

Expand - optional

You can open a new remote workspace in your IDE to access the React Native project within your container. With VS Code, you may not require SSH for this task, thanks to the robust integration of the Dev Containers extension with Docker. However, if you're using VSCodium, your best bet is the Open Remote SSH extension.

Do note, VSCodium comes with certain limitations, such as the need to manually provision an SSH server and client - but hey that's the FOSS life.

To simplify the setup for a remote workspace in VSCodium, you can run init-ssh and it will provision everything necessary. You can confirm this by running ssh root@{your.dockers.ip.address}.

Troubleshooting

• If hot reloading doesn't work, first check the Metro logs with ./dockdroid.sh metro-logs. If the logs don't help, make sure your Metro configuration includes watchFolders: ['/home/app'],, replacing 'app' with the value of RN_PROJECT_FOLDER_NAME. This ensures changes are detected in both your local machine and the container.

• If you have issues connecting via SSH, try running ssh root@{your.docker.ip.address} -v for more debug info. Often times the logs will be clear and verbose enough to instruct you further.

• Your known_hosts file will likely throw an error after recreating the container, and you'll have to run ./dockdroid.sh clear-known-hosts. SSH in again to confirm it's fixed, and accept the new known_host entry.