React Native Open Web Page in App Using WebView Android iOS Tutorial

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. So in this tutorial we would going to create a react native app using WebView component and Load a webpage in WebView.

Contents in this project Open Web Page in App Using WebView Example:

1. Import StyleSheet, WebView and Platform component in your project.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, WebView, Platform} from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, WebView, Platform} from ‘react-native’;

2. Create WebView component inside render’s return block.

style : Call your custom style sheet class to modify the WebView.

source : Pass the website webpage HTTP URL using URL .

javaScriptEnabled : Enable or Disable JavaScript on your webpage. By default JavaScript is enabled.

domStorageEnabled : Enable the DOM Storage. This option works only in Android devices.

<br />
render() {</p>
<p>        return (</p>
<p>          <WebView<br />
          style={styles.WebViewStyle}<br />
          source={{uri: ‘https://Google.com’}}<br />
          javaScriptEnabled={true}<br />
          domStorageEnabled={true}  /></p>
<p>        );<br />
      }

render() {

return (

<WebView

style={styles.WebViewStyle}

source={{uri: ‘https://Google.com’}}

javaScriptEnabled={true}

domStorageEnabled={true} />

);

}

3. Create custom style sheet for WebView.

<br />
const styles = StyleSheet.create(<br />
{</p>
<p> WebViewStyle:<br />
 {<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    flex:1,<br />
    marginTop: (Platform.OS) === ‘ios’ ? 20 : 0<br />
 }<br />
});

const styles = StyleSheet.create(

{

WebViewStyle:

{

justifyContent: ‘center’,

alignItems: ‘center’,

flex:1,

marginTop: (Platform.OS) === ‘ios’ ? 20 : 0

}

});

4. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, WebView, Platform} from ‘react-native’;</p>
<p>export default class MainActivity extends Component {</p>
<p>      render() {</p>
<p>        return (</p>
<p>          <WebView<br />
          style={styles.WebViewStyle}<br />
          source={{uri: ‘https://Google.com’}}<br />
          javaScriptEnabled={true}<br />
          domStorageEnabled={true}  /></p>
<p>        );<br />
      }<br />
    }</p>
<p>const styles = StyleSheet.create(<br />
{</p>
<p> WebViewStyle:<br />
 {<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    flex:1,<br />
    marginTop: (Platform.OS) === ‘ios’ ? 20 : 0<br />
 }<br />
});