diff --git a/packages/stack/example/src/SimpleStack.js b/packages/stack/example/src/SimpleStack.js
index 68b40f00..1f10eea0 100644
--- a/packages/stack/example/src/SimpleStack.js
+++ b/packages/stack/example/src/SimpleStack.js
@@ -3,6 +3,10 @@ import { Button, View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
class ListScreen extends React.Component {
+ static navigationOptions = {
+ title: 'List',
+ };
+
render() {
return (
;
}
+ _getTitleText = () => {
+ const { width, title, truncatedTitle } = this.props;
+
+ let { initialTextWidth } = this.state;
+
+ if (title === null) {
+ return null;
+ } else if (!title) {
+ return truncatedTitle;
+ } else if (initialTextWidth && width && initialTextWidth > width) {
+ return truncatedTitle;
+ } else {
+ return title.length > 8 ? truncatedTitle : title;
+ }
+ };
+
+ _maybeRenderTitle() {
+ const { backTitleVisible, titleStyle, tintColor } = this.props;
+ let backTitleText = this._getTitleText();
+
+ if (!backTitleVisible || backTitleText === null) {
+ return null;
+ }
+
+ const { LabelContainerComponent } = this.props;
+
+ return (
+
+
+ {this._getTitleText()}
+
+
+ );
+ }
+
render() {
const {
onPress,
@@ -61,25 +104,12 @@ class ModularHeaderBackButton extends React.PureComponent {
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 && backButtonTitle.length > 8) {
- backButtonTitle = truncatedTitle;
- }
-
- const { ButtonContainerComponent, LabelContainerComponent } = this.props;
+ const { ButtonContainerComponent } = this.props;
return (
{this._renderBackImage()}
- {typeof backButtonTitle === 'string' && (
-
-
- {backButtonTitle}
-
-
- )}
+ {this._maybeRenderTitle()}
);
@@ -117,6 +133,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
flexDirection: 'row',
backgroundColor: 'transparent',
+ marginBottom: 1,
},
title: {
fontSize: 17,