Use SafeAreaView with react-native-webview

Question

How can we use SafeAreaView in order to display a WebView? I tried this way :

import React from 'react';
import {SafeAreaView, StatusBar} from 'react-native';
import {WebView} from 'react-native-webview';

class ChaineYT extends React.Component {

  render() {
    return (
      <SafeAreaView>
        <WebView
          source={{uri: "someURL"}}
        />
      </SafeAreaView>
    )
  }
}

export default ChaineYT

But it's rendering a white page.

Thanks

Answer 1

You didn't specify the height and width of SafeAreaView.

Change <SafeAreaView> to <SafeAreaView style={{ flex:1 }}>

Official documentation clearly says:

A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.