React native text going off my screen refusing to wrap What to do

Question

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           lt View style  styles container  gt            lt View style  styles descriptionContainerVer  gt             lt View style  styles descriptionContainerHor  gt               lt Text style  styles descriptionText  numberOfLines  5   gt                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                 lt  Text gt             lt  View gt           lt  View gt            lt View style  styles descriptionContainerVer2  gt             lt View style  styles descriptionContainerHor  gt               lt Text style  styles descriptionText  numberOfLines  5   gt Some other long text which you can still do nothing about   Off the screen we go then  lt  Text gt             lt  View gt           lt  View gt        lt  View gt            AppRegistry registerComponent  SampleApp        gt  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

User · Answer

my solution below    lt View style  style aboutContent  gt        lt Text style   styles text  textAlign  justify     gt             text here                                   lt  Text gt   lt  View gt    style   aboutContent       flex 8      width widthDevice-40      alignItems  center     text       fontSize widthDevice 0 04      color   fff       fontFamily  SairaSemiCondensed-Medium       result

User · Answer

you just need to have a wrapper for your  lt Text gt  with flex like below    lt View style    flex  1    gt     lt Text gt Your Text lt  Text gt   lt  View gt

User · Answer

The solution to that issue is flexShrink  1    lt View     style    flexDirection   row      gt       lt Text style    flexShrink  1    gt         Really really long text        lt  Text gt   lt  View gt    Depending on your set up  you may also also need to add flexShrink  1 to the  lt View gt  s parent as well  to get this to work  so play with that and you ll make it   The solution was discovered by Adam Pietrasiak in this thread

User · Answer

this worked for me  lt View style   flexShrink 1   gt     lt Text gt some long random text    lt  Text gt     lt  View gt

User · Answer

lt Text style   width  200   numberOfLines  1  ellipsizeMode  quot tail quot  gt Your text here lt  Text gt

User · Answer

In version 0 62 2 of React Native  i just put  quot flex-shrink  1 quot  in Container of my  quot Text quot   but remember the flex-direction row in View of container  Thank you guys for the help  My code  export const Product   styled View    background   fff    padding  15px 10px    border-radius  5px    margin  5px    flex-direction  row      export const ProductTitleContainer   styled View    font-size  16px    margin-left  5px    flex-shrink  1      export const ProductTitle   styled Text    font-size  16px    flex-wrap  wrap

User · Answer

Another solution that I found to this issue is by wrapping the Text inside a View  Also set the style of the View to flex  1

User · Answer

It works if you remove flexDirection  row from descriptionContainerVer and descriptionContainerVer2 respectively   UPDATE  see comments   I made a few changes to achieve what I think you re after  First of all I removed the descriptionContainerHor component  Then I set the flexDirection of the vertical views to row and added alignItems   center  and justifyContent   center   Since the vertical views are now in fact stacked along the horizontal axis I removed the Ver part from the name   So now you have a wrapper view that should vertically and horizontally align it s content and stack it along the x-axis  I then simply put two invisible View components on the left and right side of the Text component to do the padding   Like this     lt View style  styles descriptionContainer  gt     lt View style  styles padding   gt       lt Text style  styles descriptionText  numberOfLines  5   gt        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         lt  Text gt     lt View style  styles padding   gt   lt  View gt    And this   descriptionContainer     flex 0 5    height  according to its parent     flexDirection   row     backgroundColor   blue     alignItems   center     justifyContent   center        alignSelf   center      padding      flex  0 1    descriptionText      backgroundColor   green    Colors transparentColor    fontSize  16    flex  0 8    color   white     textAlign   center     flexWrap   wrap       Then you get what I believe you were after   FURTHER IMPROVEMENTS  Now if you would like to stack multiple text areas within the blue and orange views you can do something like this    lt View style  styles descriptionContainer2  gt     lt View style  styles padding   gt     lt View style  styles textWrap  gt       lt Text style  styles descriptionText  numberOfLines  5   gt        Some other long text which you can still do nothing about   Off the screen we go then       lt  Text gt       lt Text style  styles descriptionText  numberOfLines  5   gt        Another column of text       lt  Text gt     lt  View gt     lt View style  styles padding   gt   lt  View gt    Where textWrapis styled like this   textWrap      flexDirection   column     flex  0 8      Hope this helps

User · Answer

I wanted to add that I was having the same issue and flexWrap  flex 1  in the text components   nothing flex was working for me    Eventually  I set the width of my text components  wrapper to the width of the device and the text started wrapping   const win   Dimensions get  window            lt View style            flex  1          flexDirection   column           justifyContent   center           alignSelf   center           width  win width          gt           lt Text style    top  0  alignSelf   center      gt  image title  lt  Text gt           lt Text style    alignSelf   center     gt  image description  lt  Text gt         lt  View gt

User · Answer

I found solution from below link    Text  Text doesn t wrap  1438   lt View style   flexDirection  row    gt       lt Text style   flex  1  flexWrap   wrap    gt  You miss fdddddd dddddddd       You miss fdd     lt  Text gt   lt  View gt      Below is the Github profile user link if you want to thank him   Ally Rippley    Edit  Tue Apr 09 2019  As  sudoPlz mentioned in comments it works with flexShrink  1 updating this answer

User · Answer

lt View style   flexDirection  row    gt      lt Text style   flex  1  flexWrap   wrap    gt    This will work

User · Answer

This is a known bug   flexWrap   wrap  didn t work for me but this solution seems to work for most people  Code   lt View style  styles container  gt       lt Text gt Some text lt  Text gt   lt  View gt    Styles  export default StyleSheet create       container            width  0          flexGrow  1          flex  1

User · Answer

lt View style   flexDirection  row    gt       lt Text style    flex  number    gt  You miss fdddddd dddddddd       You miss fdd     lt  Text gt   lt  View gt       flex  aNumber   is all you need    Just set  flex  to a number that suit for you  And then the text will wrap

User · Answer

lt SafeAreaView style   flex 1   gt           lt View style   alignItems  center    gt               lt Text style    textAlign  center     gt                      This code will make your text centered even when there is a line-break              lt  Text gt           lt  View gt   lt  SafeAreaView gt

[css] React native text going off my screen, refusing to wrap. What to do?

Examples related to css

Examples related to reactjs

Examples related to react-native

Examples related to flexbox