Long title text overflow everywhere

[tomsdev]

If you use a long title it doesn't truncate and instead overflow (because in your component style you use absolute positioning and doesn't set 'numberOfLines' on the Text component). See:

[grabbou]

Well, what's your expected behaviour? I would say that should be truncated on your side with e.g. title.substring(0,10) etc. if you are not sure about the length.

On the other hand - we could just set it up properly so there's native ... added at the end and no multiline text is rendered.

[Kureev]

@grabbou I'll add numberOfLines to the <Text /> element

[tomsdev]

Sorry I didn't set expectations, I think normally you want to have the text truncated with '...' At the end. It's not possible to use substring because you don't know the width available and the character size. I suggested to use numberOfLines and remove the absolute positioning.

[Kureev]

Sorry for the very late response, but can you compose a PR?

[grabbou]

@ex/navigator truncates, so I think we could also

[breadadams]

Any news on this? Running into the same issue with long titles

[ngankt2]

You can set maxHeight in style for Text exp: <Text style={{maxHeight:22}}>blbalbalba very long over here</Text> Or: <Text numberOfLines={1}>blbalbalba long text<Text> => will show '...'

[breadadams]

Has there been an update for this @ngankt2? I'm sure I tried numberOfLines={1}, but the text still went behind back button.

[johncblandii]

Bump...

[chetstone]

I'm trying to use adjustsFontSizeToFit (RN >= 0.33) with a custom title component. It kind of works but the title is very short. It seems the default styles of this component provide equal space for the title and left and right buttons. I'd like the title to use more space. How can I specify that?

[Kureev]

IIRC, we using absolute positioning for the title, so no boundaries for the text, unless you specify them by yourself

[chetstone]

Yes. Ordinarily the title boundaries will expand to accommodate the enclosed text, because the parent (styles.navBar) is flex with justifyContent = space-between.

But when the space occupied by the text is dynamic, adjustsFontSizeToFit is trying to fit the text into a variable-size container and it ends up deciding to use a very small font size. I'm not sure how to fix this.

On Sat, Dec 3, 2016 at 2:44 AM, Alexey [email protected] wrote:

IIRC, we using absolute positioning for the title, so no boundaries for the text, unless you specify them by yourself

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/react-native-community/react-native-navbar/issues/124#issuecomment-264629030, or mute the thread https://github.com/notifications/unsubscribe-auth/AA7l1y2WcolcUKQf2Fu2vMVx5xRjWo2kks5rETnggaJpZM4G5VFc .

[Kureev]

Yeah, it's a tricky one. I can refactor position: absolute to flexbox, but I'm not sure if it'll help anyhow. Wdyt?

[chetstone]

@kureev Thanks. I tried several changes but finally got it to work by adding width and height props to the <Text> component that has the adjustsFontSizeToFit prop. Without any changes to 'react-native-navbar`.

Thanks chester

[ngankt2]

@breadadams <Text style={{flex:1}} numberOfLines={1}>LONG TEXT....</Text>

[Kureev]

Thanks, @ngankt2.

Should we make it default for the title? Can somebody compose a PR?