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.
1
2
3
|
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.
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
return (
<WebView
style={styles.WebViewStyle}
source={{uri: ‘https://Google.com’}}
javaScriptEnabled={true}
domStorageEnabled={true} />
);
}
|
3. Create custom style sheet for WebView.
1
2
3
4
5
6
7
8
9
10
11
|
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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
import React, { Component } from ‘react’;
import { StyleSheet, WebView, Platform} from ‘react-native’;
export default class MainActivity extends Component {
render() {
return (
<WebView
style={styles.WebViewStyle}
source={{uri: ‘https://Google.com’}}
javaScriptEnabled={true}
domStorageEnabled={true} />
);
}
}
const styles = StyleSheet.create(
{
WebViewStyle:
{
justifyContent: ‘center’,
alignItems: ‘center’,
flex:1,
marginTop: (Platform.OS) === ‘ios’ ? 20 : 0
}
});
|
Screenshot in android mobile app :
Screenshot in iOS Mobile app :