Skip to main content

Related Articles

Setting up the react native development environment

 

Setting up the react native development environment

This tutorial I am going to focus on how to install and build your first React Native application.


There are two methods you can follow to develop React Native app. If you are very new to mobile development and not familiar with setting up mobile development environment, I would suggest to start with Expo CLI. Expo is a set of tools to build React Native application. It has may features; you have to select suitable features to develop your app in minutes. You need only a recent version of Node.js and a phone or emulator. If you want to test your React Native application on your web browser before installing any tools, you may use Snack.

 

If you are familiar mobile developer from other languages and want to try out React Native, you may try out React Native CLI. For that you need to install either Xcode for iOS or Android Studio for Android OS.

 

If you are a beginner, my personal suggestion is to go for Expo CLI and familiar with the React Native features and concepts. Actually, using Expo CLI, you can develop production level application. But when you move forward there might have some limitation when your application grow to access very hardware specific features. For example, if your application wants to read NFC card, get some data from Bluetooth enabled devices…etc you might want to go for React Native CLI rather Expo CLI. In my own experience I have developed Expo application for many projects which read mobile device network connection, camera, Wi-Fi connection and many more. Most important feature is if you write your Expo app in a such way that you may use same code for iOS and Android OS as it is. But in React Native CLI most of the time you need to some slight modifications to build for iOS and Android OS.

 

Method 1: Expo CLI

 

Prerequisite is to install Node 12 LTS or greater on your machine. You can use npm or yarn command to install the Expo CLI command line utility:

 

npm install -g expo-cli

 or

yarn global add expo-cli

 

To create your first React Native project, run following command:

  

expo init MyFirstReactNativeProject

cd MyFirstReactNativeProject

npm start # you can also use: expo start

 

or

 

expo init MyFirstReactNativeProject

cd MyFirstReactNativeProject

yarn start # you can also use: expo start

 

This will start a development server for you.

 

Now you have created your first React Native application. Next is to run your application and see the results. Don’t get confuse with npm and yarn commands. Both commands are pretty much similar. Different developers use either one as their own preference. I don’t have any clear-cut explanation to use which command. But I always recommend to you only once command through out your entire project. Don’t mixed up with npm and yarn. That might complicate your build process, since each has its own dependencies.

 

Running your React Native application

 

To run your React Native application you need to install the Expo client on your phone (iOS or Android). For that you need to share same wireless network for your computer and the phone. I am using same Wi-Fi router to connect to the computer and the phone. 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.

 

Modifying your app


Now that you have successfully run the app, let's modify it. Open App.js in your text editor of choice and edit some lines. The application should reload automatically once you save your change.


Running your app on a simulator or virtual device


Expo CLI allows you to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, you need to install Xcode or set up your Android development environment. This will discuss in next section of this tutorial.

Once you've set these up, you can launch your app on an Android Virtual Device by running

 

npm run android

, or on the iOS Simulator by running

npm run ios (macOS only).

 

Caveats


So far, you didn’t build any native code when using Expo to create a project. Since that, you can not include any custom native modules beyond the React Native APIs and components that are available in the Expo client app.

 

If you want to include your own native code, still you can use Expo project and you’ll need to “eject” the Expo project to convert Expo project to your own native builds. If you do eject, you need to follow instructions in next section of this tutorial to continue working on your project.

 

Method 2: React Native CLI

 

To build native code in your project you need to follow below instructions. If you want to integrate your React Native application into an existing application or if you want to “eject” your project from Expo still you need to follow these instructions.

 

Following instruction are for Windows development OS and Android target OS.

 

Installing dependencies


You need to install Node, the React Native command line interface, a JDK and Android Studio. Even though we install Android Studio, we are not going to do coding in Android Studio. You can use any editor to code your React Native project. But Android Studio is necessary to setup your development environment and virtual devices to test your project.

 

Node, JDK

 

You can use many ways to install Node and JDK. But for the React Native environment setup, I would like to recommend installing Node and JDK via Chocolatey, a popular package manager for Windows. This will reduce many dependency issues, that will make headache for many beginners.

 

To run below commands, you need to have Administrator permission and open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the following command:

  

choco install -y nodejs.install openjdk8

 

Android development environment


Setting up your development is not straight forward for many beginners to Android development. If you follow below instruction carefully, I would guarantee you don’t find any difficulty to run your first React Native project.

 

1. Install Android Studio


You need to download and install Android Studio. While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:

 

Android SDK

Android SDK Platform

Android Virtual Device

If you are not already using Hyper-V: Performance (Intel ® HAXM) (See here for AMD or Hyper-V)

Then, click "Next" to install all of these components.

 

Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.

 

2. Install the Android SDK


Android Studio setup automatically install the latest Android SDK, and currently Android 11.0® SDK is available to build a React Native app with native code. You can install any other SDKs as well if you wish by selecting required SDK through the SDK Manager in Android Studio.

Open Android Studio, click on "Tools" menu and select "SDK Manager".

SDK Manager
SDK Manager

SDK Platforms
SDK Platforms

Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 11.0 (R) entry, then make sure the following items are checked:

 

Android SDK Platform 30

Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that 30.0.2 is selected.

SDK Tools
SDK Tools

Finally, click "Apply" to download and install the Android SDK and related build tools.

 

3. Configure the ANDROID_HOME environment variable


The React Native tools require some environment variables to be set up in order to build apps with native code.

 

Open the Windows Control Panel.

Click on User Accounts, then click User Accounts again

Click on Change my environment variables

Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:


Edit Environment Variable ANDROID_HOME
Edit Environment Variable ANDROID_HOME

The SDK is installed, by default, at the following location:

 

%LOCALAPPDATA%\Android\Sdk

 

You can find the actual location of the SDK in the Android Studio "Settings" dialog, under Appearance & Behavior → System Settings → Android SDK.

 

Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step.

 

Open powershell

Copy and paste

 

Get-ChildItem -Path Env:\

 

into powershell

 

Verify ANDROID_HOME has been added.

ANDROID_HOME in PowerShell
ANDROID_HOME in PowerShell

4. Add platform-tools to Path


Open the Windows Control Panel.

Click on User Accounts, then click User Accounts again

Click on Change my environment variables

Select the Path variable.

Click Edit.

Click New and add the path to platform-tools to the list.

The default location for this folder is:

 

%LOCALAPPDATA%\Android\Sdk\platform-tools

Edit PATH variable
Edit PATH variable


React Native Command Line Interface


React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, I recommend you to 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 at the time the command is run.

 

Creating a new application

 

To create new application, you have to use React Native built-in command line interface. You can access it without installing anything globally using npx, which ships with Node.js. Let's create a new React Native project called "MyFirstReactNativeProject":

 

npx react-native init MyFirstReactNativeProject

 

Note that this is not necessary if you are integrating React Native into an existing application, if you "ejected" from Expo, or if you're adding Android support to an existing React Native project. You can also use a third-party CLI to init your React Native app, such as Ignite CLI.

 

Preparing the Android device


You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.

 

Either way, you will need to prepare the device to run Android apps for development.

 

Using a physical device


If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions here.

 

Using a virtual device


You have to use Android Studio to open ./ MyFirstReactNativeProject /android, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:

AVD Manager button
AVD Manager button

If you don’t see any Virtual Device, you have to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the Q API Level 30 image.


Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.

Virtual Devices Pixel 2 API 30
Virtual Devices Pixel 2 API 30

Once you click on green play button, it will load the selected virtual device.

Emulator running
Emulator running


Running your React Native application


Step 1: Start Metro


First, you will need to start Metro, the JavaScript bundler that ships with React Native.

 

To start Metro, run npx react-native start inside your React Native project folder:

 

npx react-native start

 

react-native start starts Metro Bundler.

 

Step 2: Start your application


Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:

 

npx react-native run-android

 

If everything is set up correctly, you should see your new app running in your Android emulator shortly.


npx react-native run-android is one way to run your app - you can also run it directly from within Android Studio.


Modifying your app


Now that you have successfully run the app, let's modify it.

 

Open App.js in your text editor of choice and edit some lines.


Modify App.js in editor
Modify App.js in editor

Press the R key twice or select Reload from the Developer Menu (Ctrl + M) to see your changes!

Comments

Popular posts from this blog

The Power of ChatGPT and Whisper Models

A Deep Dive into Natural Language Processing Natural Language Processing (NLP) has seen a significant boost in recent years due to advancements in artificial intelligence and machine learning. Two models that have shown remarkable success in NLP are ChatGPT and Whisper. In this article, we will delve into the power of these models and their applications in the field of NLP. ChatGPT is a transformer-based language model developed by OpenAI that uses unsupervised learning to predict the next word in a sentence based on the context of previous words. ChatGPT is a generative model that is trained on large datasets of text, such as books and articles, and can be fine-tuned for specific tasks, such as question-answering or dialogue generation. ChatGPT is known for its ability to produce human-like text, making it an ideal tool for applications such as chatbots, content creation, and language translation. Whisper, on the other hand, is a paraphrasing model developed by Google that is based on

How to generate component and define routings in Angular

  Things we learned so far How to set up environment             How to create Angular project   Today we will understand how you can create component using Angular CLI and how you can define routing to each component. You can run below command to generate the component using Angular CLI CD <<folder where you want to have the component>>   Run  ng g c <<component name>>     ng g c <<component name>> Angular CLI will create for files and also update the app.module.ts file by adding new entry to the import section. Next we will create the component for home page.

Introduction to Angular

Google release AngularJS in year 2010. It got popular immediately because it made static HTML interactive. However, with other latest web development technologies developers started to see drawbacks of AngularJS. Google then start to rewrite framework again and decided to shift from Java Script to Type Script. Type Script is helpful to avoid drawback of AngularJS Angular 2 was then introduced in 2016 and it evolves up to Angular 9. How to install Angular To setting up the angular framework you need  1. Node To install node go to official site of node to download the version you need ( nodejs ) Run the downloaded Node.js .msi Installer  If you want to know the node version installed in your computer run following command  node -v