7

I'm working on a React Native app and have run into some bizarre issues with text not wrapping appropriately. This text wrap issue only occurs on certain simulators (iPhone 6+/7+/8+/X). Basically my app has a design that looks as follows: 

<ScrollView
        style={styles.container}
        contentContainerStyle={styles.content}
>
    <Text style={styles.Text} >
          Blah blah blah blah ... Long long long long text
    </Text>
    <Text style={styles.Text} >
          Blah blah blah blah ... Long long long long text
    </Text>
    <Text style={styles.Text} >
          Blah blah blah blah ... Long long long long text
    </Text>
    {/* A bunch more Text components styled similarly as above */}
</ScrollView>

My styles are defined as follows:

const styles = StyleSheet.create({
            container: {
                backgroundColor: '#F4F4F4',
            },
            content: {
                paddingRight: 5
            },
            text: {
                marginVertical: 8,
                paddingRight: 10,
                marginLeft: 16,
                fontSize: 18,
                lineHeight: 42,
            }
    }

Generally, the text wraps around correctly at the end of a text component. However, sometimes the end text will trail off the side of the screen:

enter image description here

When I switch to landscape mode, I can generally see the chopped off text, but I'm confused as to why this could be happening. I've tried every so many possible fixes, playing around with flex, flexGrow, flexShrink, paddingRight, marginRight, setting a width for the text component and/or contentContainerStyle, however nothing seems to work.

I've also referred to all of the following threads for possible fixes:

And none of the fixes seem to work. At this point I'm not even sure what else to try/how to go about tracking the possible source of error. Any pointers would be greatly appreciated!

[2]: https://github.com/facebook/react-native/issues/17960 [3]: https://github.com/facebook/react-native/issues/15114 [4]: https://github.com/facebook/react-native/issues/7687 [5]: https://github.com/facebook/react-native/issues/1438 [6]: React native text going off my screen, refusing to wrap. What to do?

MEric
  • 946
  • 3
  • 12
  • 30
  • Did you try explicitly setting the container's `flexDirection` to `column`? That seems to work for some folks. – Sara Inés Calderón Jun 25 '18 at 22:34
  • 2
    Yeah I've tried that to no success :( Another thing I've noticed is that when the text runs off the screen, there seems to be a blank line created after the text where the text should wrap to, but there is no text on the line. I've also seen instances where a certain phrase like "the cat" will just be squished into "thc" at the rightmost end of the screen. – MEric Jun 26 '18 at 07:01
  • 1
    I'm facing this exact same issue as well -- although I haven't pinpointed the cause, it looks like it most commonly occurs within a scrollview / flatlist, when the text component is not a part of the first item in the list. – Conor Strejcek Jul 06 '18 at 14:51
  • 1
    Yeah it's really bizarre. I find that the text doesn't disappear when I change from portrait to landscape mode. Sometimes by switching the modes a few times it can actually behave correctly in portrait mode. Really strange. – MEric Jul 06 '18 at 15:57
  • I found out what causes the issue in our app. If the "Text Size" setting on iOS is set to a specific value, the text starts to behave strange - can you check my issue on github and try if this relates? https://github.com/facebook/react-native/issues/21007 – mxmtsk Sep 07 '18 at 08:30

1 Answers1

1

Depending on what you need, you can use:
- numberOfLines: to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number.
- adjustsFontSizeToFit: to show all the text, perhaps with a new line. If use with numberOfLines - font should be scaled down automatically to fit given style constraints.
You can read more: here

Example:
<ScrollView> <Text adjustsFontSizeToFit={true}> Blah blah blah blah ... Long long long long text long text long text long text long text long text long text long text </Text> <Text numberOfLines={1} > Blah blah blah blah ... Long long long long text long text long text long text long text long text long text long text long text </Text> <Text numberOfLines={1} adjustsFontSizeToFit={true}> Blah blah blah blah ... Long long long long text long text long text long text long text long text long text long text </Text> </ScrollView>

Evgeniy Bondarenko
  • 129
  • 3