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:

<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.

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 to 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" />
</View>;
return (
<MyLoadingComponent
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.