CODEWITHSUNDEEP
javascriptreact-native
Lane Rettig
Lane Rettig

Reputation: 6950

alignItems: center prevents flex row text wrapping in React Native

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.org/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.

Upvotes: 5

Views: 4691

Answers (4)

Danny Remington - OMS
Danny Remington - OMS

Reputation: 5502

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

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

I also found that if I needed the container to use alignItems: 'center', then I had to set the width of my child component to be large enough to accommodate 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 component to a contrasting color, then you can see the box for the text component. This makes debugging these issues easier.

Upvotes: 0

Apache
Apache

Reputation: 105

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

Upvotes: 7

trik
trik

Reputation: 504

Been doing searching of my own to fix this:

textStyle: {
    textAlign: 'center',
}

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

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

Upvotes: 3

Nader Dabit
Nader Dabit

Reputation: 53681

We ran into this same problem at my company, 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 completely, and give the container a flex:1 property. We then used alignItems: 'center' to any child component we needed, without the style being spread to all child components.

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.com/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);

Upvotes: 3

Related Questions