Sync changes from expo monorepo

expo · Dec 19, 2017 · 47ab675 · 47ab675
2 parents 98b1c01 + f787f89
commit 47ab675
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@expo/ex-navigation",
-  "version": "3.1.0",
+  "version": "4.1.0",
   "description": "Route-centric navigation library for React Native.",
   "main": "./src/ExNavigation.js",
   "files": [

diff --git a/src/ExNavigationBar.js b/src/ExNavigationBar.js
@@ -14,6 +14,8 @@ import PureComponent from './utils/PureComponent';
 import { unsupportedNativeView } from './ExUnsupportedNativeView';
 import { withNavigation } from './ExNavigationComponents';
 
+import isIPhoneX from './utils/isIPhoneX';
+
 let BlurView;
 let expoModule = global.__exponent || global.__expo;
 if (expoModule) {
@@ -27,18 +29,19 @@ 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 STATUSBAR_HEIGHT =
+  Platform.OS === 'ios' ? 20 : global.__exponent ? 24 : 0;
 
 const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 55;
 const BACKGROUND_COLOR = Platform.OS === 'ios' ? '#EFEFF2' : '#FFF';
 const BORDER_BOTTOM_COLOR = 'rgba(0, 0, 0, .15)';
-const BORDER_BOTTOM_WIDTH = Platform.OS === 'ios'
-  ? StyleSheet.hairlineWidth
-  : 0;
+const BORDER_BOTTOM_WIDTH =
+  Platform.OS === 'ios' ? StyleSheet.hairlineWidth : 0;
 const BACK_BUTTON_HIT_SLOP = { top: 0, bottom: 0, left: 0, right: 30 };
 
+const IPHONE_X_EXTRA_HEIGHT = isIPhoneX ? 20 : 0;
+const IPHONE_X_TOP_OFFSET = isIPhoneX ? 30 : 0;
+
 class ExNavigationBarTitle extends PureComponent {
   render() {
     const { children, style, textStyle, tintColor } = this.props;
@@ -85,7 +88,8 @@ const titleStyles = StyleSheet.create({
   },
 });
 
-@withNavigation class ExNavigationBarBackButton extends PureComponent {
+@withNavigation
+class ExNavigationBarBackButton extends PureComponent {
   render() {
     const { tintColor } = this.props;
 
@@ -168,7 +172,11 @@ export default class ExNavigationBar extends PureComponent {
     renderTitleComponent(props) {
       const { navigationState } = props;
       const title = String(navigationState.title || '');
-      return <ExNavigationBarTitle>{title}</ExNavigationBarTitle>;
+      return (
+        <ExNavigationBarTitle>
+          {title}
+        </ExNavigationBarTitle>
+      );
     },
     barHeight: APPBAR_HEIGHT,
     statusBarHeight: STATUSBAR_HEIGHT,
@@ -201,8 +209,8 @@ export default class ExNavigationBar extends PureComponent {
 
     if (this.props.navigationState.index !== nextProps.navigationState.index) {
       this.setState({
-        delta: nextProps.navigationState.index -
-          this.props.navigationState.index,
+        delta:
+          nextProps.navigationState.index - this.props.navigationState.index,
       });
     } else {
       this.setState({
@@ -229,7 +237,8 @@ export default class ExNavigationBar extends PureComponent {
     });
 
     // TODO: this should come from the latest scene config
-    const height = this.props.barHeight + this.props.statusBarHeight;
+    const height =
+      this.props.barHeight + this.props.statusBarHeight + IPHONE_X_EXTRA_HEIGHT;
 
     let styleFromRouteConfig = this.props.latestRoute.getBarStyle();
     let isTranslucent = !!this.props.latestRoute.getTranslucent();
@@ -284,7 +293,7 @@ export default class ExNavigationBar extends PureComponent {
           <View
             style={[
               styles.appbarInnerContainer,
-              { top: this.props.statusBarHeight },
+              { top: this.props.statusBarHeight + IPHONE_X_EXTRA_HEIGHT },
             ]}>
             {titleComponents}
             {leftComponents}
@@ -386,8 +395,10 @@ export default class ExNavigationBar extends PureComponent {
   }
 }
 
-ExNavigationBar.DEFAULT_HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
-ExNavigationBar.DEFAULT_HEIGHT_WITHOUT_STATUS_BAR = APPBAR_HEIGHT;
+ExNavigationBar.DEFAULT_HEIGHT =
+  APPBAR_HEIGHT + STATUSBAR_HEIGHT + IPHONE_X_EXTRA_HEIGHT;
+ExNavigationBar.DEFAULT_HEIGHT_WITHOUT_STATUS_BAR =
+  APPBAR_HEIGHT + IPHONE_X_EXTRA_HEIGHT;
 ExNavigationBar.DEFAULT_BACKGROUND_COLOR = BACKGROUND_COLOR;
 ExNavigationBar.DEFAULT_BORDER_BOTTOM_COLOR = BORDER_BOTTOM_COLOR;
 ExNavigationBar.DEFAULT_BORDER_BOTTOM_WIDTH = BORDER_BOTTOM_WIDTH;

diff --git a/src/tab/ExNavigationTab.js b/src/tab/ExNavigationTab.js
@@ -17,9 +17,13 @@ import ExNavigatorContext from '../ExNavigatorContext';
 import ExNavigationTabBar from './ExNavigationTabBar';
 import ExNavigationTabItem from './ExNavigationTabItem';
 import { createNavigatorComponent } from '../ExNavigationComponents';
+import isIPhoneX from '../utils/isIPhoneX';
 
 import type ExNavigationContext from '../ExNavigationContext';
 
+const IPHONE_X_EXTRA_HEIGHT = isIPhoneX ? 38 : 0;
+const IPHONE_X_BOTTOM_OFFSET = isIPhoneX ? 28 : 0;
+
 export class ExNavigationTabContext extends ExNavigatorContext {
   type = 'tab';
 
@@ -94,7 +98,13 @@ class ExNavigationTab extends PureComponent<any, Props, State> {
 
   static defaultProps = {
     renderTabBar(props) {
-      return <ExNavigationTabBar {...props} />;
+      return (
+        <ExNavigationTabBar
+          {...props}
+          extraHeight={IPHONE_X_EXTRA_HEIGHT}
+          bottomOffset={IPHONE_X_BOTTOM_OFFSET}
+        />
+      );
     },
   };
 
@@ -153,8 +163,9 @@ class ExNavigationTab extends PureComponent<any, Props, State> {
     const tabBar = this.props.renderTabBar(tabBarProps);
     const TabBarComponent = tabBar.type;
     // Get the tab bar's height from a static property on the class
-    const tabBarHeight =
-      this.props.tabBarHeight || TabBarComponent.defaultHeight || 0;
+    let tabBarHeight =
+      (this.props.tabBarHeight || TabBarComponent.defaultHeight || 0) +
+      IPHONE_X_EXTRA_HEIGHT;
     const isTranslucent = this.props.translucent;
 
     return (
@@ -302,7 +313,7 @@ class ExNavigationTab extends PureComponent<any, Props, State> {
           let defaultRouteConfig = child.props.defaultRouteConfig || {};
           defaultRouteConfig = {
             ...defaultRouteConfig,
-            __tabBarInset: this.props.tabBarHeight,
+            __tabBarInset: this.props.tabBarHeight + IPHONE_X_EXTRA_HEIGHT,
           };
           tabItem.element = cloneReferencedElement(child, {
             ...child.props,

diff --git a/src/tab/ExNavigationTabBar.js b/src/tab/ExNavigationTabBar.js
@@ -28,9 +28,12 @@ export default class ExNavigationTabBar extends React.Component {
   static defaultHeight = DEFAULT_TAB_BAR_HEIGHT;
 
   render() {
-    const height = this.props.height || DEFAULT_TAB_BAR_HEIGHT;
+    const height =
+      (this.props.height || DEFAULT_TAB_BAR_HEIGHT) +
+      (this.props.extraHeight || 0);
     let isTranslucent = this.props.translucent;
     let backgroundColor = isTranslucent ? 'rgba(255,255,255,0.5)' : '#fefefe';
+    let paddingBottom = this.props.bottomOffset || 0;
 
     return (
       <View style={[styles.container, { height }]}>
@@ -40,7 +43,7 @@ export default class ExNavigationTabBar extends React.Component {
         <View
           style={[
             styles.innerContainer,
-            { backgroundColor },
+            { backgroundColor, paddingBottom },
             this.props.style,
           ]}>
           <View style={styles.itemContainer}>
@@ -65,7 +68,11 @@ export default class ExNavigationTabBar extends React.Component {
         if (renderTitle) {
           title = renderTitle(isSelected, item.title, index);
         } else {
-          title = <Text>{item.title}</Text>;
+          title = (
+            <Text>
+              {item.title}
+            </Text>
+          );
         }
       }
 
@@ -78,7 +85,11 @@ export default class ExNavigationTabBar extends React.Component {
       if (renderBadge) {
         badge = renderBadge(isSelected, item.title, index);
       } else if (badgeText) {
-        badge = <TabBadge style={styles.badge}>{badgeText}</TabBadge>;
+        badge = (
+          <TabBadge style={styles.badge}>
+            {badgeText}
+          </TabBadge>
+        );
       }
 
       if (item.showsTouches) {

diff --git a/src/utils/isIPhoneX.js b/src/utils/isIPhoneX.js
@@ -0,0 +1,4 @@
+import { Platform, Dimensions } from 'react-native';
+const { width, height } = Dimensions.get('window');
+const isIPhoneX = Platform.OS === 'ios' && width === 375 && height === 812;
+export default isIPhoneX;