Word wrap react native

The following code can be found in this live example

I’ve got the following react native element:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return      (
  <View style={styles.container}>

        <View style={styles.descriptionContainerVer}>
          <View style={styles.descriptionContainerHor}>
            <Text style={styles.descriptionText} numberOfLines={5} >
              Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
            </Text>
          </View>
        </View>

        <View style={styles.descriptionContainerVer2}>
          <View style={styles.descriptionContainerHor}>
            <Text style={styles.descriptionText} numberOfLines={5} >Some other long text which you can still do nothing about.. Off the screen we go then.</Text>
          </View>
        </View>



  </View>);
  }
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);

with the following styles:

var styles = StyleSheet.create({
  container:{
        flex:1,
    flexDirection:'column',
        justifyContent: 'flex-start',
        backgroundColor: 'grey'
    },
    descriptionContainerVer:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'blue',
    // alignSelf: 'center',
  },
  descriptionContainerVer2:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'orange',
    // alignSelf: 'center',
  },
  descriptionContainerHor:{
    //width: 200, //I DON'T want this line here, because I need to support many screen sizes
    flex: 0.3,  //width (according to its parent)
    flexDirection: 'column',    //its children will be in a column
    alignItems: 'center', //align items according to this parent (like setting self align on each item)
    justifyContent: 'center',
    flexWrap: 'wrap'
  },
  descriptionText: {
    backgroundColor: 'green',//Colors.transparentColor,
    fontSize: 16,
    color: 'white',
    textAlign: 'center',
    flexWrap: 'wrap'
  }
});

This results in the following screen:

How can I stop the text from going off the screen and keep it confined in the middle of the screen with a width of i.e. 80% of the parent.

I don’t think I should use width because I will be running this on MANY different mobile screens and I want it to be dynamic, so I think I should rely totally on flexbox.

(That was the initial reason why I had flex: 0.8 within the descriptionContainerHor.

What I want to achieve is something like this:

Thank you!

Today’s tutorial demonstrates wrapping text in React Native using different code examples.

Text Wrap in React Native

Since flex-wrap is the only option in React Native containing the word wrap, you might be inclined to try it.

While some advocate utilizing such a style, its biggest drawback is that it can break flexbox children rather than text, not the text itself.

The practical solutions employed the flex-wrap option, although testing revealed that it was unnecessary. flex: 1 was utilized in a few of the solutions on the parent view.

We didn’t want to do that since it would have affected the design of my software. So instead, we desired my specific parent view to fill the remaining area.

Understanding flex: 1 will allow you to know how the dimension will be distributed among its siblings.

Let’s say you carry out the following:

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

import React from "react";

function App() {
  return (
    <>
      <View>
        <View style={{ flex: 1 }}>
          <Text>Shiv</Text>
        </View>
        <View style={{ flex: 2 }}>
          <Text>Kumar</Text>
        </View>
        <View style={{ flex: 1 }}>
          <Text>Yadav</Text>
        </View>
      </View>
    </>
  );
}

export default App;

Output:

Since the default flexbox orientation in this situation is column (or vertical), the heights of each child will be divided evenly, making 1 + 2 + 1 = 4.

The middle kid receives 2/4ths of the height (or 1/2), while the first and last children each receive 1/4 of the height.

Returning to the React Native text wrap problem. We wanted the text to break; we didn’t want the entire flexbox layout to be affected.

Therefore, you must add flex: 1 to the Text component and flex-direction: row to the parent.

This is how it appears:

import { View, Text, SafeAreaView } from "react-native";

import React from "react";

function App() {
  return (
    <>
      <SafeAreaView style={{ flex: 1, flexDirection: "row", width: 160 }}>
        <View style={{ width: 50 }}>
          <Text>Shiv</Text>
        </View>
        <View style={{ flexGrow: 1, flexDirection: "row" }}>
          <Text style={{ flex: 1 }}>This is how work </Text>
        </View>
        <View style={{ width: 50 }}>
          <Text>Yadav</Text>
        </View>
      </SafeAreaView>
    </>
  );
}

export default App;

SafeAreaView renders the content within a device’s boundary.

Output:

If you execute the code above, you’ll observe that it functions flawlessly on native devices but fails to wrap the text for the web properly. Add width: 1 to the Text component as shown to correct that.

import { View, Text, SafeAreaView } from "react-native";

import React from "react";

function App() {
  return (
    <>
      <SafeAreaView style={{ flex: 1, flexDirection: "row", width: 160 }}>
        <View style={{ width: 50 }}>
          <Text>Shiv</Text>
        </View>
        <View style={{ flexGrow: 1, flexDirection: "row" }}>
          <Text style={{ flex: 1, width: 1 }}>This is how work </Text>
        </View>
        <View style={{ width: 50 }}>
          <Text>Yadav</Text>
        </View>
      </SafeAreaView>
    </>
  );
}

export default App;

Output:

Aug 03, 2022 . Admin

expo init ExampleApp

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>
  );
}

expo start

#React Native