Hyphenate wrapped text

[ximenabb]

Raised by : Emilie Reiser

Description :
On smaller screens, long words in category labels are split arbitrarily by character without hyphens.

3 points - if quick fix
See if theres other devices recreating

[ErikSin]

I did some research on this and found that this was a common problem in React Native Android. There are a few fixes that are quite complicated when dealing with multiple languages. There are entire libraries that try to address this issue, but again, requires a lot of configuration based on the language.

That being said, React Native version 0.64 and up, has an API that allows this to happen automatically by setting one on the fields in the TextComponent. We are currently using 0.63. We are planning on upgrading react native, and when we do that, this will be an easy fix. Refer to textBreakStrategy

I would suggest that we address this problem after we upgrade as it will be a much easier fix then manually trying to do it with each text component.

[gmaclennan]

It looks like textBreakStrategy exists in 0.63 too, and by default it is set to highQuality. Is there a bug in 0.63 that is fixed in 0.64?

[ErikSin]

Sorry, not textBreakStrategy I meant android-hyphenationFrequecy.

[achou11]

@ErikSin out of curiosity, does textBreakStrategy work at all?

[gmaclennan]

Ah, that makes sense. Your suggestion of holding off to the upgrade of RN makes sense to me.

[ErikSin]

@ErikSin out of curiosity, does textBreakStrategy work at all?

The default value for textBreakStrategy is already at the maximum, so the screenshot that Emilie shared is the best it gets!

[ximenabb]

@emreiser tagging you for visibility. Updating our version of React Native will be the simplest way to fix this issue. See convo up top