Added 'titleNumberOfLines' prop to control the truncating of title text

[andrenanninga]

As mentioned in #438 this pr adds a prop titleNumberOfLines to control the truncating of the title text. When set to 1 it will create nice looking ellipsis for titles that are to long for the navbar.

[mention-bot]

By analyzing the blame information on this pull request, we identified @sarovin, @r0b1n and @lynndylanhurley to be potential reviewers

[charpeni]

In Javascript false == 0, so if this.props.titleNumberofLines is defined to 0, it will be defaulted to -1 by this line.

In case that's what you want, I suggest this defaulting instead :

const numberOfLines = this.props.titleNumberOfLines || -1;

Otherwise :

const numberOfLines = Number.isInteger(this.props.titleNumberOfLines) ? this.props.titleNumberOfLines : -1;

[andrenanninga]

Nicely spotted, I checked it out and when numberOfLines is set to 0 no text will be shown in the header. When set to -1 it will just ignore the numberOfLines property.

Using Number.isInteger is cleaner imo but I don't have any strong preference for either.

[andrenanninga]

I have updated the code to just check for falsy value for the prop titleNumberOfLines. If it is falsy it will default to -1 which will negate the functionality of the numberOfLines prop for Text components.

[joenoon]

@fakeyou could you rebase this and add the doc to https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md. And I think the -1 should be 0 - can you double check that works? -1 doesnt feel right

[andrenanninga]

I'm not sure how you can add a conditional attribute in jsx, so I've added a check for the titleNumberOfLines prop that will return the <Animated.Text/> component with the numberOflines attribute.

I would love to know if there is a better way to handle this case as now there is a lot of extra code just for a single optional attribute.

[joenoon]

Ya you can simplify this quite a bit and not have to duplicate anything:

<Component
  {...(something ? {foo: 1} : {})}
/>

Want to try that and then lets see how it looks?

[andrenanninga]

oh nice, I didn't know that was possible.

[andrenanninga]

@joenoon Setting the attribute to 0 means that not a single line of the text is shown. But you are right that using -1 is not the right solution. In fact I've tested it on android and it will crash the app.

For now I've added a check where it will only return the component with the numberOfLines attribute if it has a valid property.

[aksonov]

@fakeyou Could you resolve merge conflict and then ask @joenoon to review?

[aksonov]

Closing it for now. @fakeyou if you will decide to solve conflict, feel free to commit to this PR.