Revert "Better back button label" (#203)

src/views/Header.js

@@ -37,23 +37,6 @@ type Navigation = NavigationScreenProp<NavigationRoute, NavigationAction>;
 
 type SubViewRenderer = (subViewProps: SubViewProps) => ?React.Element<*>;
 
-type LayoutEvent = {
-  nativeEvent: {
-    layout: {
-      x: number;
-      y: number;
-      width: number;
-      height: number;
-    },
-  };
-};
-
-type HeaderState = {
-  widths: {
-    [key: number]: number,
-  },
-};
-
 export type HeaderProps = NavigationSceneRendererProps & {
   mode: HeaderMode,
   onNavigateBack: ?Function,
@@ -70,7 +53,7 @@ type SubViewName = 'left' | 'title' | 'right';
 const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
 const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
 
-class Header extends React.Component<void, HeaderProps, HeaderState> {
+class Header extends React.Component<void, HeaderProps, void> {
 
   static HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
   static Title = HeaderTitle;
@@ -87,10 +70,6 @@ class Header extends React.Component<void, HeaderProps, HeaderState> {
     style: PropTypes.any,
   };
 
-  state = {
-    widths: {},
-  };
-
   props: HeaderProps;
 
   shouldComponentUpdate(nextProps: HeaderProps, nextState: any): boolean {
@@ -168,9 +147,20 @@ class Header extends React.Component<void, HeaderProps, HeaderState> {
     );
   }
 
-  _renderTitle(props: NavigationSceneRendererProps): ?React.Element<*> {
+  _renderTitle(props: NavigationSceneRendererProps, options: *): ?React.Element<*> {
+    const style = {};
+
+    if (Platform.OS === 'android') {
+      if (!options.hasLeftComponent) {
+        style.left = 0;
+      }
+      if (!options.hasRightComponent) {
+        style.right = 0;
+      }
+    }
+
     return this._renderSubView(
-      props,
+      { ...props, style },
       'title',
       this.props.renderTitleComponent,
       this._renderTitleComponent,
@@ -228,32 +218,11 @@ class Header extends React.Component<void, HeaderProps, HeaderState> {
     }
 
     const pointerEvents = offset !== 0 || isStale ? 'none' : 'box-none';
-
-    // Only measure `title` component
-    const onLayout = name === 'title'
-      ? (e: LayoutEvent) => {
-        this.setState({
-          widths: {
-            ...this.state.widths,
-            [index]: e.nativeEvent.layout.width,
-          },
-        });
-      }
-      : undefined;
-
-    const width = name === 'left' || name === 'right'
-      ? this.state.widths[index]
-      : undefined;
-
     return (
       <Animated.View
         pointerEvents={pointerEvents}
-        onLayout={onLayout}
         key={`${name}_${key}`}
         style={[
-          width && {
-            width: (props.layout.initWidth - width) / 2,
-          },
           styles.item,
           styles[name],
           props.style,
@@ -265,54 +234,53 @@ class Header extends React.Component<void, HeaderProps, HeaderState> {
     );
   }
 
-  _renderHeader(props: NavigationSceneRendererProps): React.Element<*> {
-    const left = this._renderLeft(props);
-    const right = this._renderRight(props);
-    const title = this._renderTitle(props);
-
-    return (
-      <View
-        style={[StyleSheet.absoluteFill, styles.header]}
-        key={`scene_${props.scene.key}`}
-      >
-        {left}
-        {title}
-        {right}
-      </View>
-    );
-  }
-
   render(): React.Element<*> {
-    let children;
-
-    if (this.props.mode === 'float') {
-      const scenesProps: Array<NavigationSceneRendererProps> = this.props.scenes
-        .map((scene: NavigationScene, index: number) => ({
-          ...NavigationPropTypes.extractSceneRendererProps(this.props),
-          scene,
-          index,
-          navigation: addNavigationHelpers({
-            ...this.props.navigation,
-            state: scene.route,
-          }),
-        }));
-
-      children = scenesProps.map(this._renderHeader, this);
-    } else {
-      children = this._renderHeader({
-        ...this.props,
-        position: new Animated.Value(this.props.scene.index),
-        progress: new Animated.Value(0),
-      });
-    }
-
     // eslint-disable-next-line no-unused-vars
     const { scenes, scene, style, position, progress, ...rest } = this.props;
 
+    let leftComponents = null;
+    let titleComponents = null;
+    let rightComponents = null;
+
+    if (this.props.mode === 'float') {
+      const scenesProps = (scenes.map((scene: NavigationScene, index: number) => {
+        const props = NavigationPropTypes.extractSceneRendererProps(this.props);
+        props.scene = scene;
+        props.index = index;
+        props.navigation = addNavigationHelpers({
+          ...this.props.navigation,
+          state: scene.route,
+        });
+        return props;
+      }): Array<NavigationSceneRendererProps>);
+      leftComponents = scenesProps.map(this._renderLeft, this);
+      rightComponents = scenesProps.map(this._renderRight, this);
+      titleComponents = scenesProps.map((props: *, i: number) =>
+        this._renderTitle(props, {
+          hasLeftComponent: leftComponents && !!leftComponents[i],
+          hasRightComponent: rightComponents && !!rightComponents[i],
+        })
+      );
+    } else {
+      const staticRendererProps = {
+        ...this.props,
+        position: new Animated.Value(scene.index),
+        progress: new Animated.Value(0),
+      };
+      leftComponents = this._renderLeft(staticRendererProps);
+      rightComponents = this._renderRight(staticRendererProps);
+      titleComponents = this._renderTitle(staticRendererProps, {
+        hasLeftComponent: !!leftComponents,
+        hasRightComponent: !!rightComponents,
+      });
+    }
+
     return (
       <Animated.View {...rest} style={[styles.container, style]}>
         <View style={styles.appBar}>
-          {children}
+          {titleComponents}
+          {leftComponents}
+          {rightComponents}
         </View>
       </Animated.View>
     );
@@ -333,21 +301,29 @@ const styles = StyleSheet.create({
   },
   appBar: {
     height: APPBAR_HEIGHT,
-    position: 'relative',
-  },
-  header: {
-    flexDirection: 'row',
   },
   item: {
     flexDirection: 'row',
     alignItems: 'center',
   },
   title: {
-    flex: 1,
-    justifyContent: 'center',
+    bottom: 0,
+    left: 40,
+    position: 'absolute',
+    right: 40,
+    top: 0,
+  },
+  left: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    top: 0,
   },
   right: {
-    justifyContent: 'flex-end',
+    bottom: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
   },
 });
 

src/views/HeaderBackButton.js

@@ -31,11 +31,7 @@ const HeaderBackButton = ({ onPress, title, tintColor }: Props) => (
         source={require('./assets/back-icon.png')}
       />
       {Platform.OS === 'ios' && title && (
-        <Text
-          ellipsizeMode="middle"
-          style={[styles.title, { color: tintColor }]}
-          numberOfLines={1}
-        >
+        <Text style={[styles.title, { color: tintColor }]}>
           {title}
         </Text>
       )}
@@ -57,6 +53,7 @@ HeaderBackButton.defaultProps = {
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
+    justifyContent: 'center',
     flexDirection: 'row',
   },
   title: {

src/views/HeaderTitle.js

@@ -24,7 +24,6 @@ const styles = StyleSheet.create({
     color: 'rgba(0, 0, 0, .9)',
     textAlign: Platform.OS === 'ios' ? 'center' : 'left',
     marginHorizontal: 16,
-    backgroundColor: 'transparent',
   },
 });