state-bar in webview

How to / Third Party Tooling
1

I have my mobile website. And I also needed app of my site. So I installed expo days ago to make webview with react.

import React, { Component } from 'react';
import { StyleSheet, Text, View,WebView } from 'react-native';
import { Button } from 'react-native';

export default class App extends Component {
    onNavigationStateChange = navState => {
      if (navState.url.indexOf('https://www.google.com') === 0) {
        const regex = /#access_token=(.+)/;
        let accessToken = navState.url.match(regex)[1];
        console.log(accessToken);
      }
    };
    render() {
        const url = 'mysite_url';
        return (
            <View style={{paddingTop: 0, flex:1}}>
                <WebView
                source={{
                  uri: url,
                }}
                onNavigationStateChange={this.onNavigationStateChange}
                startInLoadingState
                scalesPageToFit
                javaScriptEnabled
                style={{ flex: 1 }}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

This code works good. but I have a problem.

The state bar of android covers my logo. So I set ‘padding-top:20’. this works good in my phone. But I don’t know other phone’s stats-bar setting. How can I handle this problem?

Can I get some tips? Thanks.