Add iOS 10 compatibility header padding
This commit is contained in:
parent
7cd40353e7
commit
3cf9fd439b
|
@ -1,9 +1,14 @@
|
|||
// @flow
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { SafeAreaView, StatusBar, View } from 'react-native';
|
||||
import { Platform, SafeAreaView, StatusBar, View } from 'react-native';
|
||||
|
||||
import styles, { STATUSBAR_COLOR } from './styles';
|
||||
import styles, { HEADER_PADDING, STATUSBAR_COLOR } from './styles';
|
||||
|
||||
/**
|
||||
* Compatibility header padding size for iOS 10 (and older) devices.
|
||||
*/
|
||||
const IOS10_PADDING = 20;
|
||||
|
||||
/**
|
||||
* The type of the React {@code Component} props of {@link ScreenHeader}
|
||||
|
@ -25,6 +30,19 @@ type Props = {
|
|||
* A generic screen header component.
|
||||
*/
|
||||
export default class Header extends Component<Props> {
|
||||
|
||||
/**
|
||||
* Constructor of the Header component.
|
||||
*
|
||||
* @inheritdoc
|
||||
*/
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this._getIOS10CompatiblePadding
|
||||
= this._getIOS10CompatiblePadding.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
*
|
||||
|
@ -33,7 +51,10 @@ export default class Header extends Component<Props> {
|
|||
render() {
|
||||
return (
|
||||
<View
|
||||
style = { styles.headerOverlay } >
|
||||
style = { [
|
||||
styles.headerOverlay,
|
||||
this._getIOS10CompatiblePadding()
|
||||
] } >
|
||||
<StatusBar
|
||||
backgroundColor = { STATUSBAR_COLOR }
|
||||
barStyle = 'light-content'
|
||||
|
@ -53,4 +74,30 @@ export default class Header extends Component<Props> {
|
|||
);
|
||||
}
|
||||
|
||||
_getIOS10CompatiblePadding: () => Object;
|
||||
|
||||
/**
|
||||
* Adds a padding for iOS 10 (and older) devices to avoid clipping
|
||||
* with the status bar.
|
||||
* Note: This is a workaround for iOS 10 (and older) devices only to fix
|
||||
* usability, but it doesn't take orientation into account, so unnecessary
|
||||
* padding is rendered in some cases.
|
||||
*
|
||||
* @private
|
||||
* @returns {Object}
|
||||
*/
|
||||
_getIOS10CompatiblePadding() {
|
||||
if (Platform.OS === 'ios') {
|
||||
const majorVersionIOS = parseInt(Platform.Version, 10);
|
||||
|
||||
if (majorVersionIOS <= 10) {
|
||||
return {
|
||||
paddingTop: HEADER_PADDING + IOS10_PADDING
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -8,8 +8,8 @@ const HEADER_COLOR = ColorPalette.blue;
|
|||
|
||||
// Header height is from iOS guidelines. Also, this looks good.
|
||||
const HEADER_HEIGHT = 44;
|
||||
const HEADER_PADDING = BoxModel.padding;
|
||||
|
||||
export const HEADER_PADDING = BoxModel.padding;
|
||||
export const STATUSBAR_COLOR = ColorPalette.blueHighlight;
|
||||
export const SIDEBAR_WIDTH = 250;
|
||||
|
||||
|
|
Loading…
Reference in New Issue