CODEWITHSUNDEEP
webviewreact-native
pg238
pg238

Reputation: 1155

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

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?

Upvotes: 27

Views: 30993

Answers (6)

JDReact
JDReact

Reputation: 21

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>
   );
  }
}

Upvotes: 2

Akshay Jadhav
Akshay Jadhav

Reputation: 145

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

Upvotes: 7

Rishav Kumar
Rishav Kumar

Reputation: 5450

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}}
        />
}

Upvotes: 1

Shivam Aditya
Shivam Aditya

Reputation: 402

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>

Upvotes: 30

Mohit Verma
Mohit Verma

Reputation: 1660

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>
 );
}

Upvotes: 1

abeikverdi
abeikverdi

Reputation: 1226

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}}
  />
);}

Upvotes: 30

Related Questions