React Native – WebView


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 inline.

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.


React Native WebView

Advertisements

”;

Leave a Reply

Your email address will not be published. Required fields are marked *