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 :
Hi dear, I prepared an sample app with my own html files inside it, generate an released apk and tried to publish it on play store but this app get suspended because of webview of spam affiliation. Even I made some research about it but not found any proper method to do so. Can you please suggest me the better solution to publish it.
Rohit i really have no idea about this because currently we do not have published any webview app on play store but you can raise a question in React Native’s community page on Github.