Support BlurView on top level Expo module

fbshipit-source-id: f0b4a90
expo · Mar 19, 2017 · 35b2340 · 35b2340
1 parent d016814
commit 35b2340
Show file tree

Hide file tree

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

diff --git a/src/ExNavigationBar.js b/src/ExNavigationBar.js
@@ -12,24 +12,29 @@ import PureComponent from './utils/PureComponent';
 import { unsupportedNativeView } from './ExUnsupportedNativeView';
 import { withNavigation } from './ExNavigationComponents';
 
-let Components;
-if (global.__exponent) {
-  Components = global.__exponent.Components;
+let BlurView;
+let expoModule = global.__exponent || global.__expo;
+if (expoModule) {
+  BlurView = expoModule.BlurView
+    ? expoModule.BlurView
+    : expoModule.Components.BlurView;
 } else {
-  Components = {
-    BlurView: unsupportedNativeView('BlurView'),
-  };
+  BlurView = unsupportedNativeView('BlurView');
 }
 
 // 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 };
 
 class ExNavigationBarTitle extends PureComponent {
@@ -38,11 +43,13 @@ class ExNavigationBarTitle extends PureComponent {
 
     return (
       <View style={[titleStyles.title, style]}>
-        <Text numberOfLines={1} style={[
-          titleStyles.titleText,
-          tintColor ? {color: tintColor} : null,
-          textStyle,
-        ]}>
+        <Text
+          numberOfLines={1}
+          style={[
+            titleStyles.titleText,
+            tintColor ? { color: tintColor } : null,
+            textStyle,
+          ]}>
           {children}
         </Text>
       </View>
@@ -76,19 +83,17 @@ const titleStyles = StyleSheet.create({
   },
 });
 
-@withNavigation
-class ExNavigationBarBackButton extends PureComponent {
+@withNavigation class ExNavigationBarBackButton extends PureComponent {
   render() {
     const { tintColor } = this.props;
 
     return (
       <TouchableOpacity
         onPress={this._onPress}
         hitSlop={BACK_BUTTON_HIT_SLOP}
-        style={buttonStyles.buttonContainer}
-      >
+        style={buttonStyles.buttonContainer}>
         <Image
-          style={[buttonStyles.button, tintColor ? {tintColor} : null]}
+          style={[buttonStyles.button, tintColor ? { tintColor } : null]}
           source={require('./ExNavigationAssets').backIcon}
         />
       </TouchableOpacity>
@@ -103,9 +108,11 @@ class ExNavigationBarMenuButton extends PureComponent {
     const { tintColor } = this.props;
 
     return (
-      <TouchableOpacity style={buttonStyles.buttonContainer} onPress={() => this.props.navigator.toggleDrawer()}>
+      <TouchableOpacity
+        style={buttonStyles.buttonContainer}
+        onPress={() => this.props.navigator.toggleDrawer()}>
         <Image
-          style={[buttonStyles.menuButton, tintColor ? {tintColor} : null]}
+          style={[buttonStyles.menuButton, tintColor ? { tintColor } : null]}
           source={require('./ExNavigationAssets').menuIcon}
         />
       </TouchableOpacity>
@@ -192,7 +199,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({
@@ -224,14 +232,24 @@ export default class ExNavigationBar extends PureComponent {
     let styleFromRouteConfig = this.props.latestRoute.getBarStyle();
     let isTranslucent = !!this.props.latestRoute.getTranslucent();
     let translucentTint = this.props.latestRoute.getTranslucentTint();
-    let backgroundStyle = isTranslucent ? styles.appbarTranslucent : styles.appbarSolid;
-    let containerStyle = [styles.appbar, backgroundStyle, style, {height}, styleFromRouteConfig];
+    let backgroundStyle = isTranslucent
+      ? styles.appbarTranslucent
+      : styles.appbarSolid;
+    let containerStyle = [
+      styles.appbar,
+      backgroundStyle,
+      style,
+      { height },
+      styleFromRouteConfig,
+    ];
 
     if (this.props.overrideStyle) {
       containerStyle = [style];
     }
 
-    containerStyle.push(this.props.interpolator.forContainer(this.props, this.state.delta));
+    containerStyle.push(
+      this.props.interpolator.forContainer(this.props, this.state.delta)
+    );
 
     let leftComponents = scenesProps.map(this._renderLeft, this);
     let rightComponents = scenesProps.map(this._renderRight, this);
@@ -243,21 +261,29 @@ export default class ExNavigationBar extends PureComponent {
     });
 
     const backgroundComponents = scenesProps.map(this._renderBackground, this);
-    const wrapperStyle = [styles.wrapper, { paddingTop: APPBAR_HEIGHT + this.props.statusBarHeight }];
+    const wrapperStyle = [
+      styles.wrapper,
+      { paddingTop: APPBAR_HEIGHT + this.props.statusBarHeight },
+    ];
 
     return (
-      <View pointerEvents={this.props.visible ? 'auto' : 'none'} style={wrapperStyle}>
-        {isTranslucent && (
-          <Components.BlurView
+      <View
+        pointerEvents={this.props.visible ? 'auto' : 'none'}
+        style={wrapperStyle}>
+        {isTranslucent &&
+          <BlurView
             tint={translucentTint}
             intensity={100}
-            style={[styles.translucentUnderlay, {height}]}
-          />
-        )}
+            style={[styles.translucentUnderlay, { height }]}
+          />}
 
         <Animated.View style={containerStyle}>
           {backgroundComponents}
-          <View style={[styles.appbarInnerContainer, {top: this.props.statusBarHeight}]}>
+          <View
+            style={[
+              styles.appbarInnerContainer,
+              { top: this.props.statusBarHeight },
+            ]}>
             {titleComponents}
             {leftComponents}
             {rightComponents}
@@ -272,7 +298,7 @@ export default class ExNavigationBar extends PureComponent {
       props,
       'background',
       this.props.renderBackgroundComponent,
-      options,
+      options
     );
   }
 
@@ -281,7 +307,7 @@ export default class ExNavigationBar extends PureComponent {
       props,
       'left',
       this.props.renderLeftComponent,
-      this.props.interpolator.forLeft,
+      this.props.interpolator.forLeft
     );
   }
 
@@ -291,7 +317,7 @@ export default class ExNavigationBar extends PureComponent {
       'title',
       this.props.renderTitleComponent,
       this.props.interpolator.forCenter,
-      options,
+      options
     );
   }
 
@@ -300,17 +326,11 @@ export default class ExNavigationBar extends PureComponent {
       props,
       'right',
       this.props.renderRightComponent,
-      this.props.interpolator.forRight,
+      this.props.interpolator.forRight
     );
   }
 
-  _renderSubView(
-    props,
-    name,
-    renderer,
-    styleInterpolator,
-    options = {},
-  ) {
+  _renderSubView(props, name, renderer, styleInterpolator, options = {}) {
     const {
       scene,
       navigationState,
@@ -354,10 +374,7 @@ export default class ExNavigationBar extends PureComponent {
         <View
           pointerEvents={'none'}
           key={name + '_' + key}
-          style={[
-            styles[name],
-            layoutStyle,
-          ]}>
+          style={[styles[name], layoutStyle]}>
           {subView}
         </View>
       );
@@ -367,11 +384,7 @@ export default class ExNavigationBar extends PureComponent {
       <Animated.View
         pointerEvents={pointerEvents}
         key={name + '_' + key}
-        style={[
-          styles[name],
-          layoutStyle,
-          styleInterpolator(props),
-        ]}>
+        style={[styles[name], layoutStyle, styleInterpolator(props)]}>
         {subView}
       </Animated.View>
     );

diff --git a/src/tab/ExNavigationTabBar.js b/src/tab/ExNavigationTabBar.js
@@ -10,13 +10,14 @@ import {
 
 import { unsupportedNativeView } from '../ExUnsupportedNativeView';
 
-let Components;
-if (global.__exponent) {
-  Components = global.__exponent.Components;
+let BlurView;
+let expoModule = global.__exponent || global.__expo;
+if (expoModule) {
+  BlurView = expoModule.BlurView
+    ? expoModule.BlurView
+    : expoModule.Components.BlurView;
 } else {
-  Components = {
-    BlurView: unsupportedNativeView('BlurView'),
-  };
+  BlurView = unsupportedNativeView('BlurView');
 }
 
 import TabBadge from '../ExNavigationBadge';
@@ -32,11 +33,16 @@ export default class ExNavigationTabBar extends React.Component {
     let backgroundColor = isTranslucent ? 'rgba(255,255,255,0.5)' : '#fefefe';
 
     return (
-      <View style={[styles.container, {height}]}>
+      <View style={[styles.container, { height }]}>
         {isTranslucent &&
-          <Components.BlurView style={[styles.translucentUnderlay, {height}]} />}
-
-        <View style={[styles.innerContainer, {backgroundColor}, this.props.style]}>
+          <BlurView style={[styles.translucentUnderlay, { height }]} />}
+
+        <View
+          style={[
+            styles.innerContainer,
+            { backgroundColor },
+            this.props.style,
+          ]}>
           <View style={styles.itemContainer}>
             {this.renderTabItems()}
           </View>
@@ -72,9 +78,7 @@ 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) {
@@ -84,7 +88,10 @@ export default class ExNavigationTabBar extends React.Component {
             onPress={item.onPress}
             onLongPress={item.onLongPress}
             delayPressIn={0}
-            style={[styles.tabItem, isSelected ? item.selectedStyle : item.style]}
+            style={[
+              styles.tabItem,
+              isSelected ? item.selectedStyle : item.style,
+            ]}
             background={item.nativeFeedbackBackground}>
             {title}
             {icon}
@@ -98,7 +105,11 @@ export default class ExNavigationTabBar extends React.Component {
             onPress={item.onPress}
             delayPressIn={0}
             onLongPress={item.onLongPress}>
-            <View style={[styles.tabItem, isSelected ? item.selectedStyle : item.style]}>
+            <View
+              style={[
+                styles.tabItem,
+                isSelected ? item.selectedStyle : item.style,
+              ]}>
               {icon}
               {badge}
               {title}