diff --git a/src/ExNavigationBar.js b/src/ExNavigationBar.js
index 7ef256a..7b99e1a 100644
--- a/src/ExNavigationBar.js
+++ b/src/ExNavigationBar.js
@@ -8,6 +8,7 @@ import {
   TouchableOpacity,
   View,
   ViewPropTypes,
+  Dimensions,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import PureComponent from './utils/PureComponent';
@@ -27,9 +28,13 @@ if (expoModule) {
 // Exponent draws under the status bar on Android, but vanilla React Native does not.
 // So we need to factor the status bar height in with Exponent but can ignore it with
 // vanilla React Native
-const STATUSBAR_HEIGHT = Platform.OS === 'ios'
-  ? 20
-  : global.__exponent ? 24 : 0;
+const dimentions = Dimensions.get('window');
+const iphoneX =
+  (dimentions.width === 375 || dimentions.width === 812) &&
+  (dimentions.height === 375 || dimentions.height === 812);
+const STATUSBAR_IOS_HEIGHT = iphoneX ? 50 : 20;
+const STATUSBAR_HEIGHT =
+  Platform.OS === 'ios' ? STATUSBAR_IOS_HEIGHT : global.__exponent ? 24 : 0;
 
 const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 55;
 const BACKGROUND_COLOR = Platform.OS === 'ios' ? '#EFEFF2' : '#FFF';
diff --git a/src/ExNavigationStack.js b/src/ExNavigationStack.js
index f78e158..cef4a0d 100644
--- a/src/ExNavigationStack.js
+++ b/src/ExNavigationStack.js
@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Animated, Platform, StyleSheet, View } from 'react-native';
+import { Animated, Platform, StyleSheet, View, Dimensions } from 'react-native';
 import PropTypes from 'prop-types';
 import NavigationExperimental from './navigation-experimental';
 
@@ -46,7 +46,10 @@ const DEFAULT_ROUTE_CONFIG: ExNavigationConfig = {
     : NavigationStyles.Fade,
 };
 
-const DEFAULT_STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 25;
+const dimentions =  Dimensions.get('window')
+const iphoneX = (dimentions.width === 375 || dimentions.width === 812) && (dimentions.height === 375 || dimentions.height === 812);
+const STATUSBAR_IOS_HEIGHT = (iphoneX) ? 50 : 20;
+const DEFAULT_STATUSBAR_HEIGHT = Platform.OS === 'ios' ? STATUSBAR_IOS_HEIGHT : 25;
 const STATUSBAR_HEIGHT = Platform.OS === 'ios'
   ? DEFAULT_STATUSBAR_HEIGHT
   : global.__exponent ? DEFAULT_STATUSBAR_HEIGHT : 0;
@@ -813,6 +816,11 @@ class ExNavigationStack extends PureComponent<any, Props, State> {
         customHeight += route.getBarHeight();
         hasCustomHeight = true;
       }
+      
+      if (route.params.hideNavigationBar) {
+        customHeight = 0;
+        hasCustomHeight = true;
+      }
 
       if (hasCustomHeight) {
         style = ([...style, { marginTop: customHeight }]: Array<
diff --git a/src/tab/ExNavigationTabBar.js b/src/tab/ExNavigationTabBar.js
index 8176f41..831c1f5 100644
--- a/src/tab/ExNavigationTabBar.js
+++ b/src/tab/ExNavigationTabBar.js
@@ -6,6 +6,8 @@ import {
   TouchableNativeFeedback,
   Text,
   View,
+  Dimensions,
+  Platform,
 } from 'react-native';
 
 import { unsupportedNativeView } from '../ExUnsupportedNativeView';
@@ -22,7 +24,12 @@ if (expoModule) {
 
 import TabBadge from '../ExNavigationBadge';
 
-const DEFAULT_TAB_BAR_HEIGHT = 56;
+const dimentions = Dimensions.get('window');
+const iphoneX =
+  (dimentions.width === 375 || dimentions.width === 812) &&
+  (dimentions.height === 375 || dimentions.height === 812);
+
+const DEFAULT_TAB_BAR_HEIGHT = Platform.OS === 'ios' && iphoneX ? 80 : 49;
 
 export default class ExNavigationTabBar extends React.Component {
   static defaultHeight = DEFAULT_TAB_BAR_HEIGHT;
@@ -154,6 +161,8 @@ const styles = StyleSheet.create({
   itemContainer: {
     flex: 1,
     flexDirection: 'row',
+    alignItems: 'flex-start',
+    paddingTop: 1,
   },
   tabItem: {
     flex: 1,