React native non-overlapping status bar

This is expected behavior. One solution is to add padding to your top-level view that is equal to the current height of the status bar, or have StatusBarView

the same height as the status bar.

Refer to this plugin https://github.com/jgkim/react-native-status-bar-size to listen for status bar height changes.

For example,

import _ from 'lodash';
import React, { Component } from 'react';
import { View, StatusBar} from 'react-native';
import StatusBarSizeIOS from 'react-native-status-bar-size';

const STATUS_BAR_EXTRA_PADDING = 2;
const DEFAULT_STATUS_BAR_HEIGHT = 10;

class StatusBarView extends Component {
  state = { 
    statusBarHeight: _.get(StatusBarSizeIOS, 'currentHeight', DEFAULT_STATUS_BAR_HEIGHT);
  }  

  _handleStatusBarSizeDidChange = (statusBarHeight) => this.setState({ statusBarHeight })

  componentDidMount() {
    StatusBarSizeIOS.addEventListener('didChange', this._handleStatusBarSizeDidChange);
  }

  render() {
    return (
      <View
        style={{
          height: this.state.statusBarHeight + STATUS_BAR_EXTRA_PADDING,
        }}
      >
        <StatusBar {...this.props} />
      </View>
    );
  }
}

export default StatusBarView;

      

        
        
        
      

    

Now in your screens, you can do something like

import StatusBarView from '{view_path}';
...
render() {
  return (
    <View>
       <StatusBarView barStyle="default" />
       <View>{rest of the view}</View>
    </View>
  );
}