Habilelabs-Logo
Blog

React Native – Build Outstanding Mobile Apps

June 17th, 2020 . 3 minutes read
Blog featured image

Building an iOS or Android mobile application is quite a challenge. Luckily, a number of frameworks are available nowadays for building your app with minimum effort. React Native is one such JavaScript framework that is used to build mobile applications for iOS and Android.

What is React Native?

React Native is a framework developed by Facebook. It is used for creating native-style apps for iOS & Android under one common language, JavaScript. Lots of companies have now switched to React Native.

React Native Apps

What are React Native Apps?

React Native apps are not web apps. They are running on a mobile device, and it does not load over the browser. It is also not a Hybrid app that builds over Ionic, Phone Gap, etc. that runs over WebView components.

These applications are the real native app, the JavaScript code stays as JavaScript, and they run in some extra thread by the compiled app. The user interface and everything is compiled to native code.

User Interface Apps

Why React Native?

Now let’s see what’s the features provided by React Native. Why it is so popular. What are the advantages of react-native over native app development? 

1. Learn Once, Write Anywhere:

React Native uses the concept of React. So, it is easy for a react developer to create an app. To learn React, you can visit this page-

2. Cross-Platform Native Apps:

Using react native, developers can create cross-platform native apps that support both android and iOS platforms.

3. Fast Refresh:

In native app development, developers need to rebuild every time to see the changes but React native gives the fast refresh functionality. It will reload the screen after saving changes.

Installation:

React Native applications can be created through either expo CLI or react-native CLI-

Expo CLI

If you are new to react native, you can start with the expo CLI. This is the easiest way to get started in react native. First, install the Node > 12 LTS. Step for step-up expo CLI as follows

  • npm install -g expo-cli
  • expo init ProjectName
  • cd ProjectName
  • npm start
  • npm run android / npm run iOS

React Native CLI

If you are already familiar with mobile development, you may want to use React Native CLI. It requires XCode or Android Studio to get started. After XCode or Android Studio setup follows these steps to generate a react native build.

  • react-native init ProjectName
  • cd ProjectName
  • npm start
  • react-native run-android/ react-native run-ios

Hello World” in React Native

After the setup is completed, let’s create our ‘Hello world’ program in React Native.

“Hello world’ Program

Core Components and APIs

React native provides core components that can be directly used to create mobile screens. Components divide into following categories

  1. Basic Components
  2. User Interface
  3. List Views
  4. iOS-specific
  5. Android-specific
  6. Others

1. Basic Components:

This category includes the components which are mostly used in a screen.

Component Categories

2. User Interface:

Components that are responsible to create UI elements are part of this category. These components look different on different platforms. 

UI Element Component

3. List Views:

The following list-view components only render elements that are currently showing on the screen. This makes them a performant choice for displaying long lists of data.

List-View Components

4. iOS Components and APIs:

The following components are specific to the iOS platform. It will not work in android.

iOS Components

5. Android Components and APIs:

The following components are specific to the android platform. It will not work on iOS.

Android Components

6. Others:

Other than the above components and API, React Native provides more components. These components may be useful for certain applications.

Useful components for Certain Applications

Using all these components and API, you can create any type of screen using React Native. In the next blog, we will discuss how we can style these components and create a wonderful screen of react-native. Till then, keep practicing and you can also read about React Hooks – Why better than Classes in detail.

Thanks for reading the blog!!

Author: Prerna Saini
Share: