score:31

Accepted answer

this usually happens when you have this: fontweight:bold and your android device is for example a oneplus or oppo (there are some other brands tho), it's a conflict with your system font.
to fix, you can add some other fontfamily or put 2 blank spaces in front of the word seems to work too.
see: https://github.com/facebook/react-native/issues/15114

edit

setting textbreakstrategy to simple on the text element also seems to work for some devices like samsung galaxy s10, google pixel

score:0

if you remove numberoflines it will display correctly. if it still doesn't show up, it could be that the parent view has a fixed height (or maxheight)

score:0

as it turns out, the last line of our paragraphs were getting cut off due to 'highquality' value of textbreakstrategy parameter. we changed this to 'simple' and now all of our text displays. apparently highquality is actually low quality.

score:0

you can fix it by adding extra space at the end which is not a good workaround.

recommended: include default font-family in your application and it works same for all devices

score:0

there are other better ways to fix this issue. but in my case adding custom font fixed the text-cut issue and font alignment in different devices.

adding custom font can easily solve the problem.

how to add custom fonts = checkout this stackoverflow answer

react-native official docs on custom fonts

score:0

try this.

  1. remove fontwight : bold
  2. add style in text tag like this = width:'100%' (according to your text size)

score:0

i simply added padding and the issue resolved

if text cut off from the left side just add paddingleft:10

in my case text was cut-off from top-side, when i was increasing the font size, so i added paddingtop:20

if text cut off from top add textalignvertical: 'bottom'

score:1

in my case adding fontfamily: 'arial' to the text component did the trick. even fontfamily: 'abc' also works. i think it just requires fontfamily to be set.

score:1

adding extra space or adding textbreakstrategy as "simple" did not work for me.

i added alignself:"stretch" for the text component style and it worked for me finally. if you want to text to be in the center just add textalign: "center" as well.

hopefully this helps someone.

score:2

adding a flex: x style to the <view> surrounding the <text> element being cut worked for me, when using a oneplus 7t.

score:3

i'd had problem of text cut horizontally. by using lineheight to text components, and boom, my problem solved

score:4

after struggling with it for a long time, i finally figured it out.

seems like for default, the text sets the property textbreakstrategy to * highquality*.

changing it to * simple* solved my problem.

link here: https://reactnative.dev/docs/0.56/text#textbreakstrategy

score:5

for anyone who found provided solutions not working like in my case here's my solution to text being cut on oneplus phones:

just set component style with these properties

alignself: 'stretch',
textalign: 'center',

this is probably an equivalent to android match_parent setting. did not test how it will affect ios though as i don't have that possibility right now.


Related Query

More Query from same tag