React Native has become a popular framework for building cross-platform mobile applications. Setting up a consistent development environment is crucial for team productivity and project stability. Docker offers a way to containerize your development environment, ensuring consistency across different machines. This tutorial guides you through setting up an Expo Docker environment for React Native development.

Prerequisites

  • Basic knowledge of Docker and Docker Compose
  • Node.js and npm installed on your host machine
  • Docker installed and running
  • Text editor or IDE of your choice

Creating the Dockerfile

Create a new directory for your project and inside it, create a file named Dockerfile. Add the following content:

FROM node:20-alpine

# Install dependencies
RUN apk add --no-cache bash git

# Install Expo CLI globally
RUN npm install -g expo-cli

# Set working directory
WORKDIR /app

# Expose port for Expo
EXPOSE 19000 19001 19002

# Start with bash shell
CMD ["/bin/bash"]

Setting Up Docker Compose

Create a docker-compose.yml file in the same directory with the following content:

version: '3'
services:
  expo:
    build: .
    ports:
      - "19000:19000"
      - "19001:19001"
      - "19002:19002"
    volumes:
      - ./app:/app
    environment:
      - CHOKIDAR_USEPOLLING=true

Initializing Your React Native Project

Start the Docker container:

docker-compose up -d

Access the container:

docker exec -it  /bin/bash

Inside the container, initialize a new Expo project:

expo init my-app

Running and Testing Your App

Navigate to your project directory:

cd my-app

Start the Expo development server:

expo start

Scan the QR code with your Expo Go app on your mobile device to view your app live.

Additional Tips

  • Ensure your Docker container has access to your network for device connectivity.
  • Use volume mounts to sync code changes instantly.
  • Customize your Dockerfile to include additional dependencies as needed.

Using Docker for React Native development with Expo provides a portable, consistent environment that simplifies collaboration and deployment. Happy coding!