What is React Native and How does it Work under-the-hood?

  • Software
  • 4 min read
reactjs logo emblem with black background

What is React JS?

So what is React Native? Let’s start with the “React” part, also known as React JS. ReactJS is a JavaScript library for building modular User Interface (UI) components so that they can be re-used: to build a satisfying User Experience on the User Interface. Typically, ReactJS is used to build web applications. BUT it is important to know that ReactJS, the library by itself, does not know what we are building with it; consisting of nothing more than just a bunch of universal tools that can be used for both Website and Mobile (Android & iOS) applications.

In addition, if you know already know about ReactJS applied to web applications then you would know to call the “ReactDOM.Render()” method at one point in your code, so that you may render HTML elements onto a web browser.

Furthermore, React JS itself, is platform agnostic. The phrase “platform agnostic”, in this context, means that React JS is free from any ties to a specific platform or system; and runs equally well across more than one platform. Essentially, it is a library that allows you to build a tree of UI components. React JS also allows you to find out whether some value has been changed and if something needs to be re-rendered; when managing state and passing data around. This library allows all of the mentioned functionality to be executed in such an Abstract way, which is why you can use it on ANY device platform.

What is React Native’s Library?

React Native’s library exists by itself altogether, separate from React JS. React Native is a collection of “special” UI components. By special I mean that this library knows how to translate these React UI components into Native Widgets for iOS and Android. React Native, is like ReactDOM because it knows how to talk to native platforms (in this case, Android and iOS) and how to render native widgets. React Native provides many out of the box widgets so that you may re-use them to build and render native cross-platform mobile (Android and iOS) widgets. React Native allows you access to Native Platform APIs, for example, it helps you to access the device’s camera feed; React Native contains the tools to connect JavaScript and Native Platform Code together. Therefore, giving you full flexibility to run any React Native’s component on any platform/device.
 
The translation of HTML elements to Native cross-platform elements (Android and IOS) does not exist in the React Native Library. Therefore, you will not be able to use regular HTML elements in your React UI Components, such as: DIV, h1, h2, h3 (etc).
Question: What do React Native UI Components consist of?; Answer: They consist of React JS components.

How does React Native work ??!

To illustrate a typical a Native React UI component here is the code snippet below:

const App = (props) => {
  return (
    <View>
      <Text>Hello world!</Text>
    </View>
  );
};

As you can see, we have the View and Text components are being rendered in the code snippet above. These are not “HTML elements” as they are not supported in the React Native’s library. Therefore, you must use native components such as the ones mentioned above so that React Native knows how to translate and render these components onto any platform/device.  

When using React on a web-based platform, you would use a <div> wrapper component to encapsulate your UI components. In the same way, on Native Android, you would use an android.view and on Native Apple iOS you would use a UIView. However, when using the React Native’s library you will need to use the View component, as this is a special component that has the ability to render on any device/platform. React Native contains the bindings between the UI components that you build to native, cross-platform, Mobile App User Interface Components; therefore the speed and responsiveness when using this library would be the same as if you were to develop Native Android and iOS applications. For example, when using React JS on a web-based platform to capture user input you would use a <input> wrapper, on Native android: “Edit Text” would be used and on Native iOS “UI Text Field” would be used. React Native has its own input wrapper element called: <TextInput>; again, this is a special component that has the ability to render on any mobile device.

Have a look at the following illustration where you are able to see a conceptual view of React Native’s behind the scene operation:

React Natives Functionality Concept - this illustration describes the concepts involved within a React Native mobile application (Android or IOS).

If you’ve made it this far, thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *