React Native - WebView

In this chapter, we will learn how to use WebView. It is used when you want to render web page to your mobile app inpne.

Using WebView

The HomeContainer will be a container component.

App.js

import React, { Component } from  react 
import WebViewExample from  ./web_view_example.js 

const App = () => {
   return (
      <WebViewExample/>
   )
}
export default App;

Let us create a new file called WebViewExample.js inside the src/components/home folder.

web_view_example.js

import React, { Component } from  react 
import { View, WebView, StyleSheet }

from  react-native 
const WebViewExample = () => {
   return (
      <View style = {styles.container}>
         <WebView
         source = {{ uri:
          https://www.google.com/?gws_rd=cr,ssl&ei=SICcV9_EFqqk6ASA3ZaABA#q=tutorialspoint  }}
         />
      </View>
   )
}
export default WebViewExample;

const styles = StyleSheet.create({
   container: {
      height: 350,
   }
})

The above program will generate the following output.