diff --git a/packages/stack/src/views/Header/HeaderBackButton.tsx b/packages/stack/src/views/Header/HeaderBackButton.tsx index aecc9ab2..59dbf5ed 100644 --- a/packages/stack/src/views/Header/HeaderBackButton.tsx +++ b/packages/stack/src/views/Header/HeaderBackButton.tsx @@ -17,7 +17,7 @@ type Props = HeaderBackButtonProps & { }; type State = { - initialLabelWidth?: number; + fullLabelWidth?: number; }; class HeaderBackButton extends React.Component { @@ -38,21 +38,14 @@ class HeaderBackButton extends React.Component { onLabelLayout && onLabelLayout(e); - if (this.state.initialLabelWidth) { - return; - } - - // This measurement is used to determine if we should truncate the label when it doesn't fit - // Only measure it once because `onLayout` will fire again when we render truncated label - // and we want the measurement of not-truncated label this.setState({ - initialLabelWidth: e.nativeEvent.layout.x + e.nativeEvent.layout.width, + fullLabelWidth: e.nativeEvent.layout.x + e.nativeEvent.layout.width, }); }; private shouldTruncateLabel = () => { const { titleLayout, screenLayout, label } = this.props; - const { initialLabelWidth } = this.state; + const { fullLabelWidth: initialLabelWidth } = this.state; return ( !label || @@ -104,7 +97,11 @@ class HeaderBackButton extends React.Component { const labelElement = (