React Native Hybrid with Ease

React Native Hybrid:

Is React native hybrid? a popular question that mostly developers asked. Let start with the definition off an hybrid apps. An app that is in fact a full-screen web browser (WebView), in which it renders view components. Popular mobile frameworks that use this approach are Ionic, Cordova and PhoneGap.

So React native is not pure hybrid its a blend of both native and hybrid. React Native renders native views, so its native as far views are concerned. on the other hand React Native allows you to mix languages like Java, Kotlin, Objective-C or Swift with JavaScript. In this way we can use it in both platforms. If you want to create hybrid apps for desktop like VS Code, check this out, Electron JS Tutorial.

React Native Hybrid WebView:

In new react native WebView component there are so much opportunity with new features. One of them is loading local HTML(Hyper text mark-up language) file in WebView component. This feature allow us to hold some of HTML pages inside our application directory so when they needed in app, there are no need to use internet connection to access them. It increases our app responding time. So in this tutorial we would learn about New React Native WebView Load Local HTML File From Assets Folder in Android or iOS App.

Creating a new application:

React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using npx, which ships with Node.js. Let’s create a new React Native project called “AwesomeProject”:

npx react-native init AwesomeProject 

The second step is to install the react-native-webview NPM package in our current react native application. So open your react native project root directory in Command Prompt or Terminal and execute below command to install react-native-webview.

npm install --save react-native-webview 

Usage:

Import the WebView component from react-native-webview and use it like so:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';

// ...
class MyWebComponent extends Component {
  render() {
    return <WebView source={{ uri: 'https://reactnative.dev/' }} />;
  }
}

Inline HTML:

Minimal example with inline HTML:

import React, { Component } from 'react';
import { WebView } from 'react-native';

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>Hello world</h1>' }}
      />
    );
  }
}