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
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*ce, Python, 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.
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.
App development using React Native can be done on any editor or IDE of your choice. You can use IntelliJ, Visual Studio Code, Sublime Text, Atom 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.