CODEWITHSUNDEEP
react-nativeflexbox
Maverick
Maverick

Reputation: 1123

Long title flexbox/ellipsis in React Native?

I am trying to have a title fit with an ellipsis if it's too long for the device width, so the priorities in red below can always show at all times:

enter image description here

The above is what it should look like. It works very well with a short title, but looks like this now:

enter image description here

I set up a working example here: https://rnplay.org/apps/heKkoQ

Try a short title, you'll see how it looks correct, but with the long title, it does not fit the priority.

Can someone jump in with a working solution?

Upvotes: 3

Views: 4615

Answers (1)

farwayer
farwayer

Reputation: 4122

You should add flex: 1 to header container style and flexShrink: 1 to title style. Also use ellipsizeMode='tail' and numberOfLines={1} props for title.

Upvotes: 16

Related Questions