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

@@ -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;
 

examples/NavigationPlayground/js/SimpleStack.js

@@ -19,14 +19,12 @@ type MyNavScreenProps = {
 
 class MyBackButton extends React.Component<any, any> {
   render() {
-    return (
+    return <Button onPress={this._navigateBack} title="Custom Back" />;
-      <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,7 +178,8 @@ MyProfileScreen.navigationOptions = props => {
   };
 };
 
-const SimpleStack = StackNavigator({
+const SimpleStack = StackNavigator(
+  {
     Home: {
       screen: MyHomeScreen,
     },
@@ -192,6 +191,7 @@ const SimpleStack = StackNavigator({
       path: 'photos/:name',
       screen: MyPhotosScreen,
     },
-});
+  }
+);
 
 export default SimpleStack;

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;

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,

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": {

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}

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}

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",
                   }

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;

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}

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) {
+    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,
     });
 
+    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
+        <View {...wrapperProps}>
-        style={[StyleSheet.absoluteFill, styles.header]}
-        key={`scene_${props.scene.key}`}
-      >
           {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 =
+    const appBarHeight = getAppBarHeight(isLandscape);
-      Platform.OS === 'ios' ? (isLandscape && !Platform.isPad ? 32 : 44) : 56;
     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,

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({
+    opacity: position.interpolate(crossFadeInterpolation(first, index, last)),
-      inputRange: [
-        first,
-        first + Math.abs(index - first) / 2,
-        index,
-        last - Math.abs(last - index) / 2,
-        last,
-      ],
-      outputRange: [0, 0, 1, 0, 0],
-    }),
   };
 }
 
@@ -44,21 +39,9 @@ function forCenter(props) {
 
   const { first, last } = interpolate;
   const index = scene.index;
-  const inputRange = [first, index, last];
 
   return {
-    opacity: position.interpolate({
+    opacity: position.interpolate(crossFadeInterpolation(first, index, last)),
-      inputRange,
-      outputRange: [0, 1, 0],
-    }),
-    transform: [
-      {
-        translateX: position.interpolate({
-          inputRange,
-          outputRange: I18nManager.isRTL ? [-200, 0, 200] : [200, 0, -200],
-        }),
-      },
-    ],
   };
 }
 
@@ -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],
+      inputRange: [
-      outputRange: [0, 1, 0],
+        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,
 };

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,

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;

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() {