React Native Text Going Off Screen, Refusing to Wrap. What to Do?

When dealing with long text in React Native that is going off the screen and refusing to wrap, there are a few approaches you can take to address the issue.

Let’s create a basic screen to showcase a few solutions for managing long text that doesn’t wrap as expected.

Solution 1: Width Limitation

You can set a maxWidth on the Text component to limit its width.
Example :

<Text style={{ maxWidth: '80%' }}>Your long text here</Text>

This allows the text to take up a maximum of 80% of its parent’s width.

The below code shows how we can achieve this by giving maxWidth:

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = () => {
 return (
   
     
       
         
           Lorem Ipsum is simply dummy text of the printing and typesetting
           industry. Lorem Ipsum has been the industry's standard dummy text
           ever since the 1500s, when an unknown printer took a galley of type
           and scrambled it to make a type specimen book.
         
       
     
     
       
         
           Lorem Ipsum is simply dummy text of the printing and typesetting
           industry.
         
       
     
   
 );
};

const styles = StyleSheet.create({
 container: {
   flex: 1,
 },
 textContainer: {
   flex: 0.5,
   justifyContent: 'center', // Center children vertically
   alignItems: 'center', // Center children horizontally
   paddingHorizontal: '15%',
 },
 descriptionContainer: {
   flexDirection: 'row', // Stack children in a row
 },
 descriptionText: {
   fontSize: 16,
   color: 'white',
   textAlign: 'center',
   maxWidth: '80%', // 80% of the parent's width
   backgroundColor: 'green',
 },
});
export default App;

Solution 2: Flexbox

To address the issue of text going off the screen and refusing to wrap using Flexbox, you can structure your components appropriately. In this example, the flex: 0.8 property for the longText style ensures that the text occupies 80% of its parent’s width. Adjust this value based on your specific layout requirements.

Here’s a code:

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


function App(): React.JSX.Element {
 return (
   
     
       
         Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and
         scrambled it to make a type specimen book.
       
     
     
       
         Lorem Ipsum is simply dummy text of the printing and typesetting
         industry.
       
     
   
 );
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
 },
 descriptionText: {
   backgroundColor: 'green',
   fontSize: 16,
   color: 'white',
   textAlign: 'center',
   flex: 0.8,
 },
 textWrap: {
   flex: 0.5,
   alignItems: 'center',
   justifyContent: 'center',
   flexDirection: 'row',
   paddingHorizontal: '15%',
 },
});

export default App;

Both solutions are suitable for Android and iOS, choose the one that aligns with your design and functionality preferences.