Add iOS 10 compatibility header padding

react/features/base/react/components/native/Header.js

@@ -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;
+    }
+
 }

react/features/base/react/components/native/styles.js

@@ -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;