React Native - Review and Compare Native Codes - ByteScout
  • Home
  • /
  • Blog
  • /
  • React Native – Review and Compare Native Codes

React Native – Review and Compare Native Codes

React Native revolutionized the way mobile apps were developed, largely because of its use of native code components. Components are complete units of code meant to provide a specific functionality. Basically, the Component architecture achieves separation of concerns for the application and allows ease of access and use. This article takes you through a few simple components, comparing their uses and types, to give you an introduction to React Native’s native codes.

The web development community had long sought ways which enabled HTML and CSS code bases to function as mobile applications, and that kind of usability ran counter to long-established norms in development. For decades, the default in development had been the specialization of language and platform, with few successful movements to tear down walled gardens and enable usability across environments and usage-cases. The release of React by Facebook in 2013 caused a shift in the way web apps could be written. React offered a component-based architecture that would allow developers to develop mobile apps without learning large, specialized and potentially fast-obsolete environments. React Native provides code-reusability with the performance and aesthetics of a native mobile application since it uses its components with native mobile APIs.

React Native enables developers to reuse their source code – not only in similar environments across the web but to use them in mobile too. Now, developers do not have to develop a similar application for iOS and Android from scratch as they can reuse their code easily. This increases the efficiency of code processes and enables developers to push the boundaries of their discipline, instead of putting time into recreating and duplicating functionality for different but essentially identical use cases.

Unlike React for web components, React Native focuses on native user-interface (UI) widgets; whereas HTML was targeted by React, Facebook’s JavaScript library for developing UI. Thus, in React Native, <View> will be used rather than <div>; and specifically, UIView on iOS and android.view on Android.

Integrated Components

Several integrated components are offered by React Native, allowing developers to perform simple functions quickly and easily. A few of the basic components are:

  • View – a very basic component for developing a user-interface
  • Text – an integrated component that simply shows text
  • Image – a component that displays images
  • TextInput – a component that input text into the app via a keyboard
  • ScrollView – a component that offers a scrolling container that can host various components as well as views
  • Button – a fundamental component for dealing with touches that should render well on any platform.

For example, the button function is usable in a variety of cases. The following is the source code to create a simple button:

onPress ={onPressLearnMore}
title = "A Simple Button"
color = "#841584"
accessibilityLabel = "A lovely button, in purple."

These basic components are the building blocks of your work in React Native; they’re what you need to know to get something simple made.

The key features of React Native can be summarized as below:

  • React Native is Write Once and Use Everywhere. This means that you need to write your application once and you can run it on different mobile platforms which include Windows, Android, and iOS. This eliminates the need to develop solutions for every platform out there.
  • React Native is the framework for the web, and that’s why it supports popular programming languages including HTML, CSS, and JavaScript. So, if you are someone who is familiar with programming language then you will find React Native familiar.
  • The community of React Native is strong and worldwide. You get access to excellent people in the community. As it is open-source, many people are interested in investing their time and effort into it.
  • It comes with excellent third-party library support.

Platform-Specific Components and APIs

By contrast with the simple functions, there are components and APIs which are particularly for use with iOS and Android. For example, in an iOS app, ProgressViewIOS is used to render a UIProgressView. Similarly, we can show the progress of an Android app or show that the app is loading by using ProgressBar. These two functions are similar, but tie into their native environment in different ways – an example for the Android environments is given in the following code, which enables ProgressBar with the styles we’ve chosen:

render: function() {
var progressBar =
<View style = {styles.container}>
<ProgressBar styleAttr = "Horizontal" />
return (
componentView = {componentView}
loadingView = {progressBar}
style = {styles.loadingComponent}

The React Native Code Community

The different uses of native codes in React Native are all supported by the vast community of developers behind React Native, sharing tips and ideas, and an ecosystem which has led to the creation of several third-party plugins. Examples of third-party plugins include Segment, Intercom, and CodePush.  CodePush is a great example – it offers client-side integration for the CodePush service, allowing developers to add a dynamic update experience to the app in an easy way. The integration experience for both iOS and Android is different, as with the other React Native plugins; but because it’s React Native, working for these different uses doesn’t require deep background in two totally different types of code. Thus, different setup stages will be performed depending on the targeted platform. For example, the following sample code shows how to wrap the root component:

import codePush from "react-native-code-push";
class HudaApp extends Component {
HudaApp = codePush(HudaApp);

Further, one of the Native plugins for iOS/Android/Windows is SQLite3. By means of an SQLite database on the native side, this Native plugin offers a WebSQL-compatible API to store data in the app. The following code demonstrates its usage:

import SQLite from 'react-native-sqlite-2';
const db = SQLite.openDatabase ('test.db', '1.0', '', 1);
db.transaction (function (txn) {
txn.executeSql ('INSERT INTO Users (name) VALUES (:name)', ['huda']);
txn.executeSql ('SELECT * FROM `users`', [], function (tx, res) {
for (let a = 0; a < res.rows.length; ++a) {
console.log ('item:', res.rows.item(a));

This is a simple review of React Native codes; a deeper dive into React Native can be very rewarding, and a great way to grow your skills and employability in the field. React Native is a great framework that encourages web developers to develop robust mobile applications, giving them room to operate efficiently.


About the Author

ByteScout Team ByteScout Team of Writers ByteScout has a team of professional writers proficient in different technical topics. We select the best writers to cover interesting and trending topics for our readers. We love developers and we hope our articles help you learn about programming and programmers.