react-native: Flex wrap has bugs

@jaynsw Have you tried using alignItems: 'flex-start'?

I’m not sure if this is the same issue @jaynsw is talking about but I see this with flexDirection: 'row' and flexWrap: 'wrap':

Adding alignItems: 'flex-start' fixed it. I’ll need to study the reason why later…

Thanks, @kulmajaba!

alignItems: 'flex-start' also works on my project

Using version 0.34.1, it looks like flexWrap: 'wrap' prevents alignItems: any from working:

class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.box} />
        <View style={styles.box} />
        <View style={styles.box} />
        <View style={styles.box} />
        <View style={styles.box} />
        <View style={styles.box} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    height: 300,
    alignItems: 'center',
    borderWidth: 4,
    borderColor: 'red'
  },
  box: {
    height: 75,
    width: 75,
    backgroundColor: 'lime',
    borderWidth: 2,
    borderColor: 'black'
  }
})

results in:

flexWrap: 'nowrap' (or just commenting it out) results in:

I’ve tried all the combinations of flexDirection, flexWrap and alignItems. When flexWrap: 'wrap', alignItems has no effect.

Hi @chrbradley , I foo faced the same issue. I fixed it by wrapping the container View by another View and applied this style {flex:1,justifyContent:'center'}

In your case it should be something like this,

<View style={{flex:1,justifyContent:'center'}}>
  <View style={styles.container}>
    <View style={styles.box} />
    <View style={styles.box} />
    <View style={styles.box} />
    <View style={styles.box} />
    <View style={styles.box} />
    <View style={styles.box} />
  </View>
</View>

Elements inside a View with flexDirection: 'wrap' and flexWrap: 'wrap' will behave as they should, Text elements will overflow to the right because of the flexDirection.

A common solution to this is to wrap the Text element in a separate View that has flexDirection: 'column' in the styles.

Hope this helps.

alignItems: 'flex-start' Fixed the issue for me.

I’ve also noticed an issue in v0.42, but given this thread’s staleness I might start another issue. But first, I’d like to know if the issues reported here have been resolved?

@idibidiart What kind of an issue?

To recap the issues on this thread:

The original issue with text wrap inside a flex container

In a fresh React Native 0.44 project I could not reproduce this issue. Text will wrap in the following cases, all components inside a View container:

• Text is inside a View, View styles flexDirection and flexWrap can be any combination
• Text is standalone in the container View, Text styles flexDirection and flexWrap can be any combination

Originally the workaround would have been to wrap the Text component in a View with style flexDirection: 'column'. Now it seems this is not needed.

Empty space in the bottom of View components inside a flex container

Again, could not reproduce the issue in React Native 0.44, seems like this is fixed as well. Tested by placing a bunch of View components with styles minHeight: 100, minWidth: 100 inside a container View with styles flexDirection: 'row', flexWrap: 'wrap'. The boxes will take up minimum space.

Taking out flexWrap from the container View, the boxes will fill vertical space as expected, because the default behavior for alignItems is 'stretch' and the primary flex direction has been set to 'row'.

Using flexWrap: 'wrap' prevents alignItems from working

This is true, but it’s not an issue, it’s a feature and complies with the CSS3 reference.

alignItems aligns the children components in the cross direction. However you are already defining how the children should be aligned in the cross direction by using flexWrap. You need to use alignContent style instead as this will align the rows in the cross direction, not the children.

@kulmajaba

thanks.

if I want to input emoji which is an image, the result is one image one row, it’s so ugly.