react-navigation statusbar height example

example.js

export default class App extends PureComponent {
	state = {
		statusBarHeight: Platform.OS === 'android'
			? StatusBar.currentHeight || (Platform.Version < 23 ? 25 : 24)
			: 0,
	};

	render() {
		const {styles} = this;
		const {statusBarHeight} = this.state;

		return (
			<View style={styles.root}>
				<StatusBar
					backgroundColor='rgba(0, 0, 0, 0.2)'
					translucent />
				<Navigator screenProps={{statusBarHeight}} />
			</View>
		);
	}
}

const Navigator = StackNavigator({
	// ...
}, {
	navigationOptions: ({screenProps: {statusBarHeight}, navigationOptions}) => ({
		...navigationOptions,
		headerStyle: {
			paddingTop: statusBarHeight,
			height: Header.HEIGHT + statusBarHeight,
			...navigationOptions.headerStyle,
		},
	}),
});