Sometimes, we want to wrap React Native text on the screen.
In this article, we’ll look at how to wrap React Native text on the screen.
How to wrap React Native text on the screen?
To wrap React Native text on the screen, we can set flexWrap
to 'wrap'
.
For instance, we write:
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Text } from 'react-native-paper';
const MyComponent = () => {
return (
<View style={{ flexDirection: 'row' }}>
<Text style={{ flex: 1, flexWrap: 'wrap' }}>
<View>
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
</View>
<View>
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
</View>
</Text>
</View>
);
};
export default MyComponent;
We have a View
s inside the Text
component.
And we set the style
prop of Text
to an object with the flex
property set to1 and flexWrap
set to 'wrap'
.
We set the View
‘s flexDirection
style to 'row'
to enable horizontal flexbox.
Conclusion
To wrap React Native text on the screen, we can set flexWrap
to 'wrap'
.
One reply on “How to wrap React Native text on the screen?”
I have heard there is an issue wrapping text links in react native, that the it breaks the style and removes the underline of the link. Is that a common issue? Is there a fix. I am trying to troubleshoot a couple things.