Can I use WebView inside a View (react native)?

Question

I am trying to use WebView Component inside View component, for a react native application I am working on. When I embed WebView inside View, I am not seeing the content I am displaying in WebView. Is this the expected behavior with react native?

Answer 1

You should specify a width and height for your webview. Do it as follow:

render() {
return (
  <WebView
    source={{uri: 'https://github.com/facebook/react-native'}}
    style={{flex: 1}} // OR style={{height: 100, width: 100}}
  />
);}

Answer 2

When it's nested inside a View component, you need to set both view and webview flex to 1.

eg. -

<View style={{flex:1}}>
    <WebView
      source={{ uri: url }}
      style={{flex:1}}
      />
</View>

Answer 3

Please use following code:

import React from 'react';
import {View, ImageBackground, StyleSheet} from 'react-native';
import { WebView } from 'react-native-webview';

export default class WebViewScreen extends React.Component {
    render(){
        return(
            <View style={styles.container}>
                <WebView 
                    source= {{uri: 'https://www.google.com'}}
                    style= {styles.loginWebView}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'stretch',
    },
    loginWebView: {
        flex: 1,
        marginTop: 30,
        marginBottom: 20
    }
});

this code is working absolutely fine for me,

In all above solutions I observed that everyone is suggesting to add flex: 1 to your webView style.

Yes it is correct but in case you want to nest WebView inside View then you need to specify styles of your parent view precisely.

So, I set justifyContent: 'flex-start' so that vertically WebView will start from top of my screen and alignItems: 'stretch' so that WebView will take all available in horizontal direction

As we use justifyContent to specify primary axis alignment and alignItems to specify secondary axis alignment and default flexDirection is column.

To get more information on how to install react-native-webview please refer following link: https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md

Answer 4

For WebView in View, We can use this code for .js and .tsx files in React-native.

import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';

export default class WebViewExample extends Component {
 render() {
  return (
   <View style={{height:"100%" , width:"100%"}}>
     <WebView source={{ uri: 'https://facebook.github.io/react-native/' }}/>
   </View>
   );
  }
}

Answer 5

Can use something like this

render() {
let {url} = this.props.webDetail;

return (
  <View style={styles.container}>
    {this.renderSpinner()}
    <WebView onLoad={this.onWebLoad.bind(this)}
      source={{ uri: url }}
      scalesPageToFit={true}
      />
  </View>
 );
}

Answer 6

Try this to open a pdf file. Li'l out of the box but I am sure it would help someone :)

{
    Platform.OS === "android" ? 
        <WebView  
            source={{uri:'http://docs.google.com/gview?embedded=true&url=https://your PDF Link'}}
            style={{flex: 1}}
        />
        :
        <WebView
            source={{uri:'https:your PDF Link'}}
            style={{flex: 1}}
        />
}