diff --git a/README.md b/README.md
index 2bd4a1c..baf1d8a 100644
--- a/README.md
+++ b/README.md
@@ -71,6 +71,7 @@ That's it, you're ready to go!
   - **tintColor** - (String) - Status bar tint color
   - **hideAnimation** - ('fade', 'slide', 'none') - Type of statusBar hide animation
   - **showAnimation** - ('fade', 'slide', 'none') - Type of statusBar show animation
+  - **iOSHeight** - (Boolean)
 - **leftButton / rightButton** - (Object, React Element) - Either plain object with configuration, or React Element which will be used as a custom left/right button element. Configuration object has following keys:
   - **title** - (String) - Button's title
   - **tintColor** - (String) - Button's text color
diff --git a/index.js b/index.js
index d132036..2126d86 100644
--- a/index.js
+++ b/index.js
@@ -4,6 +4,7 @@ import {
   Text,
   View,
   Platform,
+  DeviceInfo,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import ViewPropTypes from './lib';
@@ -31,6 +32,7 @@ const StatusBarShape = {
   tintColor: PropTypes.string,
   hideAnimation: PropTypes.oneOf(['fade', 'slide', 'none']),
   showAnimation: PropTypes.oneOf(['fade', 'slide', 'none']),
+  iOSHeight: PropTypes.bool,
 };
 
 function getButtonElement(data, style) {
@@ -59,7 +61,8 @@ function getTitleElement(data) {
 
   return (
     <View style={styles.navBarTitleContainer}>
-      <Text ellipsizeMode={data.ellipsizeMode} numberOfLines={data.numberOfLines} style={[styles.navBarTitleText, data.style, colorStyle]}>
+      <Text ellipsizeMode={data.ellipsizeMode} numberOfLines={data.numberOfLines}
+            style={[styles.navBarTitleText, data.style, colorStyle]}>
         {data.title}
       </Text>
     </View>
@@ -100,6 +103,7 @@ export default class NavigationBar extends Component {
       hidden: false,
       hideAnimation: 'slide',
       showAnimation: 'slide',
+      iOSHeight: true,
     },
     containerStyle: {},
   };
@@ -138,14 +142,15 @@ export default class NavigationBar extends Component {
     } = this.props;
     const customTintColor = tintColor ? { backgroundColor: tintColor } : null;
 
-    const customStatusBarTintColor = this.props.statusBar.tintColor ?
-      { backgroundColor: this.props.statusBar.tintColor } : null;
-
     let statusBar = null;
 
     if (Platform.OS === 'ios') {
+      const customStatusBarTintColor = this.props.statusBar.tintColor ? { backgroundColor: this.props.statusBar.tintColor } : null;
+
+      const statusBarHeight = { height: this.props.statusBar.iOSHeight ? DeviceInfo.isIPhoneX_deprecated ? 44 : 20 : 0 };
+
       statusBar = !this.props.statusBar.hidden ?
-        <View style={[styles.statusBar, customStatusBarTintColor]} /> : null;
+        <View style={[customStatusBarTintColor, statusBarHeight]}/> : null;
     }
 
     return (
diff --git a/styles.js b/styles.js
index d7f9d94..1d4ceed 100644
--- a/styles.js
+++ b/styles.js
@@ -1,13 +1,9 @@
 const NAV_BAR_HEIGHT = 44;
-const STATUS_BAR_HEIGHT = 20;
 
 module.exports = {
   navBarContainer: {
     backgroundColor: 'white',
   },
-  statusBar: {
-    height: STATUS_BAR_HEIGHT,
-  },
   navBar: {
     height: NAV_BAR_HEIGHT,
     flexDirection: 'row',