React Native WebView status bar

Question

How to fix this problem on WebView?

react-webview-issue

My code :

import * as React from 'react';
import { WebView } from 'react-native-webview';

export default class App extends React.Component {
   render() {
      return <WebView source={{ uri: 'https://foo.co' }} style={{ marginTop: 50 }} />;
   }
} 

Thank you in advance!

Answer 1

Do like this:

import * as React from 'react';
import { WebView } from 'react-native-webview';

export default class App extends React.Component {
   render() {
      return <>
       <StatusBar hidden={true} />                  
       <WebView source={{ uri: 'https://foo.co' }} style=     {{marginTop: 50 }} />
       </>;
   }
}