Better notch handling

Author: brentvatne

package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-navigation-addon-search-layout",
-  "version": "0.12.4",
+  "version": "0.12.5",
   "main": "index.js",
   "license": "MIT",
   "types": "react-navigation-search-layout.d.ts",
   "dependencies": {
+    "react-native-iphone-x-helper": "^1.2.0",
     "react-native-platform-touchable": "^1.1.1"
   }
 }

src/Header.js

@@ -1,14 +1,18 @@
 import React from 'react';
 import { Animated, Dimensions, Platform, StatusBar, StyleSheet, View } from 'react-native';
 import { withNavigation, HeaderBackButton } from 'react-navigation';
+import { isIphoneX } from 'react-native-iphone-x-helper'
+
+// @todo: make this work properly when in landscape
+const hasNotch = isIphoneX();
 
 const APPBAR_HEIGHT = Platform.OS === 'ios' ? 50 : 56;
 const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
 
 // @todo: this is static and we don't know if it's visible or not on iOS.
 // need to use a more reliable and cross-platform API when one exists, like
 // LayoutContext.
-const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 25 : StatusBar.currentHeight;
+const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? (hasNotch ? 40 : 25) : StatusBar.currentHeight;
 
 @withNavigation
 export default class Header extends React.PureComponent {

yarn.lock

@@ -2,6 +2,12 @@
 # yarn lockfile v1
 
 
+react-native-iphone-x-helper@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.0.tgz#9f8a376eb00bc712115abff4420318a0063fa796"
+  integrity sha512-xIeTo4s77wwKgBZLVRIZC9tM9/PkXS46Ul76NXmvmixEb3ZwqGdQesR3zRiLMOoIdfOURB6N9bba9po7+x9Bag==
+
 react-native-platform-touchable@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/react-native-platform-touchable/-/react-native-platform-touchable-1.1.1.tgz#fde4acc65eea585d28b164d0c3716a42129a68e4"
+  integrity sha1-/eSsxl7qWF0osWTQw3FqQhKaaOQ=