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-nativ         


        

Answer 1

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:

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

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:

  
  
    
      Some other long text which you can still do nothing about.. Off the screen we go then.
    
    
      Another column of text.
    
  
  

Where textWrapis styled like this:

textWrap: {
  flexDirection: 'column',
  flex: 0.8
},

Hope this helps!