In this tutorial, you’ll be learning about basic concepts, developing an application from scratch, state, props, and components. This tutorial is for both beginners and professionals.
Introduction to React Native
“React Native is not used for developing web applications or an HTML application; it is only used to develop real, native mobile applications that are indistinguishable from mobile applications built using Java or C++. The apps developed using React Native does not load on any browsers, they run on a mobile device only.”
Advantages of React Native
- Cross-Platform: It works for both Android and iOS devices.
- Reloading: Changes made in the code of the app will be visible during development.
Limitations of React Native
- Updates: Few components of Android and iOS are not supported.
- Native Components: If the developer wants to create native functionality that is yet to be created, then the developer has to write platform-specific code.
React Native Environment Setup
The instructions and environment setup are quite different for each operating system. Here, we have chosen Windows as our development OS and Android as our target OS.
Steps to Setup React Native CLI Environment
Step 1: Install NodeJS and NPM (Node Package Manager)
Click here to download NodeJS. NPM comes with NodeJS.
To verify whether NodeJS and NPM are installed or not, open the command prompt and type “node -v” and hit enter. This command will give the version of NodeJS installed.
Next, type “npm -v” and hit enter, this command will give you the version of NPM installed.
Step 2: Install React Native CLI
Open the command prompt and run the below code:
npm install -g react-native-cli
This command will install React Native.
To install Expo CLI use the below command.
npm install -g expo-cli
Note: We’ll discuss Expo CLI later in this post.
Download and setup Android studio
Step 1: Download the latest version of Android Studio from “https://developer.android.com/studio.”
Step 2: Go to the download folder, double click on the downloaded android studio set (.exe) file. In the Welcome to Andriod Studio Setup Window click Next.
Step 3: Make sure the Android virtual device is checked. Click Next.
Step 4: Choose the destination folder and click Next.
Step 5: Follow the prompts and click install.
Step 6: Let the installation complete and click Next.
Step 7: Click Finish.
Step 8: Click Next, select an installation type and click Next.
Step 9: Select the UI theme and click Next.
Step 10: In the Verify Settings Window, click Finish.
Step 11: In the Downloading components Window, click Finish.
Configuring AVD Manager
Once Android Studio is installed, we’re going to configure the AVD Manager.
Step 1: At the bottom left of the Android Studio Window, you’ll find a configure option, click on it, and select AVD Manager.
Step 2: Click “Create Virtual Device.”
Step 3: Choose a device, click Next.
Step 4: Download any Android version for your Virtual Device. Click download, accept the license agreement. Click Next.
Step 5: Once the Android version is downloaded on a virtual device, click Next.
Step 6: Give a name to the AVD and click Finish.
Step 7: Click on the Play icon under the Actions column to start your AVD.
Hurray! You have completed the React Native Environment Setup. Create a new project and start working.
In this guide, we’ll teach you how you can create your first app, installing tools, and give you an overview of how to work with Expo tools, limitations, and environment setup.
Expo allows you to run an app on a physical device without setting up a development environment. To run the React Native app on your physical device, all you have to do is to install the Expo application from the play store and scan the QR code displayed on Command Line Interface.
Limitations of Expo
- If your app wants a specific thing, Expo may not support it.
- Many features of iOS and Android APIs are still not available, for example, Bluetooth is not available.
- Does not support the background execution of the code.
- Only minimum versions of iOS and Android are supported.
- The managed workflow may not be the best option, to keep the size of the app too less.
- Better development experience.
- Easy to upgrade to newer versions.
- Easy to deploy the application in Apple or Google store.
- Setup takes less time.
Difference between Expo CLI and React Native CLI
Expo CLI Installation and Setup
npm install -g expo-cli
The above command will install the Expo CLI.
To check the installed version of the Expo CLI, enter the below command in the command prompt and hit enter.
expo -- version
Step 2: Create a new project. Use the below command to create a new project.
expo init my-project
Note: In place of my-project you can give any name.
Step 3: Navigate to the project directory and type the below command to open iOS or Android.
Hit enter after each command.
cd my-project npm start
Step 4: Now, the Expo dev tool will automatically get started.
If you wish to use Android emulator, press a, or w to run on web.
If you press a, then it will start downloading and installing Expo on your AVD.
Hurray! You have completed the Expo Installation, Setup, Creating a new project. You can start working on it now.