[Text] Weird gap in text elements

[ranyefet]

Hi guys,

I'm having a weird issues with <Text> element in React Native 0.13.0
Some texts are breaking into multiple lines although there's enough space.

Another issue is that some text have extra useless space after the text ends

Are these know issues? I'm not sure what caused this because other texts are just fine.
Any tips on how to debug/fix this issue?

Thanks.

[facebook-github-bot]

Hey ranyefet, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If this is a feature request or a bug that you would like to be fixed by the team, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• We welcome clear issues and PRs that are ready for in-depth discussion; thank you for your contributions!

[christopherdro]

@ranyefet Is there anyway you can try this with the latest version, 0.15 and see if the problem still persists?

[ranyefet]

@christopherdro Thanks, I still haven't tested it on 0.15 (or now 0.16) but I managed to find a work around.

On my <Text> element I had paddingRight: 50 which I suspected to cause this issue.
So instead of:

<View>
  <Text style={{paddingRight: 50}}>Hello World very long text</Text>
</View>

I moved this property into the parent <View> that wraps my <Text> node and it's now working.

<View style={{paddingRight: 50}}>
  <Text>Hello World very long text</Text>
</View>

It's still a bug, so I leave it open but at least we have a workaround now ;)
I hope it helps.

[DanielHoffmann]

@christopherdro @ranyefet I have been having similar problems with my app, in one screensize everything works great, in a device with a slightly smaller screen size I all my Text elements are having letters disappearing (even though there is more than enough room for the letters). I believe it might have something to do with applying a margin/padding to an element when there is not enough room to actually put that margin/padding there, probably making some variable go negative

[ranyefet]

I've upgraded to v0.15 but the problem returned. So no workaround ATM :(

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/text-weird-gap-in-text-elements

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.