To run this repo, you must have one of these two operating systems:
- macOS 12 (Monterey) or newer
- Windows 10 (64-bit) or newer
The setup steps below will walk you through installing these dependencies across both operating systems:
- Node.js 20
- npm 10
- for Android:
- JDK 17 or equivalent
- Android Studio
- Android SDK
- Android SDK Platform
- Android Virtual Device
- for iOS:
- macOS
- Xcode or Xcode Command Line Tools
- Xcode iOS Platform
- Xcode iOS Simulator
Specific to macOS:
- Node Version Manager (nvm)
- Homebrew
- Watchman
Specific to Windows:
- NVM for Windows
- Chocolatey
- Performance (Intel ® HAXM or equivalent)
Follow the React Native Environment Setup instructions for macOS with Android as well as iOS target OS.
Be sure to follow the setup instructions for:
- Watchman
- Java Development Kit
- Install Android Studio
- Install the Android SDK
- Configure the ANDROID_HOME environment variable
Follow npm’s instructions to install Node.js.
We recommend using nvm to install Node because it allows you to manage multiple versions of Node for different projects.
Follow the “Install Homebrew” instructions on Homebrew’s website.
After running the installer, be sure to follow the instructions it prints:
Warning: /opt/homebrew/bin is not in your PATH.
Instructions on how to configure your shell for Homebrew
can be found in the 'Next steps' section below.
==> Next steps:
- Run this command in your terminal to add Homebrew to your PATH:
eval "$(/opt/homebrew/bin/brew shellenv)"
Use Homebrew to install Watchman:
brew install watchman
Install the Java Development Kit with these commands:
brew tap homebrew/cask-versions
brew install --cask zulu17
# Get path to where cask was installed to double-click installer
brew info --cask zulu17
After you install the JDK, update your JAVA_HOME environment variable. If you used above steps, JDK will likely be at /Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home
Follow the instructions in the setup guide.
Follow the instructions in the setup guide.
Follow the instructions in the setup guide.
Follow the React Native Environment Setup instructions for your operating system with Android as the target OS.
Be sure to follow the setup instructions for:
- JDK
- Install Android Studio
- Install the Android SDK
- Configure the ANDROID_HOME environment variable
- Add platform-tools to Path
Follow npm’s instructions to install Node.js.
We recommend using NVM for Windows to install Node because it allows you to manage multiple versions of Node for different projects.
You can also follow Microsoft’s instructions for setting up Node.js on Windows.
For some of the instructions, you may need to open the command prompt or PowerShell as an administrator.
Install Chocolatey before installing the JDK.
Follow the instructions in the setup guide.
Follow the instructions in the setup guide.
Follow the instructions in the setup guide.
Follow the instructions in the setup guide.
Follow the instructions in the setup guide.
Clone this repo and run:
npm ci
Install the app in the emulator with:
npm run android
and/or
npm run ios
It will open the emulator or browser for you as needed but it will not start the dev server, so the app will show the error "There was a problem loading the project. Failed to connect." As long as the app opens on the device, this was a success.
Start the development server with:
npm run start
and ensure it says "Using development build". If it says "Using Expo Go", press s to switch to the development build.
You can then press a, i, or w to run Android, iOS, or Web. You can run any or all of them at the same time. It will open the emulator or browser for you as needed.
Start the API server in a separate terminal with:
npm run api
By default, the Android emulator won't be able to access your localhost server.
In order to connect it to the emulator run the adb reverse tcp:7070 tcp:7070 command.
Make sure if you're running the place-my-order-api on a different port to replace the 7070 with port
e.g. if you're running on port 3030, run adb reverse tcp:3030 tcp:3030
You can run React Devtools with npm run react-devtools. This will start the DevTools up which will be ready to open with Metro's in-app dev menu. In running Metro app make sure to hit press 'd' to open the dev menu in React DevTools.
Alternatively, if you start up the Emulator after React DevTools is running it'll automatically watch the emulator. If for some reason it doesn't watch it, press 'd' on the terminal that opens for the Metro Dev server.
While using the emulator if you wish to use the element inspector, run the adb shell input keyevent 82 in the terminal.
While developing or making changes to the .env the emulator will use cached results, so you may not see your changes.
To amend this, shut off the emulator and use the npm run clean command. After starting up the emulator should take the new .env variables.
- In the Virtual Device Manager, confirm that your image is running Android 14 with API 34.
- In the Virtual Device Manager, click the 3 dots menu and "Wipe Data".
- In the local repo, run npm run clean.
- Run
npm run androidto install the app shell. It should launch the emulator with the error "There was a problem loading the project. Failed to connect." - Run
npm run startand pressato load the app into the shell.
- In the iOS Simulator, go to Device >> Erase All Content and Settings...
- In the local repo, run npm run clean.
- Run
npm run iosto install the app shell. It should launch the emulator with the error "There was a problem loading the project. Failed to connect." - Run
npm run startand pressito load the app into the shell.