Categories
JavaScript Answers React Native Answers

How to wrap React Native text on the screen?

Spread the love

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

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *