React Native Open Web Page in App Using 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. In this example we are going to display and open HTTP URL content in webview component in react native application.

Open Web Page in App Using WebView In React Native :

Lets see the complete source code App.js component that helps to open webpage content in app using 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, StyleSheet, View } 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
          style={styles.WebViewStyle}
          source={{ uri: 'https://www.facebook.com' }}
          javaScriptEnabled={true}
          domStorageEnabled={true} />
      </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 open webpage in app using webview component in react native application.

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

console.disableYellowBox = true;

export default class App extends Component {

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

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

Screenshot :

This is all about React Native Open Web Page in App Using WebView. Hope you like this example.