Skip to content

Instantly share code, notes, and snippets.

@Geoff-Ford

Geoff-Ford/react-native-developer-setup.md

Last active June 2, 2023 09:21
Show Gist options
  • Save Geoff-Ford/6018e25f6456d8999ebad0fd86597028 to your computer and use it in GitHub Desktop.
Save Geoff-Ford/6018e25f6456d8999ebad0fd86597028 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
react-native-developer-setup.md

React Native Developer Setup

A hopefully helpful guide to getting a basic setup for React Native development.

Note: This is a work in progress, I'll keep adding/updating

General Setup

  • General JavaScript Setup

  • Java

    • brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

  • Watchman

    • brew install watchman

  • Xcode

    • Install Xcode from the App Store
    • Once installed, navigate to (Preferences -> Locations) and in the "Command Line Tools" dropdown, select the most recent version
    • To install additional simulators:
      • Navigate to (Preferences -> Components)
      • Click on the download icon next the required OS version i.e. iOS 14.3 Simulator

  • Android Studio

    • Download and install Android Studio. Make sure Android SDK, Android SDK Platform and Android Virtual Device are all selected during the installation

    • To install additional SDKs, navigate to (Preferences -> Appearance & Behavior -> System Settings -> Android SDK) and select the required SDK version i.e. Android 11.0 (R)

    • React Native requires some environment variables to be added to your bash (~/.bash_profile or ~/.bashrc) or equivalent (~/.zprofile or ~/.zshrc) config:

      export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

    • As we just changed the config you will either need to open a new terminal or source ~/.bash_profile (or equivalent config file) to update the current terminal window with the changes

    • To install additional emulators:

      • Navigate to (Tools -> AVD Manager) or look for the "AVD Manager" button on the top right of Android Studio
      • Click "+ Create Virtual Device..."
      • Select a "Category" i.e. "Phone" and a model i.e. "Pixel 4 XL" and click "Next"
      • Select a "System Image" i.e. "Q" and click "Next"
      • Make required config changes if any and click "Finish"

  • React Native CLI

    • If you already have react-native-cli installed globally, remove this (yarn global remove react-native-cli) as it isn't necessary anymore and can cause issues
    • To use the React Native CLI, we call it like this: npx react-native <command>. The current version of the CLI will be downloaded the first time the CLI is used i.e. npx react-native init MyNewProject

  • https://reactnative.dev/docs/getting-started

  • https://reactnative.dev/docs/environment-setup

Example App

  • Create a new project:

    • yarn react-native init MyNewProject to create a new project with the name "MyNewProject"
    • Or if you prefer TypeScript yarn react-native init MyNewProject --template react-native-template-typescript

  • Bundler

    • gem install bundler
    • bundle init to add a Gemfile and Gemfile.lock to your project
    • https://bundler.io/

  • CocoaPods - dependancy library for iOS apps

  • Metro Bundler

    • React Native uses Metro Bundler to bundle up all your project's JavaScript into a file that is then used by your app in both iOS and Android
    • yarn react-native start

  • iOS

    • From another terminal, yarn react-native run-ios to build the iOS app and open it in a simulator.
    • Or if you prefer to run from Xcode, open the app at the ios folder then look for the Run button

  • Android

    • From another terminal, yarn react-native run-android to build the Android app and open it in an emulator.
    • Or if you prefer to run from Android Studio, open the app at the android folder then look for the Run 'app' button

  • Troubleshoot

Distribution

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment