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




Frequently Asked Questions

+
Ans: React Native - View view more..
+
Ans: React Native - Running Android view more..
+
Ans: React Native - Running IOS view more..
+
Ans: React Native - WebView view more..
+
Ans: React Native - Modal view more..
+
Ans: React Native - ActivityIndicator view more..
+
Ans: React Native - Picker view more..
+
Ans: React Native - Status Bar view more..
+
Ans: React Native - Switch view more..
+
Ans: React Native - Text view more..
+
Ans: React Native - Alert view more..
+
Ans: React Native - Geolocation view more..
+
Ans: React Native - AsyncStorage view more..




Rating - NAN/5
528 views

Advertisements