React Native Expo Installation Guide - saayam-for-all/docs GitHub Wiki

Installing React Native Expo

Expo is a React Native framework used to develop mobile apps for both Android and iOS.

1. Install Node.js

  • Visit nodejs.org to download and install latest recommended version.

2. Install Expo CLI using NPM

  • NPM comes bundled with Node.js. Verify its installation by running following command. It will return npm version installed on your machine.

    npm -v

  • Now install Expo CLI globally.

    npm install -g expo-cli

3. Create a new React Native project

  • Create a new project named NewProject. Following command will create the project in NewProject folder.

    expo init NewProject

  • Change directory to project directory before running the project

    cd NewProject

4. Run the React Native project using Expo Go app

  • Download and install Expo Go app from App store or Play store on your phone. Initially we are using this app to quickly setup environment.

  • Run the project from the project directory.

    npm start

  • Scan the QR code in Expo app on Android. For iPhone, scan QR code with camera or follow the instructions. Make sure the machine and the phone are on the same WiFi network. Alternatively connect the phone to machine with USB cable to run the app.

  • If you got the QR code and app runs in Expo Go on the phone successfully then the installation is complete.

5. Suggested Code Editor(IDE)

  • To edit and manage the code download and install latest VS Code(Visual Studio Code) version.

6. Running the app in Android Emulator(Optional)

  • This step is completely optional. Only for programmers who don't want to run code on the Expo Go app.

  • Install latest Android Studio. Setup an emulator in 'Virtual Device Manager'. Run/start the emulator before running the React Native code.

  • Now run the project as usual.

    npm start

  • There will be several options shown below the QR code. Press 'a' to run in the Android emulator.

  • For more info check documentation.

For MAC Users only

7. Running the app in iOS Simulator(Optional)

  • Install Xcode

  • Xcode is necessary for building and running iOS apps. You can install it from the Mac App Store:

  • Open the App Store on your Mac.

  • Search for "Xcode".

  • Click "Install" to download and install Xcode.

Installation for Mac users

1. Install Xcode Command Line Tools

  • These tools are required for building iOS apps:

  • Open Terminal.

  • Run the following command:

    xcode-select --install

2. Open Xcode and Install Additional Components

  • After installing Xcode, open it from the Applications folder. -Follow any prompts to install additional components.

3. Agree to Xcode License

-You might need to agree to the Xcode license before you can use it:

  • Open Terminal.

  • Run the following command:

    sudo xcodebuild -license

  • Read through the agreement and type "agree" if you accept the terms.

4. Install CocoaPods

  • CocoaPods is a dependency manager for iOS projects:
  • Open Terminal.
  • Install CocoaPods using the following command:

sudo gem install cocoapods

5. Setup an iOS Simulator

  • You can use the iOS Simulator provided by Xcode to run your React Native apps:
  • Open Xcode.
  • Navigate to Xcode > Preferences in the menu bar.
  • Go to the "Components" tab.
  • Download the desired iOS simulator versions from the list.

6. Running the React Native Project in iOS Simulator

  • Navigate to your React Native project directory:

    cd NewProject

  • Start the React Native project:

    npm start

In the Metro Bundler terminal window, press i to open the iOS simulator. The project will automatically build and run on the selected iOS simulator.