what is React Native hybrid application?

Before we see React Native let us understand what is react.js?

React.js is a JavaScript library for building User Interfaces and typically it’s used for web development. Another library which also used for building Web APPs and that is responsible for rendering DOM on to the screen its called a ReactDOM library. ReactDOM.render(‘…’) to adds the web support. ReactDOM.render() also support for the HTML. React itself is platform-agnostic!. That’s all about React.js.

Let dive into the React Native

React Native is a special library that has a collection of special React components. These components are compiled to the native widgets of ios and Android. React Native has Native platform APIs exposed to javascript. React Native tools do connection or bridge from the javascript code to Native platform code. React Native gives full flexibility to connect javascript to native code and it also gives prebuild native features that are conveniently usable into your javascript code.

In the end, React.js + React Native = Real Native mobile APPs (ios, android)

React + React Native App code will typically look like this:

cons App = props =>{
<Text>Welcome to helperscript.com</Text>

<View> and <Text> which is not a normal HTML element because normal HTML elements are not supported in React Native. Views are compiled to real Native widgets.

some similarities of different platform elements

React for Web => <div>, <input> , …
Native Android => android.view , EditText, …
Native ios => UIView, UITextField , …
React Native =><View>, <Text> , …

Note: React Native maps reusable components to the respective platform equivalents.

The workflow of React Native:

React Native workflow

Difference between Expo CLI/Tool Vs React Native CLI

Expo CLI/Tool

  • Third-party service but absolutely free!
  • No need to signUp, No Pay to build
  • Managed App Development
  • lots of convenience and utility features: simplifies development
  • But you are limited to the Expo Ecosystem.
  • It does not have some fine-tune components normally have so that everyone prefer to React Native CLI.
  • Basic components like camera, map and etc are worked well. Your choice is to depend on the features of the application.
  • If you need more control of native you need to move from Expo CLI to React Native CLI.

React Native CLI

  • Manage by React Native community or Team.
  • Bare-bone development which means If you need to develop an android application, then you need to install Android Studio or If you need to build ios you need to install XCode.
  • XCode works only in Mac Os. If you have windows or Linux you only able to run an Android Studio simulator or emulator. For ios, you can use the Expo CLI App in the apple store.
  • Almost no convenience or utility.
  • Full Flexibility of integrating with any Native code which is not in Expo.

How expo app works?

  • The Expo app has the best feature for developers to see the application in real-time on your own real mobile phones.
  • you can publish an app as an EXPO app. You can also publish as standalone apps.
  • you can also switch to a non-EXPO development flow as well.

Let’s get create the first application:

  • Node.js (Install Node.js for Run install React Native).
  • sudo npm install expo-cli –global
  • Type above into your terminal to install react Native. For window type => npm install expo-cli –global.
  • Then create a project using expo init firs-app
  • npm start

Congratulation you are creating your first react-native application. All the best for your work. Thank you for reading. Have a nice day!