React Native iOS Text Sometimes Doesn't Wrap

Question

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:

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?

Answer 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>