From 6bb609ebeae14e4465bdbad06972ec68be450139 Mon Sep 17 00:00:00 2001
From: Brent Vatne <brentvatne@gmail.com>
Date: Fri, 16 Feb 2018 12:41:59 -0800
Subject: [PATCH] Header transition presets with support for standard iOS
 transition style (#3526)

Header transition presets with approximate support for UIKit transition style
---
 .../examples/NavigationPlayground/js/App.js   |  15 +-
 .../NavigationPlayground/js/SimpleStack.js    |  36 +--
 .../js/StackWithHeaderPreset.js               |  68 ++++++
 .../react-navigation/flow/react-navigation.js |   1 +
 packages/react-navigation/package.json        |   2 +-
 .../src/navigators/StackNavigator.js          |   2 +
 .../DrawerNavigator-test.js.snap              |   9 +-
 .../__snapshots__/StackNavigator-test.js.snap |  24 +-
 .../src/views/CardStack/CardStack.js          |  16 ++
 .../views/CardStack/CardStackTransitioner.js  |   2 +
 .../src/views/Header/Header.js                | 215 ++++++++++++++++--
 .../views/Header/HeaderStyleInterpolator.js   | 146 +++++++++---
 .../src/views/Header/HeaderTitle.js           |   2 +-
 .../views/Header/ModularHeaderBackButton.js   | 118 ++++++++++
 .../src/views/TouchableItem.js                |   1 +
 .../src/views/assets/back-icon-mask.png       | Bin 0 -> 1887 bytes
 .../src/views/assets/back-icon.png            | Bin 379 -> 491 bytes
 17 files changed, 573 insertions(+), 84 deletions(-)
 create mode 100644 packages/react-navigation/examples/NavigationPlayground/js/StackWithHeaderPreset.js
 create mode 100644 packages/react-navigation/src/views/Header/ModularHeaderBackButton.js
 create mode 100644 packages/react-navigation/src/views/assets/back-icon-mask.png

diff --git a/packages/react-navigation/examples/NavigationPlayground/js/App.js b/packages/react-navigation/examples/NavigationPlayground/js/App.js
index 774a30ba..ac4cb796 100644
--- a/packages/react-navigation/examples/NavigationPlayground/js/App.js
+++ b/packages/react-navigation/examples/NavigationPlayground/js/App.js
@@ -1,7 +1,7 @@
 /* @flow */
 
 import React from 'react';
-import { Constants, ScreenOrientation } from 'expo';
+import { Asset, Constants, ScreenOrientation } from 'expo';
 
 ScreenOrientation.allow(ScreenOrientation.Orientation.ALL);
 
@@ -28,13 +28,14 @@ import StacksInTabs from './StacksInTabs';
 import StacksOverTabs from './StacksOverTabs';
 import StacksWithKeys from './StacksWithKeys';
 import SimpleStack from './SimpleStack';
+import StackWithHeaderPreset from './StackWithHeaderPreset';
 import SimpleTabs from './SimpleTabs';
 import TabAnimations from './TabAnimations';
 
 const ExampleInfo = {
   SimpleStack: {
     name: 'Stack Example',
-    description: 'A card stack!',
+    description: 'A card stack',
   },
   SimpleTabs: {
     name: 'Tabs Example',
@@ -44,6 +45,10 @@ const ExampleInfo = {
     name: 'Drawer Example',
     description: 'Android-style drawer navigation',
   },
+  StackWithHeaderPreset: {
+    name: 'UIKit-style Header Transitions',
+    description: 'Masked back button and sliding header items. iOS only.',
+  },
   // MultipleDrawer: {
   //   name: 'Multiple Drawer Example',
   //   description: 'Add any drawer you need',
@@ -102,6 +107,7 @@ const ExampleRoutes = {
   // MultipleDrawer: {
   //   screen: MultipleDrawer,
   // },
+  StackWithHeaderPreset: StackWithHeaderPreset,
   TabsInDrawer: TabsInDrawer,
   CustomTabs: CustomTabs,
   CustomTransitioner: CustomTransitioner,
@@ -128,6 +134,11 @@ class MainScreen extends React.Component<any, State> {
     scrollY: new Animated.Value(0),
   };
 
+  componentWillMount() {
+    Asset.fromModule(require('react-navigation/src/views/assets/back-icon-mask.png')).downloadAsync();
+    Asset.fromModule(require('react-navigation/src/views/assets/back-icon.png')).downloadAsync();
+  }
+
   render() {
     const { navigation } = this.props;
 
diff --git a/packages/react-navigation/examples/NavigationPlayground/js/SimpleStack.js b/packages/react-navigation/examples/NavigationPlayground/js/SimpleStack.js
index 1717799f..173066ca 100644
--- a/packages/react-navigation/examples/NavigationPlayground/js/SimpleStack.js
+++ b/packages/react-navigation/examples/NavigationPlayground/js/SimpleStack.js
@@ -19,14 +19,12 @@ type MyNavScreenProps = {
 
 class MyBackButton extends React.Component<any, any> {
   render() {
-    return (
-      <Button onPress={this._navigateBack} title="Custom Back" />
-    );
+    return <Button onPress={this._navigateBack} title="Custom Back" />;
   }
 
   _navigateBack = () => {
     this.props.navigation.goBack(null);
-  }
+  };
 }
 
 const MyBackButtonWithNavigation = withNavigation(MyBackButton);
@@ -108,7 +106,7 @@ type MyPhotosScreenProps = {
 class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
   static navigationOptions = {
     title: 'Photos',
-    headerLeft: <MyBackButtonWithNavigation />
+    headerLeft: <MyBackButtonWithNavigation />,
   };
   _s0: NavigationEventSubscription;
   _s1: NavigationEventSubscription;
@@ -180,18 +178,20 @@ MyProfileScreen.navigationOptions = props => {
   };
 };
 
-const SimpleStack = StackNavigator({
-  Home: {
-    screen: MyHomeScreen,
-  },
-  Profile: {
-    path: 'people/:name',
-    screen: MyProfileScreen,
-  },
-  Photos: {
-    path: 'photos/:name',
-    screen: MyPhotosScreen,
-  },
-});
+const SimpleStack = StackNavigator(
+  {
+    Home: {
+      screen: MyHomeScreen,
+    },
+    Profile: {
+      path: 'people/:name',
+      screen: MyProfileScreen,
+    },
+    Photos: {
+      path: 'photos/:name',
+      screen: MyPhotosScreen,
+    },
+  }
+);
 
 export default SimpleStack;
diff --git a/packages/react-navigation/examples/NavigationPlayground/js/StackWithHeaderPreset.js b/packages/react-navigation/examples/NavigationPlayground/js/StackWithHeaderPreset.js
new file mode 100644
index 00000000..3f6d0d89
--- /dev/null
+++ b/packages/react-navigation/examples/NavigationPlayground/js/StackWithHeaderPreset.js
@@ -0,0 +1,68 @@
+/**
+ * @flow
+ */
+import type { NavigationScreenProp } from 'react-navigation';
+
+import * as React from 'react';
+import { Button, ScrollView, StatusBar } from 'react-native';
+import { StackNavigator, SafeAreaView } from 'react-navigation';
+
+type NavScreenProps = {
+  navigation: NavigationScreenProp<*>,
+};
+
+class HomeScreen extends React.Component<NavScreenProps> {
+  static navigationOptions = {
+    title: 'Welcome',
+  };
+
+  render() {
+    const { navigation } = this.props;
+
+    return (
+      <SafeAreaView>
+        <Button
+          onPress={() => navigation.push('Other')}
+          title="Push another screen"
+        />
+        <Button onPress={() => navigation.pop()} title="Pop" />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+        <StatusBar barStyle="default" />
+      </SafeAreaView>
+    );
+  }
+}
+
+class OtherScreen extends React.Component<NavScreenProps> {
+  static navigationOptions = {
+    title: 'Your title here',
+  };
+
+  render() {
+    const { navigation } = this.props;
+
+    return (
+      <SafeAreaView>
+        <Button
+          onPress={() => navigation.push('Other')}
+          title="Push another screen"
+        />
+        <Button onPress={() => navigation.pop()} title="Pop" />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+        <StatusBar barStyle="default" />
+      </SafeAreaView>
+    );
+  }
+}
+
+const StackWithHeaderPreset = StackNavigator(
+  {
+    Home: HomeScreen,
+    Other: OtherScreen,
+  },
+  {
+    headerTransitionPreset: 'uikit',
+  }
+);
+
+export default StackWithHeaderPreset;
diff --git a/packages/react-navigation/flow/react-navigation.js b/packages/react-navigation/flow/react-navigation.js
index d9896b75..8b81a16b 100644
--- a/packages/react-navigation/flow/react-navigation.js
+++ b/packages/react-navigation/flow/react-navigation.js
@@ -408,6 +408,7 @@ declare module 'react-navigation' {
   declare export type NavigationStackViewConfig = {|
     mode?: 'card' | 'modal',
     headerMode?: HeaderMode,
+    headerTransitionPreset?: 'fade-in-place' | 'uikit',
     cardStyle?: ViewStyleProp,
     transitionConfig?: () => TransitionConfig,
     onTransitionStart?: () => void,
diff --git a/packages/react-navigation/package.json b/packages/react-navigation/package.json
index fc25ceb9..4f6ee0e5 100644
--- a/packages/react-navigation/package.json
+++ b/packages/react-navigation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "repository": {
diff --git a/packages/react-navigation/src/navigators/StackNavigator.js b/packages/react-navigation/src/navigators/StackNavigator.js
index 38273dec..a2c71d78 100644
--- a/packages/react-navigation/src/navigators/StackNavigator.js
+++ b/packages/react-navigation/src/navigators/StackNavigator.js
@@ -15,6 +15,7 @@ export default (routeConfigMap, stackConfig = {}) => {
     initialRouteParams,
     paths,
     headerMode,
+    headerTransitionPreset,
     mode,
     cardStyle,
     transitionConfig,
@@ -38,6 +39,7 @@ export default (routeConfigMap, stackConfig = {}) => {
       <CardStackTransitioner
         {...props}
         headerMode={headerMode}
+        headerTransitionPreset={headerTransitionPreset}
         mode={mode}
         cardStyle={cardStyle}
         transitionConfig={transitionConfig}
diff --git a/packages/react-navigation/src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap b/packages/react-navigation/src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap
index 0304d490..e2d76fa8 100644
--- a/packages/react-navigation/src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap
+++ b/packages/react-navigation/src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap
@@ -167,7 +167,14 @@ exports[`DrawerNavigator renders successfully 1`] = `
                 accessible={true}
                 collapsable={undefined}
                 hasTVPreferredFocus={undefined}
-                hitSlop={undefined}
+                hitSlop={
+                  Object {
+                    "bottom": 15,
+                    "left": 15,
+                    "right": 15,
+                    "top": 15,
+                  }
+                }
                 isTVSelectable={true}
                 nativeID={undefined}
                 onLayout={undefined}
diff --git a/packages/react-navigation/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap b/packages/react-navigation/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap
index 603882d5..780892ed 100644
--- a/packages/react-navigation/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap
+++ b/packages/react-navigation/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap
@@ -79,6 +79,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
       collapsable={undefined}
       getScreenDetails={[Function]}
       headerMode={undefined}
+      headerTransitionPreset={undefined}
       index={0}
       layout={
         Object {
@@ -89,7 +90,9 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
           "width": 0,
         }
       }
+      leftButtonInterpolator={[Function]}
       leftInterpolator={[Function]}
+      leftLabelInterpolator={[Function]}
       mode="float"
       navigation={
         Object {
@@ -127,8 +130,10 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
           "getStateForAction": [Function],
         }
       }
+      titleFromLeftInterpolator={[Function]}
       titleInterpolator={[Function]}
       transitionConfig={undefined}
+      transitionPreset="fade-in-place"
     >
       <View
         collapsable={undefined}
@@ -184,11 +189,6 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
                   "position": "absolute",
                   "right": 70,
                   "top": 0,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
@@ -204,7 +204,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
                   Object {
                     "color": "rgba(0, 0, 0, .9)",
                     "fontSize": 17,
-                    "fontWeight": "600",
+                    "fontWeight": "700",
                     "marginHorizontal": 16,
                     "textAlign": "center",
                   }
@@ -318,6 +318,7 @@ exports[`StackNavigator renders successfully 1`] = `
       collapsable={undefined}
       getScreenDetails={[Function]}
       headerMode={undefined}
+      headerTransitionPreset={undefined}
       index={0}
       layout={
         Object {
@@ -328,7 +329,9 @@ exports[`StackNavigator renders successfully 1`] = `
           "width": 0,
         }
       }
+      leftButtonInterpolator={[Function]}
       leftInterpolator={[Function]}
+      leftLabelInterpolator={[Function]}
       mode="float"
       navigation={
         Object {
@@ -366,8 +369,10 @@ exports[`StackNavigator renders successfully 1`] = `
           "getStateForAction": [Function],
         }
       }
+      titleFromLeftInterpolator={[Function]}
       titleInterpolator={[Function]}
       transitionConfig={undefined}
+      transitionPreset="fade-in-place"
     >
       <View
         collapsable={undefined}
@@ -423,11 +428,6 @@ exports[`StackNavigator renders successfully 1`] = `
                   "position": "absolute",
                   "right": 0,
                   "top": 0,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
@@ -443,7 +443,7 @@ exports[`StackNavigator renders successfully 1`] = `
                   Object {
                     "color": "rgba(0, 0, 0, .9)",
                     "fontSize": 17,
-                    "fontWeight": "600",
+                    "fontWeight": "700",
                     "marginHorizontal": 16,
                     "textAlign": "center",
                   }
diff --git a/packages/react-navigation/src/views/CardStack/CardStack.js b/packages/react-navigation/src/views/CardStack/CardStack.js
index 3142af7d..9fc37018 100644
--- a/packages/react-navigation/src/views/CardStack/CardStack.js
+++ b/packages/react-navigation/src/views/CardStack/CardStack.js
@@ -137,6 +137,7 @@ class CardStack extends React.Component {
       ...passProps,
       scene,
       mode: headerMode,
+      transitionPreset: this._getHeaderTransitionPreset(),
       getScreenDetails: this._getScreenDetails,
       leftInterpolator: headerLeftInterpolator,
       titleInterpolator: headerTitleInterpolator,
@@ -363,6 +364,21 @@ class CardStack extends React.Component {
     return 'float';
   }
 
+  _getHeaderTransitionPreset() {
+    // On Android or with header mode screen, we always just use in-place,
+    // we ignore the option entirely (at least until we have other presets)
+    if (Platform.OS === 'android' || this._getHeaderMode() === 'screen') {
+      return 'fade-in-place';
+    }
+
+    // TODO: validations: 'fade-in-place' or 'uikit' are valid
+    if (this.props.headerTransitionPreset) {
+      return this.props.headerTransitionPreset;
+    } else {
+      return 'fade-in-place';
+    }
+  }
+
   _renderInnerScene(SceneComponent, scene) {
     const { navigation } = this._getScreenDetails(scene);
     const { screenProps } = this.props;
diff --git a/packages/react-navigation/src/views/CardStack/CardStackTransitioner.js b/packages/react-navigation/src/views/CardStack/CardStackTransitioner.js
index 67cc86d9..e4e030a0 100644
--- a/packages/react-navigation/src/views/CardStack/CardStackTransitioner.js
+++ b/packages/react-navigation/src/views/CardStack/CardStackTransitioner.js
@@ -57,6 +57,7 @@ class CardStackTransitioner extends React.Component {
     const {
       screenProps,
       headerMode,
+      headerTransitionPreset,
       mode,
       router,
       cardStyle,
@@ -66,6 +67,7 @@ class CardStackTransitioner extends React.Component {
       <CardStack
         screenProps={screenProps}
         headerMode={headerMode}
+        headerTransitionPreset={headerTransitionPreset}
         mode={mode}
         router={router}
         cardStyle={cardStyle}
diff --git a/packages/react-navigation/src/views/Header/Header.js b/packages/react-navigation/src/views/Header/Header.js
index c3173395..c969e481 100644
--- a/packages/react-navigation/src/views/Header/Header.js
+++ b/packages/react-navigation/src/views/Header/Header.js
@@ -3,8 +3,10 @@ import React from 'react';
 import {
   Animated,
   Dimensions,
+  Image,
   Platform,
   StyleSheet,
+  MaskedViewIOS,
   View,
   ViewPropTypes,
 } from 'react-native';
@@ -12,6 +14,7 @@ import SafeAreaView from 'react-native-safe-area-view';
 
 import HeaderTitle from './HeaderTitle';
 import HeaderBackButton from './HeaderBackButton';
+import ModularHeaderBackButton from './ModularHeaderBackButton';
 import HeaderStyleInterpolator from './HeaderStyleInterpolator';
 import withOrientation from '../withOrientation';
 
@@ -19,9 +22,18 @@ const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
 const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
 const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
 
+const getAppBarHeight = isLandscape => {
+  return Platform.OS === 'ios'
+    ? isLandscape && !Platform.isPad ? 32 : 44
+    : 56;
+};
+
 class Header extends React.PureComponent {
   static defaultProps = {
     leftInterpolator: HeaderStyleInterpolator.forLeft,
+    leftButtonInterpolator: HeaderStyleInterpolator.forLeftButton,
+    leftLabelInterpolator: HeaderStyleInterpolator.forLeftLabel,
+    titleFromLeftInterpolator: HeaderStyleInterpolator.forCenterFromLeft,
     titleInterpolator: HeaderStyleInterpolator.forCenter,
     rightInterpolator: HeaderStyleInterpolator.forRight,
   };
@@ -116,15 +128,14 @@ class Header extends React.PureComponent {
 
   _renderLeftComponent = props => {
     const { options } = this.props.getScreenDetails(props.scene);
+
     if (
       React.isValidElement(options.headerLeft) ||
       options.headerLeft === null
     ) {
       return options.headerLeft;
     }
-    if (props.scene.index === 0) {
-      return null;
-    }
+
     const backButtonTitle = this._getBackButtonTitleString(props.scene);
     const truncatedBackButtonTitle = this._getTruncatedBackButtonTitle(
       props.scene
@@ -147,6 +158,36 @@ class Header extends React.PureComponent {
     );
   };
 
+  _renderModularLeftComponent = (
+    props,
+    ButtonContainerComponent,
+    LabelContainerComponent
+  ) => {
+    const { options } = this.props.getScreenDetails(props.scene);
+    const backButtonTitle = this._getBackButtonTitleString(props.scene);
+    const truncatedBackButtonTitle = this._getTruncatedBackButtonTitle(
+      props.scene
+    );
+    const width = this.state.widths[props.scene.key]
+      ? (this.props.layout.initWidth - this.state.widths[props.scene.key]) / 2
+      : undefined;
+
+    return (
+      <ModularHeaderBackButton
+        onPress={this._navigateBack}
+        ButtonContainerComponent={ButtonContainerComponent}
+        LabelContainerComponent={LabelContainerComponent}
+        pressColorAndroid={options.headerPressColorAndroid}
+        tintColor={options.headerTintColor}
+        buttonImage={options.headerBackImage}
+        title={backButtonTitle}
+        truncatedTitle={truncatedBackButtonTitle}
+        titleStyle={options.headerBackTitleStyle}
+        width={width}
+      />
+    );
+  };
+
   _renderRightComponent = props => {
     const details = this.props.getScreenDetails(props.scene);
     const { headerRight } = details.options;
@@ -154,16 +195,42 @@ class Header extends React.PureComponent {
   };
 
   _renderLeft(props) {
-    return this._renderSubView(
-      props,
-      'left',
-      this._renderLeftComponent,
-      this.props.leftInterpolator
-    );
+    const { options } = this.props.getScreenDetails(props.scene);
+
+    if (props.scene.index === 0) {
+      return null;
+    }
+
+    const { transitionPreset } = this.props;
+
+    // On Android, or if we have a custom header left, or if we have a custom back image, we
+    // do not use the modular header (which is the one that imitates UINavigationController)
+    if (
+      transitionPreset !== 'uikit' ||
+      options.headerBackImage ||
+      options.headerLeft ||
+      options.headerLeft === null
+    ) {
+      return this._renderSubView(
+        props,
+        'left',
+        this._renderLeftComponent,
+        this.props.leftInterpolator
+      );
+    } else {
+      return this._renderModularSubView(
+        props,
+        'left',
+        this._renderModularLeftComponent,
+        this.props.leftLabelInterpolator,
+        this.props.leftButtonInterpolator
+      );
+    }
   }
 
   _renderTitle(props, options) {
     const style = {};
+    const { transitionPreset } = this.props;
 
     if (Platform.OS === 'android') {
       if (!options.hasLeftComponent) {
@@ -185,7 +252,9 @@ class Header extends React.PureComponent {
       { ...props, style },
       'title',
       this._renderTitleComponent,
-      this.props.titleInterpolator
+      transitionPreset === 'uikit'
+        ? this.props.titleFromLeftInterpolator
+        : this.props.titleInterpolator
     );
   }
 
@@ -198,6 +267,59 @@ class Header extends React.PureComponent {
     );
   }
 
+  _renderModularSubView(
+    props,
+    name,
+    renderer,
+    labelStyleInterpolator,
+    buttonStyleInterpolator
+  ) {
+    const { scene } = props;
+    const { index, isStale, key } = scene;
+
+    const offset = this.props.navigation.state.index - index;
+
+    if (Math.abs(offset) > 2) {
+      // Scene is far away from the active scene. Hides it to avoid unnecessary
+      // rendering.
+      return null;
+    }
+
+    const ButtonContainer = ({ children }) => (
+      <Animated.View
+        style={[buttonStyleInterpolator({ ...this.props, ...props })]}
+      >
+        {children}
+      </Animated.View>
+    );
+
+    const LabelContainer = ({ children }) => (
+      <Animated.View
+        style={[labelStyleInterpolator({ ...this.props, ...props })]}
+      >
+        {children}
+      </Animated.View>
+    );
+
+    const subView = renderer(props, ButtonContainer, LabelContainer);
+
+    if (subView === null) {
+      return subView;
+    }
+
+    const pointerEvents = offset !== 0 || isStale ? 'none' : 'box-none';
+
+    return (
+      <View
+        key={`${name}_${key}`}
+        pointerEvents={pointerEvents}
+        style={[styles.item, styles[name], props.style]}
+      >
+        {subView}
+      </View>
+    );
+  }
+
   _renderSubView(props, name, renderer, styleInterpolator) {
     const { scene } = props;
     const { index, isStale, key } = scene;
@@ -246,16 +368,47 @@ class Header extends React.PureComponent {
       hasRightComponent: !!right,
     });
 
-    return (
-      <View
-        style={[StyleSheet.absoluteFill, styles.header]}
-        key={`scene_${props.scene.key}`}
-      >
-        {title}
-        {left}
-        {right}
-      </View>
-    );
+    const wrapperProps = {
+      style: [StyleSheet.absoluteFill, styles.header],
+      key: `scene_${props.scene.key}`,
+    };
+
+    const { isLandscape, transitionPreset } = this.props;
+    const { options } = this.props.getScreenDetails(props.scene);
+
+    if (
+      options.headerLeft ||
+      options.headerBackImage ||
+      Platform.OS === 'android' ||
+      transitionPreset !== 'uikit'
+    ) {
+      return (
+        <View {...wrapperProps}>
+          {title}
+          {left}
+          {right}
+        </View>
+      );
+    } else {
+      return (
+        <MaskedViewIOS
+          {...wrapperProps}
+          maskElement={
+            <View style={styles.iconMaskContainer}>
+              <Image
+                source={require('../assets/back-icon-mask.png')}
+                style={styles.iconMask}
+              />
+              <View style={styles.iconMaskFillerRect} />
+            </View>
+          }
+        >
+          {title}
+          {left}
+          {right}
+        </MaskedViewIOS>
+      );
+    }
   }
 
   render() {
@@ -293,8 +446,7 @@ class Header extends React.PureComponent {
 
     const { options } = this.props.getScreenDetails(scene);
     const { headerStyle } = options;
-    const appBarHeight =
-      Platform.OS === 'ios' ? (isLandscape && !Platform.isPad ? 32 : 44) : 56;
+    const appBarHeight = getAppBarHeight(isLandscape);
     const containerStyles = [
       styles.container,
       {
@@ -350,6 +502,25 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: 'transparent',
   },
+  iconMaskContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  iconMaskFillerRect: {
+    flex: 1,
+    backgroundColor: '#d8d8d8',
+    marginLeft: -3,
+  },
+  iconMask: {
+    // These are mostly the same as the icon in ModularHeaderBackButton
+    height: 21,
+    width: 12,
+    marginLeft: 9,
+    marginTop: -0.5, // resizes down to 20.5
+    alignSelf: 'center',
+    resizeMode: 'contain',
+  },
   title: {
     bottom: 0,
     left: TITLE_OFFSET,
diff --git a/packages/react-navigation/src/views/Header/HeaderStyleInterpolator.js b/packages/react-navigation/src/views/Header/HeaderStyleInterpolator.js
index 82903d53..ac82a27a 100644
--- a/packages/react-navigation/src/views/Header/HeaderStyleInterpolator.js
+++ b/packages/react-navigation/src/views/Header/HeaderStyleInterpolator.js
@@ -1,7 +1,11 @@
-import { I18nManager } from 'react-native';
-
+import { Dimensions, I18nManager } from 'react-native';
 import getSceneIndicesForInterpolationInputRange from '../../utils/getSceneIndicesForInterpolationInputRange';
 
+const crossFadeInterpolation = (first, index, last) => ({
+  inputRange: [first, index - 0.75, index - 0.5, index, index + 0.5, last],
+  outputRange: [0, 0, 0.2, 1, 0.5, 0],
+});
+
 /**
  * Utility that builds the style for the navigation header.
  *
@@ -23,16 +27,7 @@ function forLeft(props) {
   const index = scene.index;
 
   return {
-    opacity: position.interpolate({
-      inputRange: [
-        first,
-        first + Math.abs(index - first) / 2,
-        index,
-        last - Math.abs(last - index) / 2,
-        last,
-      ],
-      outputRange: [0, 0, 1, 0, 0],
-    }),
+    opacity: position.interpolate(crossFadeInterpolation(first, index, last)),
   };
 }
 
@@ -44,21 +39,9 @@ function forCenter(props) {
 
   const { first, last } = interpolate;
   const index = scene.index;
-  const inputRange = [first, index, last];
 
   return {
-    opacity: position.interpolate({
-      inputRange,
-      outputRange: [0, 1, 0],
-    }),
-    transform: [
-      {
-        translateX: position.interpolate({
-          inputRange,
-          outputRange: I18nManager.isRTL ? [-200, 0, 200] : [200, 0, -200],
-        }),
-      },
-    ],
+    opacity: position.interpolate(crossFadeInterpolation(first, index, last)),
   };
 }
 
@@ -70,16 +53,125 @@ function forRight(props) {
   const { first, last } = interpolate;
   const index = scene.index;
 
+  return {
+    opacity: position.interpolate(crossFadeInterpolation(first, index, last)),
+  };
+}
+
+/**
+ * iOS UINavigationController style interpolators
+ */
+
+function forLeftButton(props) {
+  const { position, scene, scenes } = props;
+  const interpolate = getSceneIndicesForInterpolationInputRange(props);
+
+  if (!interpolate) return { opacity: 0 };
+
+  const { first, last } = interpolate;
+  const index = scene.index;
+
   return {
     opacity: position.interpolate({
-      inputRange: [first, index, last],
-      outputRange: [0, 1, 0],
+      inputRange: [
+        first,
+        first + Math.abs(index - first) / 2,
+        index,
+        last - Math.abs(last - index) / 2,
+        last,
+      ],
+      outputRange: [0, 0.5, 1, 0.5, 0],
     }),
   };
 }
 
+/* 
+ * NOTE: this offset calculation is a an approximation that gives us
+ * decent results in many cases, but it is ultimately a poor substitute
+ * for text measurement. See the comment on title for more information.
+ * 
+ * - 70 is the width of the left button area.
+ * - 25 is the width of the left button icon (to account for label offset)
+ */
+const LEFT_LABEL_OFFSET = Dimensions.get('window').width / 2 - 70 - 25;
+function forLeftLabel(props) {
+  const { position, scene, scenes } = props;
+  const interpolate = getSceneIndicesForInterpolationInputRange(props);
+
+  if (!interpolate) return { opacity: 0 };
+
+  const { first, last } = interpolate;
+  const index = scene.index;
+
+  const offset = LEFT_LABEL_OFFSET;
+
+  return {
+    // For now we fade out the label before fading in the title, so the
+    // differences between the label and title position can be hopefully not so
+    // noticable to the user
+    opacity: position.interpolate({
+      inputRange: [first, index - 0.35, index, index + 0.5, last],
+      outputRange: [0, 0, 1, 0, 0],
+    }),
+    transform: [
+      {
+        translateX: position.interpolate({
+          inputRange: [first, index, last],
+          outputRange: I18nManager.isRTL
+            ? [-offset, 0, offset]
+            : [offset, 0, -offset],
+        }),
+      },
+    ],
+  };
+}
+
+/* 
+ * NOTE: this offset calculation is a an approximation that gives us
+ * decent results in many cases, but it is ultimately a poor substitute
+ * for text measurement. We want the back button label to transition
+ * smoothly into the title text and to do this we need to understand
+ * where the title is positioned within the title container (since it is
+ * centered).
+ * 
+ * - 70 is the width of the left button area.
+ * - 25 is the width of the left button icon (to account for label offset)
+ */
+const TITLE_OFFSET_IOS = Dimensions.get('window').width / 2 - 70 + 25;
+function forCenterFromLeft(props) {
+  const { position, scene } = props;
+  const interpolate = getSceneIndicesForInterpolationInputRange(props);
+
+  if (!interpolate) return { opacity: 0 };
+
+  const { first, last } = interpolate;
+  const index = scene.index;
+  const inputRange = [first, index - 0.5, index, index + 0.5, last];
+  const offset = TITLE_OFFSET_IOS;
+
+  return {
+    opacity: position.interpolate({
+      inputRange: [first, index - 0.5, index, index + 0.7, last],
+      outputRange: [0, 0, 1, 0, 0],
+    }),
+    transform: [
+      {
+        translateX: position.interpolate({
+          inputRange: [first, index, last],
+          outputRange: I18nManager.isRTL
+            ? [-offset, 0, offset]
+            : [offset, 0, -offset],
+        }),
+      },
+    ],
+  };
+}
+
 export default {
   forLeft,
+  forLeftButton,
+  forLeftLabel,
+  forCenterFromLeft,
   forCenter,
   forRight,
 };
diff --git a/packages/react-navigation/src/views/Header/HeaderTitle.js b/packages/react-navigation/src/views/Header/HeaderTitle.js
index 0b587e7b..c68d4bda 100644
--- a/packages/react-navigation/src/views/Header/HeaderTitle.js
+++ b/packages/react-navigation/src/views/Header/HeaderTitle.js
@@ -15,7 +15,7 @@ const HeaderTitle = ({ style, ...rest }) => (
 const styles = StyleSheet.create({
   title: {
     fontSize: Platform.OS === 'ios' ? 17 : 20,
-    fontWeight: Platform.OS === 'ios' ? '600' : '500',
+    fontWeight: Platform.OS === 'ios' ? '700' : '500',
     color: 'rgba(0, 0, 0, .9)',
     textAlign: Platform.OS === 'ios' ? 'center' : 'left',
     marginHorizontal: 16,
diff --git a/packages/react-navigation/src/views/Header/ModularHeaderBackButton.js b/packages/react-navigation/src/views/Header/ModularHeaderBackButton.js
new file mode 100644
index 00000000..21b135f5
--- /dev/null
+++ b/packages/react-navigation/src/views/Header/ModularHeaderBackButton.js
@@ -0,0 +1,118 @@
+import React from 'react';
+import { I18nManager, Image, Text, View, StyleSheet } from 'react-native';
+
+import TouchableItem from '../TouchableItem';
+
+class ModularHeaderBackButton extends React.PureComponent {
+  static defaultProps = {
+    tintColor: '#037aff',
+    truncatedTitle: 'Back',
+    // eslint-disable-next-line global-require
+    buttonImage: require('../assets/back-icon.png'),
+  };
+
+  state = {};
+
+  _onTextLayout = e => {
+    if (this.state.initialTextWidth) {
+      return;
+    }
+    this.setState({
+      initialTextWidth: e.nativeEvent.layout.x + e.nativeEvent.layout.width,
+    });
+  };
+
+  render() {
+    const {
+      buttonImage,
+      onPress,
+      width,
+      title,
+      titleStyle,
+      tintColor,
+      truncatedTitle,
+    } = this.props;
+
+    const renderTruncated =
+      this.state.initialTextWidth && width
+        ? this.state.initialTextWidth > width
+        : false;
+
+    let backButtonTitle = renderTruncated ? truncatedTitle : title;
+
+    // TODO: When we've sorted out measuring in the header, let's revisit this.
+    // This is clearly a bad workaround.
+    if (backButtonTitle.length > 8) {
+      backButtonTitle = truncatedTitle;
+    }
+
+    const { ButtonContainerComponent, LabelContainerComponent } = this.props;
+
+    return (
+      <TouchableItem
+        accessibilityComponentType="button"
+        accessibilityLabel={backButtonTitle}
+        accessibilityTraits="button"
+        testID="header-back"
+        delayPressIn={0}
+        onPress={onPress}
+        style={styles.container}
+        borderless
+      >
+        <View style={styles.container}>
+          <ButtonContainerComponent>
+            <Image
+              style={[
+                styles.icon,
+                !!title && styles.iconWithTitle,
+                !!tintColor && { tintColor },
+              ]}
+              source={buttonImage}
+            />
+          </ButtonContainerComponent>
+          {typeof backButtonTitle === 'string' && (
+            <LabelContainerComponent>
+              <Text
+                onLayout={this._onTextLayout}
+                style={[
+                  styles.title,
+                  !!tintColor && { color: tintColor },
+                  titleStyle,
+                ]}
+                numberOfLines={1}
+              >
+                {backButtonTitle}
+              </Text>
+            </LabelContainerComponent>
+          )}
+        </View>
+      </TouchableItem>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    backgroundColor: 'transparent',
+  },
+  title: {
+    fontSize: 17,
+    paddingRight: 10,
+  },
+  icon: {
+    height: 21,
+    width: 12,
+    marginLeft: 9,
+    marginRight: 22,
+    marginVertical: 12,
+    resizeMode: 'contain',
+    transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+  },
+  iconWithTitle: {
+    marginRight: 3,
+  },
+});
+
+export default ModularHeaderBackButton;
diff --git a/packages/react-navigation/src/views/TouchableItem.js b/packages/react-navigation/src/views/TouchableItem.js
index c7a19b77..d3604395 100644
--- a/packages/react-navigation/src/views/TouchableItem.js
+++ b/packages/react-navigation/src/views/TouchableItem.js
@@ -21,6 +21,7 @@ export default class TouchableItem extends React.Component {
   static defaultProps = {
     borderless: false,
     pressColor: 'rgba(0, 0, 0, .32)',
+    hitSlop: { top: 15, left: 15, right: 15, bottom: 15 },
   };
 
   render() {
diff --git a/packages/react-navigation/src/views/assets/back-icon-mask.png b/packages/react-navigation/src/views/assets/back-icon-mask.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d7df0c06e2361c32a8ff4c92ae19d99bf578a1b
GIT binary patch
literal 1887
zcmV-l2cY<gP)<h;3K|Lk000e1NJLTq001xm002@51^@s7WjSX+00001b5ch_0Itp)
z=>Px+8A(JzRA>d&TiI?LMHJ06c80_O27(hOisK<;$4-L98a4%?h*gM1h|l0tc*#HT
z0w^GY5<ox_3kiXcKnM}xeaCUe7#r`qIcJ#L>aOXfy1K?Qv}E0`TXoL4w`!`ptGc~!
zU%=7Z+j}{q`r+KA&sQN%UxnA{R;W%^IB-t!L_JCxK?qk|t#m6$<*oEpsFkX&59zBU
zWhj-eB2e7xByS0!I!hHn&S(T{d8o+vsQ$xMBE?^_r1eqxYCQ$7ek8!#Q1F3(poW2f
zsD?g(PD24Wa-wT}Ip`?)0HP8F3<N|0BLP7`EdYTMW^6C*?(XiF#so$xOiWB1SYBRU
zVM94W6^g~;A+<3<feIrdBf0hU^*Len+6utHz(Di%_IA<R$b0S!X?%SAcvNEoT?K@Z
zM;IeswxIJ8U}$LQ^ycPfUr+<p=b&-7ZexNSH2zIxi7GppOy;ks25Ozt+1c3)=WVqj
ztX%5WuCA`*XfPJm$m@5<0iZl82E3I)=PrPi0G)>UJ*c7hd;mHD>W2AQ8mP7czy<(4
ziQfBOZOn2YfEDPy3jkf`x%UVKun|Bn0d!RxPzJr}IL;*jxxZF%m|D#J#=gG34HchS
z024HeIk%<~OW9apYHI4>!otF`5QW*q0*LrtMEp+}q3YKbn4FwEytK5GXl7C@R$zE|
z_~^#Q#<UulZaGw7aB#47Yiny<mnf`Vg#h}vfIc1!10?mk0w6vM;#)}x;@W3$J7~e}
zK>G?AN2u027{K>cr_Hk4MVRJyFx`*XBqx_EAjA-wfY1pkr?nLVLI|ND2%VC$sSOnn
zLJ0i<p)M&WwXp(12%%pg^oW#ot+s#=Lg+^bJuT%pn^-^y@nG45^B1HXW{m}e5E*@m
zj9!znYEugcA%s4K&^uBVYfXTJxSqYTv$OL#gtFEJFeaBl`mPX*wUPnIuYm9^A@$n3
zyakhU^!+v9-U!2{$^hhFqrYDcBd6b30Nru}_={2GtTXB&ME)JHv6GAfi8BEC59pR>
z2-Z0g34r`3ke}BfmNwb~ApZsAj|ouMY6)OKxj5reBk>VC$cUVeG7l$aE(0PnK;&Go
za%E+Fgl2%q`E=J|%v=TrW`M}KF3+bWC%z&BM9v4^HXG#R@MVC=|Ade0W^0F=0V3xb
z;FvY$GEpf5kQXtDnr)MlF9Y%!kUv-ra&kJ=Brge6D{|rGp3b9EsD>>KG9EY1Vfhrf
z(PAp@5ZKYtaSNH8F(rw@`6e2cuI*U5#_lsk5vp~i48+;q-p&i$DJk2qz6^vA+l42w
z12`t-G}f1a5ETlAag2$Tby{EsA~ZTWdTecNE$~H>w28BU83-t!&);rnXgDfm6B{W&
zLJWKn-DP|sjO-$B#A9P)_ph$5{_XYYoX2J$ByDYNbB&FSIVtN}?F@u)W@hG|+1c3z
zDaTpu41}n;xp^^{%N>$(oJ}l1!j_hn<))^lgK^}nHxeMQwY7CMo6R2JdDM}33{*1Q
z5%=S^yRQ1BoLYcH5DDB?W}Ov*vPeUJfB!nfeBEwMfFiaI1j%48!M+#ASyu^gC=vKa
zuoYV#VTsg50tk3N0{;Xybibf36Tp`9-Pm&e48gq`7GRveCL_RCGmDFh+_ZWzF2K0@
zJxySGdb(+Te*PMQ(%M6b3!e3Rl0f+e`xW$_(+Mg`o2n*&huiz`n9lvSr;-Gfq-|9a
zC_kKigFv205{yY(s|nzq&t>+v=<&p_7fgaD#!3QM(H+6s^acVyXBvnpE>!|t_TW0s
zz>VJ=nFcO6qXe)UaDqJ!lGOWn5{RiylmM5^xT^G^#~(5kw2jkB0NaBMxCehHZ3mE+
zFERo2cn5l%zi})32x)^2!UraR%V8IS=5O5kzG+YpX?(r}xK)QYgY0qZukzCb8HFt+
zfF9?Khc}?A?e|6nk*3Z;@E;&>zMTKx1<%B}5uW;)JWUU##X8s=c^unsGiixxg?A@0
zE}7l9WM0RJ81E(4A_+GE5y#^C46j5ew}`KvZAAhSEJlQ1@!mw)>I*vIw`D^U5CPm9
z3K)@__-VC@ubymd0upTbBW#XHUVQanwG)tF`6VSDr8y!6@zv5MPC$a?H}oqjD;$wj
z9}WngsWnbO1o_b{COe;>&Wdj@ZR!LhSWI^Q3k1JDH~I)gc#>Lc35YQMrQ`wpwD@3{
z_){I>NMfxgAmX@c<?uN#H?_`-uNt;$2}rQ`Y4KBdZYw@3KAX1c2}rQ~2c)^Vxi2sx
z&x_B7-LnKF*z$ipTt)e!_|n)tPe6j@|Bqp^U%`k(erPG}!)(nGkbp2pvUt|wr@*g^
zFNv*r0un3|;Cr%<Vc!;?j;)&nBv>TSfOYzZC|7*iEN#5D?h^0@heR$QA-)7W?Dc!k
Z{{<~VCVC7SUg`h<002ovPDHLkV1k11Wr+X)

literal 0
HcmV?d00001

diff --git a/packages/react-navigation/src/views/assets/back-icon.png b/packages/react-navigation/src/views/assets/back-icon.png
index e38e5e31d192f6a31f268729978726da981ea1fd..906c781a7e93cfc5ae0b7374a1b363683bb79dfc 100644
GIT binary patch
literal 491
zcmV<H0Tlj;P)<h;3K|Lk000e1NJLTq000aC000#T1^@s71*<<I00001b5ch_0Itp)
z=>Px$rAb6VR5%fJQ%@^IQ4~LSl$0GZLs?J~Ns{cx!uPO2SxCv^zPEU4h80E9EXKm;
z5Eedwq9kcVCMm_*)EvL_-hJ=fXL9S^ch2w6x%ZxTA5k_UE@UxTW|wFr0JBjpPpLVH
zEH~4@)$;VR)E6oZiNwUZfIskFNH$S5MZil56Vq<;YUpk}&``h)Vj87hDp6phW<0c%
z<xe2})J-E4nKvbz5*6N2q0~uO4xnj!eL@=WA?6CU+e!-%PIeOaDd14Sfa?z2RxsqV
z7z}w+L5bv0Sr3&eP#4W39mc{B3a4GPJPYs!&lByMaS`Y_BA%unx&!h|RWqi9$U>f^
zHr*q-&J#jLJczlclMvD$mJg67M={j=-(dL|!gbFZVZ%FlgIu?eYWNx}p3p+Lm*$B<
zE^mwK5H6<#6=;hpW<SeaAQ!lXcr_yoZJ-@TS^g)Gj-R4u-yXh(j+DGS7wQ=-&%t<(
zZS^_DBl1P8=KhTYRYO`Q;u)Oh0>%LcHE>_cxUa90cN)|<g-?8mv=~E%UZ5`jZ%B<H
hPhhnxJn~Q8{sQ(8lEyYW#k&9i002ovPDHLkV1mvs&=&vz

literal 379
zcmeAS@N?(olHy`uVBq!ia0vp@KrG6^3?x@=n6d*%wFmfwxB_X0|Nj{pkWk-$hHfyo
z<3B^&e}+~tyZS#v-G7Ff{|r_C8Gvjc0x}?6xClfXPQt~33<!egf{Q~`f~8!F^oxNm
z(J2Y?3ua(sVqxRp<mTZQ7MHPd^zaOfOv)~;pFDTjx^3I{?mK$s^34yQzkK`t^Y`C>
zxl(^Y{wnu$aSV|NkDYK`=uiNM%f{&|3^yK|7I)?I|NG066@>Nu=Ojjy32u~{!xyW6
z*jR?wO)%l`N7j4QtuJ}wtXqFF&s%s%sZA{)LM`AYR~*+-x5TNA`@$yt{@%B8=jQuy
znbm94_P+h_e%^^S?_E=h-u^5xviLdY&D(gpLw&s6k?OmTgF?~M)z4*}Q$iB};Vz{2