How to wrap React Native text on the screen?

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 Views 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'.