Home » React JS

WebView in React Native Applications

In this article, we are going to learn about the WebView in React Native Applications. How to use React Native WebView?
Submitted by Godwill Tetah, on February 10, 2020

As the name implies, the WebView is a component that displays web content in a native view.

For example, an application that is customized to open google.com whenever it is launched.

The WebView component existed since but was recently changed to React Native WebView.

Let's get started with installation,

Open your command prompt window in your app directory and execute this command,

    npm install --save react-native-webview

Wait for a while until the installation is complete.

Ride on and open your React Native app folder.

Section A: Displaying A Web Link (Uri)

Open App.js and type the following,

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


export default class App extends React.Component {
  render () {
  return (
    <View style={styles.container} >

  <WebView source={{ uri: 'https://go237.com' }} />

    </View>
  );
}
}
const styles = StyleSheet.create ({
container : {
    flex : 1
  }
});

Output

As you can see from the code above, we always begin by importing the component from react-native.

The Web View component takes the source attribute which is simply the web link you wish to access from your app.

Section B: Displaying Inline HTML

In this section, we will display HTML codes from within of react native application.

At this point, the source attribute will take the inline HTML value and that's where all the HTML tags will be typed.

To use the HTML web view, you must include the attribute: originWhitelist={['*']}

Below is an example of a short story in HTML.

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <WebView
        
  source={{ html: '<h1><center>I recently lost the love of my life to divorce. It has nearly devastated me. I also have many friends experiencing the same pain. I dont write much, but at 2 am, I started thinking of all the things that I could say to comfort my friends. As I was writing, I began to comfort myself also by including the things that I had read and heard about how God would want me to feel and think. The only thing that has kept me going is knowing that Jesus has a better plan for me. <br/>Shalom</center></h1>' 
          }}
          originWhitelist={['*']}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding : 50,
  },
});

Output

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question. God Bless You!