React Native is an open source mobile application framework created by Facebook, Inc. React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, enabling developers to build multiple applications.

Architecture

As you can see, there are four core sections: the React code you write (which is very similar to its web counterpart), the JavaScript that gets interpreted from what you write, a series of elements collectively known as “The Bridge,” and the Native side.

1. JavaScript Realm

In the JavaScript realm our program runs on JavaScript, The code here runs on a JavaScript engine. React Native uses score, which is an open-source JavaScript engine for WebKit. This engine runs inside our app on one of the threads and a mobile app has several threads in which javascript is one of them.

2. Native Realm

In the native realm, The developers will develop in Object Swift if it’s for iOS or with Java if it’s for Android. We will use the native, platform-specific languages that we have used before and the main UI thread will be available as usual. Across platforms, we just need to change the UI from the main UI thread and we will be able to create different background threads as required

React native UI building blocks

• Text – A React component for displaying text. Text supports nesting, styling, and touch handling.
• View & SafeAreaView – The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.
• Button – A basic button component that should render nicely on any platform. Supports a minimal level of customisation.
• Touchable’s – A wrapper for making views respond properly to touches. There are various type of touchable in react-native . TouchableOpacity, Touchable Highlight, Pressable, etc. The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artefacts if not used correctly
• ScrollView & FlatList – FlatList is a  performant interface for rendering basic, flat lists, supporting the most handy features: Fully cross-platform, Header support, Footer support, Pull to Refresh, Scroll loading, Separator support ,etc.  ScrollView renders all its react child components at once, but this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.

Comparing it with react

React is a component-based library. This means that the web application is made up of different components. The components are eventually compiled into HTML elements. React is using the JSX (JavaScript XML) syntax – an XML/HTML-like extension to JavaScript – for the code. Here is a glimpse into how JSX looks:

As you can see, JSX is not plain JavaScript code, nor HTML.

React Native using the JSX and similar React code structure, but instead of using divs and HTML elements it is using React Native View elements. Using the bridge, React Native can ask native code to provide the native elements it needs.

Here you have a simple To-Do list app sample code written both in React and React Native.

You can easily identify a difference between both of them. I will try to explain it more by dividing the things in small parts so that you can understand it better.

Compare the input and TextInput -> Both of them uses different methods to handle  change of text.

In react native it uses onChangeText and in react it uses onChange event.

Next on: button and TouchableOpacity -> Both of are used for click events but both of them uses different methods to handle click event.

In react native it uses onPress while in react it uses onClick event.

Many other UI elements differences like View and div, Text and h3, label, etc.

Advantages of react native

After working with React Native, I think the following are some pretty solid advantages of it:

• You can write code faster and release it for both iOS and Android with only tiny differences that are device-related. There is no need for 2 teams of developers for the same app. (In context of mobile app development )
• Due to the fact that React Native actually renders components using the native platform API, it stands out from most existing methods of cross-platform development such as Cordova or Ionic which are using webview to display HTML elements in the app.
• Ability to basically write React code that runs separately from the main UI thread communicating with the native platform.
• Friendly for Web (Frontend) Development – you can write mobile applications with the performance, look and feel of a native application, while using familiar tools.

These are just a few of the advantages of React Native, but I think you got the idea.