state-bar in webview

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('') === 0) {
        const regex = /#access_token=(.+)/;
        let accessToken = navState.url.match(regex)[1];
    render() {
        const url = 'mysite_url';
        return (
            <View style={{paddingTop: 0, flex:1}}>
                  uri: url,
                style={{ flex: 1 }}

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.