Fix usage of status bar height

Author: brentvatne

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-addon-search-layout",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "main": "index.js",
   "license": "MIT",
   "types": "react-navigation-search-layout.d.ts",

src/Header.js

@@ -1,25 +1,95 @@
 import React from 'react';
-import { Animated, Dimensions, Platform, StatusBar, StyleSheet, View } from 'react-native';
+import {
+  Animated,
+  Dimensions,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  View,
+} from 'react-native';
 import { withNavigation, HeaderBackButton } from 'react-navigation';
-import { getStatusBarHeight } from 'react-native-safe-area-view';
-import { isIphoneX } from 'react-native-iphone-x-helper'
+import { getInset, getStatusBarHeight } from 'react-native-safe-area-view';
+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. We also don't know if it's translucent or not on Android
-// and depend on react-native-safe-area-view to tell us.
-const ANDROID_STATUS_BAR_HEIGHT = getStatusBarHeight ? getStatusBarHeight() : StatusBar.currentHeight;
-const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? (hasNotch ? 40 : 25) : ANDROID_STATUS_BAR_HEIGHT;
-
 @withNavigation
 export default class Header extends React.PureComponent {
-  static HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
+  constructor(props) {
+    super(props);
+
+    // @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. We also don't know if it's translucent or not on Android
+    // and depend on react-native-safe-area-view to tell us.
+    const ANDROID_STATUS_BAR_HEIGHT = getStatusBarHeight
+      ? getStatusBarHeight()
+      : StatusBar.currentHeight;
+    const STATUSBAR_HEIGHT =
+      Platform.OS === 'ios' ? (hasNotch ? 40 : 25) : ANDROID_STATUS_BAR_HEIGHT;
+
+    let platformContainerStyles;
+    if (Platform.OS === 'ios') {
+      platformContainerStyles = {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: '#A7A7AA',
+      };
+    } else {
+      platformContainerStyles = {
+        shadowColor: 'black',
+        shadowOpacity: 0.1,
+        shadowRadius: StyleSheet.hairlineWidth,
+        shadowOffset: {
+          height: StyleSheet.hairlineWidth,
+        },
+        elevation: 4,
+      };
+    }
+
+    this.styles = {
+      container: {
+        backgroundColor: '#fff',
+        paddingTop: STATUSBAR_HEIGHT,
+        height: STATUSBAR_HEIGHT + APPBAR_HEIGHT,
+        ...platformContainerStyles,
+      },
+      appBar: {
+        flex: 1,
+      },
+      header: {
+        flexDirection: 'row',
+      },
+      item: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'transparent',
+      },
+      title: {
+        bottom: 0,
+        left: TITLE_OFFSET,
+        right: TITLE_OFFSET,
+        top: 0,
+        position: 'absolute',
+        alignItems: Platform.OS === 'ios' ? 'center' : 'flex-start',
+      },
+      left: {
+        left: 0,
+        bottom: 0,
+        top: 0,
+        position: 'absolute',
+      },
+      right: {
+        right: 0,
+        bottom: 0,
+        top: 0,
+        position: 'absolute',
+      },
+    };
+  }
 
   _navigateBack = () => {
     this.props.navigation.goBack(null);
@@ -43,6 +113,7 @@ export default class Header extends React.PureComponent {
   };
 
   render() {
+    let { styles } = this;
     let headerStyle = {};
     if (this.props.backgroundColor) {
       headerStyle.backgroundColor = this.props.backgroundColor;
@@ -60,61 +131,3 @@ export default class Header extends React.PureComponent {
     );
   }
 }
-
-let platformContainerStyles;
-if (Platform.OS === 'ios') {
-  platformContainerStyles = {
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#A7A7AA',
-  };
-} else {
-  platformContainerStyles = {
-    shadowColor: 'black',
-    shadowOpacity: 0.1,
-    shadowRadius: StyleSheet.hairlineWidth,
-    shadowOffset: {
-      height: StyleSheet.hairlineWidth,
-    },
-    elevation: 4,
-  };
-}
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: '#fff',
-    paddingTop: STATUSBAR_HEIGHT,
-    height: STATUSBAR_HEIGHT + APPBAR_HEIGHT,
-    ...platformContainerStyles,
-  },
-  appBar: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: 'row',
-  },
-  item: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'transparent',
-  },
-  title: {
-    bottom: 0,
-    left: TITLE_OFFSET,
-    right: TITLE_OFFSET,
-    top: 0,
-    position: 'absolute',
-    alignItems: Platform.OS === 'ios' ? 'center' : 'flex-start',
-  },
-  left: {
-    left: 0,
-    bottom: 0,
-    top: 0,
-    position: 'absolute',
-  },
-  right: {
-    right: 0,
-    bottom: 0,
-    top: 0,
-    position: 'absolute',
-  },
-});