detect iPhoneX only

app/react-native/package.json

@@ -58,6 +58,7 @@
     "postcss-loader": "^2.0.8",
     "prop-types": "^15.6.0",
     "react-native-compat": "^1.0.0",
+    "react-native-iphone-x-helper": "^1.0.1",
     "shelljs": "^0.7.8",
     "style-loader": "^0.18.2",
     "url-loader": "^0.6.2",

app/react-native/src/preview/components/OnDeviceUI/index.js

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { ifIphoneX } from 'react-native-iphone-x-helper';
 
 import {
   Animated,
   Easing,
   View,
   TouchableWithoutFeedback,
   Image,
-  Platform,
   Text,
   StatusBar,
 } from 'react-native';
@@ -73,8 +73,6 @@ export default class OnDeviceUI extends Component {
     const { stories, events, url } = this.props;
     const { menuAnimation, selectedKind, selectedStory, menuWidth } = this.state;
 
-    const StatusBarHeight = Platform.OS === 'ios' ? 30 : 0;
-
     const menuStyles = [
       style.menuContainer,
       {
@@ -86,7 +84,12 @@ export default class OnDeviceUI extends Component {
             }),
           },
         ],
-        marginTop: StatusBarHeight,
+        ...ifIphoneX(
+          {
+            paddingTop: 30,
+          },
+          {}
+        ),
       },
     ];
 
@@ -96,7 +99,12 @@ export default class OnDeviceUI extends Component {
           inputRange: [0, 1],
           outputRange: [0, menuWidth],
         }),
-        marginTop: StatusBarHeight,
+        ...ifIphoneX(
+          {
+            paddingTop: 30,
+          },
+          {}
+        ),
       },
     ];
 
@@ -113,7 +121,12 @@ export default class OnDeviceUI extends Component {
     const previewContainerStyles = [
       style.previewContainer,
       {
-        marginTop: StatusBarHeight,
+        ...ifIphoneX(
+          {
+            paddingTop: 30,
+          },
+          {}
+        ),
       },
     ];
 
@@ -132,7 +145,7 @@ export default class OnDeviceUI extends Component {
 
     return (
       <View style={style.main}>
-        <StatusBar />
+        <StatusBar hidden />
         <Animated.View style={menuSpacerStyles} />
         <View style={previewContainerStyles}>
           <Animated.View style={headerStyles}>

yarn.lock

@@ -9385,6 +9385,10 @@ react-native-compat@^1.0.0:
   dependencies:
     prop-types "^15.5.10"
 
+react-native-iphone-x-helper@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.0.1.tgz#950dbdaca66f458689a7e9697c5beb9bd53f98f2"
+
 react-native@^0.50.2:
   version "0.50.2"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.50.2.tgz#cad6152c716a4fda950f226c71affc2d494fa730"