CODEWITHSUNDEEP
react-nativeexporeact-native-navigation
Fiddle Freak
Fiddle Freak

Reputation: 2051

title pushes out headerRight and headerLeft

Problem

If the title gets to be to long, it will push out the headerRight and headerLeft before it applies the ellipsis.

Note

I found a similar question here with no fix for this issue

https://stackoverflow.com/questions/61766895/react-native-navigation-adding-headerright-causes-title-to-be-pushed-away-from

The Code

{
    headerTitleAlign: 'center',
    headerStyle: { backgroundColor: colors.blueOne },
    headerRightContainerStyle: { paddingRight: 20 },
    headerLeftContainerStyle: { paddingLeft: 20 },
    headerTitleStyle: {
      fontSize: 24,
      color: colors.whiteTwo,
      maxWidth: '90%'
    },
    headerTintColor: colors.whiteTwo,
    title: routeTitle,
    ...TransitionPresets.ModalFadeTransition,
    headerLeft: () => <Hamburger navigation={navigation} isOpen={isHamburgerOpen} />,
    headerRight: () => <HeaderRight routeName={route.name} />
}

Semi-Fix

Only after adding maxWidth: '90%', did it fix this issue, however now other titles are cut off when they should not be. See results below...

enter image description here

Upvotes: 0

Views: 74

Answers (1)

Fiddle Freak
Fiddle Freak

Reputation: 2051

Fixed it by replacing title / headerRight / headerLeft with... headerTitle instead while including the left/right inside the headerTitle.

{
    headerTitleAlign: 'center',
    headerStyle: { backgroundColor: colors.blueOne },
    headerTitle: () => (
      <View
        style={{
          width: '100%',
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}
      >
        <Hamburger navigation={navigation} isOpen={isHamburgerOpen} />
        <View style={{ flex: 1, paddingLeft: 20 }}>
          <Text
            ellipsizeMode="tail"
            numberOfLines={1}
            style={{
              ...globalStyles.pageHeading,
              color: colors.whiteTwo,
              textAlignVertical: 'center',
              textAlign: 'center',
              flex: 1
            }}
          >
            {routeTitle}
          </Text>
        </View>
        <HeaderRight routeName={route.name} />
      </View>
    ),
    ...TransitionPresets.ModalFadeTransition,
    headerLeft: null
  }

I also had to make the following changes to the left and right components...

<View style={{ flex: 0 }}>
  <Pressable onPress={toggleHamburger} style={{ padding: 8 }}>
    {isOpen ? <Icon name="close" size={24} color="#ffffff" /> : <Icon name="menu" size={24} color="#ffffff" />}
  </Pressable>
</View>

<View
  style={{
    flex: 0,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    gap: 10,
    minWidth: 60,
    width: 60,
    maxWidth: 60
  }}
>
  {isConnected === false && <OfflineCloud />}
  {routeHasTimer(routeName) && <MaterialCommunityIcons name="timer-outline" size={24} color="#ffffff" />}
</View>

Upvotes: 0

Related Questions