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?