Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16552

React Native iOS Text Sometimes Doesn't Wrap

$
0
0

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?


Viewing all articles
Browse latest Browse all 16552

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>