For some reason, setting alignItems: center in the style on the container view causes text inside a flex row to stop wrapping, and to not respect the container view's padding.

Working example and code here:

I tried following the advice to set flexDirection to column, use flex: 1 or flexWrap but the only thing that works is removing the alignItems: center from the container view.

I don't understand what's going on here. What if I want:

1. Row elements, which don't take up the full width of the screen,
2. Centered,
3. With long text inside them,
4. Which wraps?

Thanks.

For some reason, setting alignItems: center in the style on the container view causes text inside a flex row to stop wrapping, and to not respect the container view's padding.

Working example and code here: https://rnplay/apps/FsDXuQ

I tried following the advice to set flexDirection to column, use flex: 1 or flexWrap but the only thing that works is removing the alignItems: center from the container view.

I don't understand what's going on here. What if I want:

1. Row elements, which don't take up the full width of the screen,
2. Centered,
3. With long text inside them,
4. Which wraps?

Thanks.

• javascript
• react-native

• Please edit your question to include a minimal reproducible example in the question itself. This will help the Stack Overflow munity by clarifying the problem, and survive if / when your linked example goes offline. – Mogsdad Commented Mar 8, 2016 at 19:45

4 Answers 4

Use flex property. Ex.<Text style={{ flex: 1}}>

We ran into this same problem at my pany, and as far as I am aware, there is no non hacky way around it.

The way we handled it was to remove the alignItems property from the main container pletely, and give the container a flex:1 property. We then used alignItems: 'center' to any child ponent we needed, without the style being spread to all child ponents.

I've set up an example of what I'm talking about here, and pasted the code below.

'use strict';

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

var width = Dimensions.get('window').width

var shortText = "Lorem ipsum dolor sit amet, consectetur adipis.";
var longText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin ligula ut leo dictum, id elementum sapien faucibus. Nullam et feugiat neque";

var SampleApp = React.createClass({ 
  render: function() {
    return (
      <View style={styles.container}>
        <View style={ styles.alignCenter }>
            <Text>{shortText}</Text>
             </View>
        <Text/>
        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
          <Image source={{uri: "http://icons.iconarchive./icons/designbolts/free-male-avatars/128/Male-Avatar-icon.png"}} style={{height: 32, width: 32}}/>
          <View style={{ flex:1 }}>
          <Text >{longText}</Text>
          </View>
        </View>
       </View>
    );
  }
});

var styles = StyleSheet.create({
    container: {
    padding: 30,
    marginTop: 65,
    flexWrap: 'wrap',
    flex:1
    },
  alignCenter: {
    alignItems: 'center'
  }
})

AppRegistry.registerComponent('SampleApp', () => SampleApp);

Been doing searching of my own to fix this:

textStyle: {
    textAlign: 'center',
}

Courtesy of this article: http://moduscreate./aligning-children-using-flexbox-in-react-native/

Get rid of any alignItems in direct parents to allow the flexWrap to happen.

I found that I had to do a little more than @trik indicated.

I also had to remove alignItems: 'center' from the container (parent ponent).

I also found that if I needed the container to use alignItems: 'center', then I had to set the width of my child ponent to be large enough to acmodate the text as well as use textAlign: 'center'.

This would use styles similar to the following:

import {StyleSheet} from 'react-native';

export default StyleSheet.create({
  centeredParent: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  centeredChild: {
    width: '100%',
    textAlign: 'center',
  },
});

BONUS TIP: If you set the background of a text ponent to a contrasting color, then you can see the box for the text ponent. This makes debugging these issues easier.