React native not overlapping statusbar - react-native

Question

Im learing React native but i dont understand how to get everything to not overlap with the status bar.
I have tried
translucent={true/flase}
hidden

Answer 1

This is expected behaviour, one solution is to add a padding to your top level view equal to current height of status bar or have a StatusBarView that has same height as the status bar.
Refer to this plugin https://github.com/jgkim/react-native-status-bar-size for listening to status bar height changes.
For e.g
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 inside your screens you could do something like
import StatusBarView from '{view_path}';
...
render() {
return (
<View>
<StatusBarView barStyle="default" />
<View>{rest of the view}</View>
</View>
);
}