Fix iPhone X support

Author: brentvatne

README.md

@@ -1,7 +1,7 @@
 # react-navigation-addon-search-layout
 
 Note: this currently depends on the Expo environment being present. I
-may fix this in the future, a PR is welcome though.  More documentation
-coming..
+may fix this in the future, a PR is welcome though. It also only
+explicitly supports portrait mode, ymmv with landscape.
 
 [Try it on Snack](https://snack.expo.io/HJXlZ7TuW)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-addon-search-layout",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "main": "index.js",
   "license": "MIT",
   "dependencies": {

src/Header.js

@@ -1,14 +1,21 @@
 import React from 'react';
-import { Animated, Platform, StyleSheet, View } from 'react-native';
+import { Animated, Dimensions, Platform, StyleSheet, View } from 'react-native';
 import { withNavigation, HeaderBackButton } from 'react-navigation';
 
+const X_WIDTH = 375;
+const X_HEIGHT = 812;
+const { height: D_HEIGHT, width: D_WIDTH } = Dimensions.get('window');
+const isIPhoneX =
+  Platform.OS === 'ios' && (D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH);
+
+const NOTCH_HEIGHT = isIPhoneX ? 20 : 0;
 const APPBAR_HEIGHT = Platform.OS === 'ios' ? 50 : 56;
 const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
 const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
 
 @withNavigation
 export default class Header extends React.PureComponent {
-  static HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
+  static HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT + NOTCH_HEIGHT;
 
   _navigateBack = () => {
     this.props.navigation.goBack(null);
@@ -71,8 +78,8 @@ if (Platform.OS === 'ios') {
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#fff',
-    paddingTop: STATUSBAR_HEIGHT,
-    height: STATUSBAR_HEIGHT + APPBAR_HEIGHT,
+    paddingTop: STATUSBAR_HEIGHT + NOTCH_HEIGHT,
+    height: STATUSBAR_HEIGHT + APPBAR_HEIGHT + NOTCH_HEIGHT,
     ...platformContainerStyles,
   },
   appBar: {