Add iOS 10 compatibility header padding
This commit is contained in:
parent
7cd40353e7
commit
3cf9fd439b
|
@ -1,9 +1,14 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
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}
|
* The type of the React {@code Component} props of {@link ScreenHeader}
|
||||||
|
@ -25,6 +30,19 @@ type Props = {
|
||||||
* A generic screen header component.
|
* A generic screen header component.
|
||||||
*/
|
*/
|
||||||
export default class Header extends Component<Props> {
|
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()}.
|
* Implements React's {@link Component#render()}.
|
||||||
*
|
*
|
||||||
|
@ -33,7 +51,10 @@ export default class Header extends Component<Props> {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
style = { styles.headerOverlay } >
|
style = { [
|
||||||
|
styles.headerOverlay,
|
||||||
|
this._getIOS10CompatiblePadding()
|
||||||
|
] } >
|
||||||
<StatusBar
|
<StatusBar
|
||||||
backgroundColor = { STATUSBAR_COLOR }
|
backgroundColor = { STATUSBAR_COLOR }
|
||||||
barStyle = 'light-content'
|
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.
|
// Header height is from iOS guidelines. Also, this looks good.
|
||||||
const HEADER_HEIGHT = 44;
|
const HEADER_HEIGHT = 44;
|
||||||
const HEADER_PADDING = BoxModel.padding;
|
|
||||||
|
|
||||||
|
export const HEADER_PADDING = BoxModel.padding;
|
||||||
export const STATUSBAR_COLOR = ColorPalette.blueHighlight;
|
export const STATUSBAR_COLOR = ColorPalette.blueHighlight;
|
||||||
export const SIDEBAR_WIDTH = 250;
|
export const SIDEBAR_WIDTH = 250;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue