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 di

Answer 1

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

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