We will show you how to create React Native App from installing all the needed software and dependencies to React Native app. How to get started with React Native by installing Expo CLI or React Native CLI and install Xcode (for Mac OS) and Android Studio (for Windows).

You will learn how to Create React Native App:

  • What is React Native?
  • Expo CLI vs React Native CLI – which one to use?
  • Step 1: Install Expo CLI or React Native CLI
  • Step 2: Install Xcode (for Mac OS)
  • Step 3: Install Android Studio (for Windows)
  • Step 4: Install IDE
  • Step 5: Create your first React Native app from scratch

What is React Native?

React Native is an open-source cross-platform mobile application development framework developed by Facebook in 2015. It is widely used by developers, from advanced developers in Android and iOS to React beginners.

Install React Native: Expo CLI vs React Native CLI

You can either use Windows, Linux or Mac OS to get started with React Native. Both the iOS and Android environments are available on Mac OS, whereas Linux and Windows only support Android environment. We will assume that you are using macOS for React Native development, but you can always follow the similar instructions for Windows and Linux as well.

There are two ways to get started with React Native:

  • Expo CLI
  • React Native CLI

React Native official setting up the development environment documentation is recommending to use Expo CLI if you are new to app development.

Installing Expo CLI

You need Node 12 LTS or later on your local machine to use this method. Use npm to install the Expo CLI command line utility:

npm install -g expo-cli

Installing React Native CLI

For Mac OS

You need to install Nodethe React Native command line interface, a JDK, and either Android Studio or Xcode.

The recommended way is to install Node and Watchman using Homebrew. Run the following commands in a Terminal after installing Homebrew:

brew install node
brew install watchman

Most of the tools come with Xcode. If you have already installed Node on your system, make sure it is Node 8.3 or newer. Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

For Windows and Linux

You need Node, the React Native command line interfa*cePython, a JDK, and Android Studio. While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.

React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using npx, which ships with Node.js.

With npx react-native <command>, the current stable version of the CLI will be downloaded and executed when the command is run. If you previously installed a global react-native-cli package, please remove it, as it may cause unexpected issues.

Installing Xcode (for Mac OS)

The easiest way to install Xcode is via the Mac App Store. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app. If you have already installed Xcode, make sure it is version 9.4 or newer.

You need to install the Command Line Tools for Xcode. Open Xcode, then choose Preferences… from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

You need to install CocoaPods. Use the command below to do that:

sudo gem install cocoapods

Installing Android Studio

Download and install Android Studio. Choose a Custom setup when prompted to select an installation type. Make sure all of the following boxes are checked:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

If the checkboxes are grayed out, you will have a chance to install these components later on. You can also install and set up a device or an emulator for Android development.

To find more information for dependencies and softwares, please refer to the React Native documentation here.

Installing IDEs

App development using React Native can be done on any editor or IDE of your choice. You can use IntelliJVisual Studio CodeSublime TextAtom and more. The choice of editor/IDE is completely up to you. We can start developing apps using React Native.

Create React Native app using Expo

Run the following commands to create a new React Native project named ‘ReactNativeApp’ using Expo CLI:

expo init ReactNativeApp
cd ReactNativeApp
npm start

This will start a development server for you. To run the app, install the Expo client app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the Camera app.

Once you’ve set up Android Studio or Xcode, you can launch your app on an Android virtual device or real device using USB by running:

npm run android

Or on the iOS Simulator (macOS only) by running:

npm run ios

Create React Native app using React Native CLI

Run the following commands to create a new React Native project named ReactNativeApp using React Native CLI:

npx react-native init ReactNativeApp
cd ReactNativeApp
npx react-native start

This will start a Metro Bundler development server for you. Once you’ve set up Android Studio or Xcode, you can launch your app on an Android virtual device or real device using USB by running:

npx react-native run-android

On the iOS Simulator (macOS only) you can do this by running:

npx react-native run-ios

You will be able to see the app running in the emulator/simulator or a real device.

Wow!!! We have successfully run our first React Native app.

Latest Current Affairs in Hindi

What is the difference between Flutter and React Native?