Flex wrap has bugs

[musicode]

flex style has some bug, just like the chat scene:

  textContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  textContent: {
    color: '#333',
    fontSize: 16,
  },
  url: {
    color: '#007aff',
  },

wrap is not ok.

[kulmajaba]

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.

[musicode]

@kulmajaba

thanks.

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

[pomelio]

flexDirection:'row' flexWrap:'wrap' has issue. I changed the backgroundColor of the view to 'red'. The second line of the photos moves very low and clipped. The following is the screenshot when I upgrade to 0.30

when it wraps to the second line, It looks the gutter between the first line and the second line is the height of the image. This gutter should be deleted.

photos:{
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
backgroundColor: 'red',
},

[kulmajaba]

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

[pomelio]

I am interesting in removing the gap between lines when wrapping. Now when
it wraps, there is a gap between lines. the height is the image height,
this gap shouldn't exist

On 25 Jul 2016 5:11 PM, "Mika Kuitunen" notifications@github.com wrote:

@jaynsw https://github.com/jaynsw Have you tried using alignItems:
'flex-start'?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#8960 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFZBPlR2blGqTfmBJqNQx9m3n_Z7y-t0ks5qZGGtgaJpZM4JSa-j
.

[ryankask]

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!

[chrbradley]

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.

[danleveille]

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

[plrthink]

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

[lokesh-coder]

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>

[hongyu315]

After RN 0.28, you have to use { flexWrap:'wrap'}，before that,{ flexWrap:'wrap' } work with {alignItems: 'stretch'}together default.

[vardanmobiloitte]

Can someone suggest what to use for RN 0.28 to solve above problem

[idibidiart]

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?

[kulmajaba]

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.