React Native Navigation Header title too long, ends up overflowing

Question

I've been following up a tutorial for React Native, and I'm at a point where my output differs from the video's.

You basically get your title param from the previous screen and then display it on the header title, his gets truncated if it's too long, but mine just overlaps everything, I considered just manually truncating the string but the length is going to be different on different screens, so I was wondering if anyone could point me in the right direction, I'd appreciate it a lot.

This is the code for the component:

const MealDetailScreen = props => {
  const mealId = props.navigation.getParam("mealId");
  const meal = MEALS.find(meal => meal.id === mealId);

  return (
    <View style={styles.screen}>
      <Text>This is the {meal.title}!</Text>
      <Button title="Back" onPress={() => props.navigation.goBack()} />
    </View>
  );
};

MealDetailScreen.navigationOptions = navigationData => {
  const mealId = navigationData.navigation.getParam("mealId");
  const meal = MEALS.find(meal => meal.id === mealId);

  return {
        headerTitle: meal.title,
  };
};

, and this is the output: output

Answer 1

I had the same issue. I however am using react navigation v5.

My main fix was setting a maxWidth.

  headerTitleStyle: {
    maxWidth: 250,
  },

for good measure I also added the following:

headerTitleAlign: 'center'

https://reactnavigation.org/docs/stack-navigator/#headertitlealign

Answer 2

Cutting your title dynamically according to its length should help you.

return {
    headerTitle: meal.title.length >= 25 ? meal.title.slice(0, 24) + "..." : meal.title
};

Answer 3

Add this to your return value

return {
    headerTitleContainerStyle:{
      width:'60%',
      alignItems:'center'     
    },
}

You can then make adjustments to the header title width using this navigation option