React Native WebView

React Native WebView is a component which is used to load web content or web page. The WebView component imports form core react-native library. Now, it is replaced from the built-in core react-native, and placed in react-native-webview library. WebView is the common component used in both android & iOS applications in react native to Open – Embed online website webpage using custom HTTP URL. Developer can modify the WebView settings according to their requirement.

NOTE : The React Native WebView recommended importing react-native-webview or react-native-community.

Types of WebView contents:

Display HTML code as a string: The HTML string code is passed into html prop inside source property.

<WebView  
    source={{html: '<h1>Hello Skptricks </h1>'}}  
/>  

Display the internal web page: Create an internal web page inside a directory and pass its full path in source property.

<WebView  
    source={require("./resources/index.html")}  
/> 

Display the remote web page: A remote web page is loaded using uri tag with source property.

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

React Native WebView Example :

Lets see the complete source code App.js component that helps to use webview component in react native application.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.

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

Step 4 : Use the disableYellowBox variable to disable the warning message.

console.disableYellowBox = true;

Step 5: Implement render method inside the App class and wrapped the below layout design inside the root View component. 

render() {
    return (
      <View style={styles.container} >
        <WebView
          source={{ uri: 'https://www.skptricks.com' }}
        />
      </View>
    );
  }

Step 6: Apply the below style sheet design. 

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
    },
  });

Complete Source Code for App.js 

Lets see the complete source code that helps to create webview component in react native application.

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

console.disableYellowBox = true;

export default class App extends Component {
  
  render() {
    return (
      <View style={styles.container} >
        <WebView
          source={{ uri: 'https://www.skptricks.com' }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
    },
  });

Screenshot : 

This is all about React Native WebView. Hope you like this example.