React native webview: The comprehensive guide

All developers and programmers are now familiar with the term “react native.” In reality, you can create native-looking iOS and Android apps using this well-known JavaScript-based mobile app framework. React native evaluation, though, what is it? So, do you know what it is? If the answer is NO, we will provide you with a wealth of information about the react native webview, including a detailed tutorial to help you become proficient with it as quickly as feasible. Explore it right away!

What is React Native WebView?

Your React Native app may load web pages thanks to the component react native webview. In addition, it was previously pre-installed in React Native. However, it was taken out of the core and added to the library for React Native Community. You must now install the react-native-webview library in order to use it.

Create a React Native Project

We must use the React Native CLI to launch a new project in order to begin going. If you don’t want to go through the laborious installation process, you can do this with Expo.

npx react-native init ExperimentingWithWebview

Add dependencies

For npm users:

npm install react-native-webview

If you are using yarn:

yarn add react-native-webview

Native dependencies being linked

Only if you are not utilizing Expo and starting your project with the React Native CLI will you require this.

react-native link react-native-webview

For iOS and macOS

Run this command if you are using cocoapods in the ios/ or macos/ directory:

pod install

For Android

If you are using React-native-webview < 6: Please ignore.

If you are using react-native-webview ≥ 6.xx:

Make sure AndroidX is enabled in your project by editing the android/gradle.properties file.

android.useAndroidX=true

android.enableJetifier=true

The React Native CLI most likely performed this automatically.

Utilizing the React Native WebView to load inline HTML

We’ll start by loading a straightforward HTML file into the application interface. The following entries must be added to our App.js file in order to accomplish that:

1. import React, { Component } from 'react';

2. import { WebView } from 'react-native-webview';

The WebView component from the react-native-webview plugin has been imported here. As illustrated in the code below, we can now utilize this component to load HTML content:

import React, { Component } from 'react';

import { WebView } from 'react-native-webview';

class MyInlineWeb extends Component {

 render() {

   return (

     <WebView

       originWhitelist={['*']}

       source={{ html: '<h1>This is a static HTML source!</h1>' }}

     />

   );

 }

}

We have defined the MyInlineWeb class component here. The render() function of this class component renders the WebView component. The HTML content is set up as the WebView component’s prop source. As a result, as seen in the emulator snapshot below, we can see the HTML content rendered in the application interface:

Loading remote URL

We will now load the whole website’s content from the remote URL rather than just plain HTML. To accomplish that, we must add an optional uri to the WebView component’s source prop as shown in the code below:

import React, { Component } from 'react';

import { WebView } from 'react-native-webview';

class MyWeb extends Component {

 render() {

   return <WebView source={{ uri: 'https://instamobile.io/blog' }} />;

 }

}

As a result, the complete website will open in the app’s webview, as demonstrated in the following screenshot:

Enhancing the React Native Webview with a Loader

The whole HTML content on the web page may take some time to load when accessing the URL using the WebView component. So, until the web page loads, we’ll display a loading indicator to illustrate the delay. As seen in the code below, we must import the ActivityIndicator component from the react-native package to accomplish this.

import { Text, View, StyleSheet, ActivityIndicator } from 'react-native';

This ActiviIndicator component must now be used in our project. To accomplish this, we will write a function called LoadingIndicatorView() that will return the value of the ActivityIndicator, as demonstrated in the following code:

import * as React from 'react';

import { Text, View, StyleSheet,ActivityIndicator } from 'react-native';

import { WebView } from 'react-native-webview';

import { Card } from 'react-native-paper';

function LoadingIndicatorView() {

   return <ActivityIndicator color='#009b88' size='large' />

 }

export default function App() {

 return (

  <WebView

       originWhitelist={['*']}

       source={{ uri: 'https://instamobile.io/blog' }} 

       renderLoading={this.LoadingIndicatorView}

       startInLoadingState={true}

     />

 );

Using color and size props, we have utilized Activity Indicator in this instance. Then, on the render Loading prop of the WebView component, we called the Loading Indicator View function. As a result, we are able to show a loading indicator until the web page completely loads. We can see that this too makes use of the startInLoadingState attribute. The Web View must render the loading view on initial load if this boolean value is true. For the render Loading rack to function, this holder needs to be set to true. As a result, in our simulator simulation, we obtain the following results:

CONCLUSION

In this post, we gave you an introduction to react native and demonstrated how to make a react native project, how to use react native webview to load HTML inline, and how to add a loading engine.

In order to produce user-friendly eCommerce websites, CMS websites, and web apps, ONEXTDIGITAL uses a group of experts and competent developers who collaborate closely with designers. Contact us and we’ll help you figure it out if you’re experiencing problems with this experience or want to know more.