react navigation title wrapped

4
votes

With react navigation, StackNavigator, simple header title is getting wrapped. How do I display the full title? In below code, title is Personal Information. But the title does not show full on iPhone 5s device and simulator.

Versions:

  1. "react-navigation": "^1.0.0-beta.11"

  2. "react-native": "^0.47.2"

    static navigationOptions = { title: "Personal Information" };

enter image description here

2
react-nativereact-navigationreact-native-ios
You can set title section width using headerTitleStyle but it will look bad. Using the excerpted title provided by react navigation itself is a good idea - Manzoor Samad

2 Answers

12
votes

Resolved it. Specifying the headerTitleStyle with width matching to device width solve it.

static navigationOptions = {
    title: "Personal Information",
    headerBackTitle : null,
    headerTitleStyle : {width : Dimensions.get('window').width}
};
0
votes

If your title changes dynamically based on what you pass to route as params, the title will not get truncated and will overflow. To avoid that, you can do something like this:

function truncate(str: string, n: number) {
  return str.length > n ? str.substr(0, n - 1) + '...' : str;
}

<YourStack.Screen
  name="MyScreen"
  component={MyScreen}
  options={({ route }) => ({
    title: truncate(route.params.yourObject.title, 15),
  })}
/>

truncate is a simple function that accepts a number, shortens the string you pass in, and adds "..." thereafter.