fix: avoid overflowing long titles

react-navigation · Aug 9, 2021 · bacdbbd · bacdbbd
1 parent 9613cbe
commit bacdbbd
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 6 deletions.
diff --git a/packages/elements/src/Header/Header.tsx b/packages/elements/src/Header/Header.tsx
@@ -32,7 +32,7 @@ const warnIfHeaderStylesDefined = (styles: Record<string, any>) => {
 
     if (styleProp === 'position' && value === 'absolute') {
       console.warn(
-        "position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the 'headerTransparent' navigationOption."
+        "position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the 'headerTransparent' option."
       );
     } else if (value !== undefined) {
       console.warn(
@@ -58,6 +58,7 @@ export default function Header(props: Props) {
       default: 'left',
     }),
     headerLeft,
+    headerLeftLabelVisible,
     headerTransparent,
     headerTintColor,
     headerBackground,
@@ -179,6 +180,7 @@ export default function Header(props: Props) {
         tintColor: headerTintColor,
         pressColor: headerPressColor,
         pressOpacity: headerPressOpacity,
+        labelVisible: headerLeftLabelVisible,
       })
     : null;
 
@@ -232,7 +234,28 @@ export default function Header(props: Props) {
           </Animated.View>
           <Animated.View
             pointerEvents="box-none"
-            style={[{ marginHorizontal: 16 }, titleContainerStyle]}
+            style={[
+              styles.title,
+              {
+                // Avoid the title from going offscreen or overlapping buttons
+                maxWidth:
+                  headerTitleAlign === 'center'
+                    ? layout.width -
+                      ((leftButton
+                        ? headerLeftLabelVisible !== false
+                          ? 80
+                          : 32
+                        : 16) +
+                        Math.max(insets.left, insets.right)) *
+                        2
+                    : layout.width -
+                      ((leftButton ? 72 : 16) +
+                        (rightButton ? 72 : 16) +
+                        insets.left -
+                        insets.right),
+              },
+              titleContainerStyle,
+            ]}
           >
             {headerTitle({
               children: title,
@@ -262,7 +285,10 @@ const styles = StyleSheet.create({
   content: {
     flex: 1,
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'stretch',
+  },
+  title: {
+    marginHorizontal: 16,
     justifyContent: 'center',
   },
   left: {

diff --git a/packages/elements/src/Header/HeaderBackButton.tsx b/packages/elements/src/Header/HeaderBackButton.tsx
@@ -20,7 +20,7 @@ export default function HeaderBackButton({
   backImage,
   label,
   labelStyle,
-  labelVisible = Platform.OS === 'ios',
+  labelVisible,
   onLabelLayout,
   onPress,
   pressColor,
@@ -171,6 +171,7 @@ const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     flexDirection: 'row',
+    minWidth: StyleSheet.hairlineWidth, // Avoid collapsing when title is long
     ...Platform.select({
       ios: null,
       default: {

diff --git a/packages/elements/src/types.tsx b/packages/elements/src/types.tsx
@@ -41,7 +41,12 @@ export type HeaderOptions = {
     tintColor?: string;
     pressColor?: string;
     pressOpacity?: number;
+    labelVisible?: boolean;
   }) => React.ReactNode;
+  /**
+   * Whether a label is visible in the left button. Used to add extra padding.
+   */
+  headerLeftLabelVisible?: boolean;
   /**
    * Style object for the container of the `headerLeft` element`.
    */

diff --git a/packages/stack/src/views/Header/HeaderSegment.tsx b/packages/stack/src/views/Header/HeaderSegment.tsx
@@ -10,6 +10,7 @@ import * as React from 'react';
 import {
   Animated,
   LayoutChangeEvent,
+  Platform,
   StyleSheet,
   ViewStyle,
 } from 'react-native';
@@ -109,7 +110,7 @@ export default function HeaderSegment(props: Props) {
       : undefined,
     headerBackImage,
     headerBackTitle,
-    headerBackTitleVisible,
+    headerBackTitleVisible = Platform.OS === 'ios',
     headerTruncatedBackTitle,
     headerBackAccessibilityLabel,
     headerBackTestID,
@@ -160,7 +161,6 @@ export default function HeaderSegment(props: Props) {
           testID: headerBackTestID,
           allowFontScaling: headerBackAllowFontScaling,
           onPress: onGoBack,
-          labelVisible: headerBackTitleVisible,
           label: headerBackTitle,
           truncatedLabel: headerTruncatedBackTitle,
           labelStyle: [leftLabelStyle, headerBackTitleStyle],
@@ -182,6 +182,7 @@ export default function HeaderSegment(props: Props) {
       layout={layout}
       headerTitle={headerTitle}
       headerLeft={headerLeft}
+      headerLeftLabelVisible={headerBackTitleVisible}
       headerTitleContainerStyle={[titleStyle, headerTitleContainerStyle]}
       headerLeftContainerStyle={[leftButtonStyle, headerLeftContainerStyle]}
       headerRightContainerStyle={[rightButtonStyle, headerRightContainerStyle]}