How to Wrap Text in React Native on Screen?

Aug 03, 2022 . Admin

In this tutorial, you will learn react native text component wrap. We will look at example of react native text wrap to next line. you can see how to wrap text in react native. In this article, we will implement a how to wrap text in react native. Let's get started with react native text wrap break word.

Sometimes, we need to wrap text in react native on screen. here we will add To wrap React Native text on the screen, we can set flexWrap to 'wrap'. so let's see simple example

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp

Step 2: App.js

In this step, You will open the App.js file and put the code.

import React from "react";
import { StyleSheet, Text, View} from 'react-native';

export default function App() {
  return (
    <View style={{ flexDirection: 'row',alignItems: 'center' ,justifyContent: 'center',flex:1}}>
      <Text style={{ flex: 1, flexWrap: 'wrap' }}>
        <View>
          <Text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Text>
        </View>
        <View>
          <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
        </View>
      </Text>
    </View>
  );
}

Step 3: Run Project

In the last step run your project using the below command.