React Native - WebView


Advertisements


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

Using WebView

The HomeContainer will be a container component.

src/components/home/HomeContainer.js

import React, { Component } from 'react'
import WebViewExample from './WebViewExample'

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

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

src/components/home/WebViewExample.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.

React Native WebView

Advertisements