React Native – WebView || How to use WebView in React Native

React Native – WebView is a component that is used to web page or load web content. The WebView component is imports form core react-native library. Now, the React native – WebView is used from the built-in react-native-webview library instead of core react-native.

Create New project using following commands

$ npm i -g create-react-native-app
$ create-react-native-app my-project
$ cd my-project
$ npm start

Install WebView plugin :

npm install react-native-webview

Example- 1

In this example we will see How to load website in WebView in react native

App.js

import React, { Component } from 'react'  
import {  
    View,StyleSheet,AppRegistry ,SafeAreaView
} from 'react-native'  
import {WebView} from 'react-native-webview'  
  
export default class ActivityIndicatorDemo extends Component {  
    render() {  
        return (  
<SafeAreaView style={styles.container}>
            <View style = {styles.container}>  
                <WebView  
                    source = {{ uri:'http://www.codingplatform.in' }}  
                />  
            </View>  
            </SafeAreaView>
        )  
    }  
}  
const styles = StyleSheet.create({  
    container: {  
        flex: 1, 
        justifyContent:'center' 
    }  
})  
  
AppRegistry.registerComponent('App', () => ActivityIndicatorDemo)

Output:

Example- 2

how to load html string in WebView

App.js

import React, { Component } from 'react'  
import {  
    View,StyleSheet,AppRegistry ,SafeAreaView
} from 'react-native'  
import {WebView} from 'react-native-webview'  
  
export default class ActivityIndicatorDemo extends Component {  
    render() {  
        return (  
<SafeAreaView style={styles.container}>
            <View style = {styles.container}>  
                <WebView 
                    source={{html: '<h1>Hello Coding Platform</h1>'}} 
                /> 
                
                {/*   <WebView 
                    source={require("./resources/index.html")} 
                />*/}  
                
            </View>  
            </SafeAreaView>
        )  
    }  
}  
const styles = StyleSheet.create({  
    container: {  
        flex: 1, 
        justifyContent:'center' 
    }  
})  
  
AppRegistry.registerComponent('App', () => ActivityIndicatorDemo)

Output: