React-native: 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.

[jaynsw]

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'?

[jaynsw]

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" [email protected] 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
https://github.com/facebook/react-native/issues/8960#issuecomment-234859946,
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 Viewby another Viewand 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.

[EyalSi]

check out the output of this example. not sure what is happening here... so frustrating.

  render(){
    return (
        <View>
          <View style={{flexDirection: 'row',flexWrap:'wrap'}}>
            <View style={{margin:2, backgroundColor:'white'}} >
              <Text style={{fontSize:20}}> test test test test test test test tes</Text>
            </View>
            <View style={{margin:2, backgroundColor:'red'}} >
              <Text style={{fontSize:20}}> tes1 </Text>
            </View>
          </View>
          <Text>
          This is a test
          This is a test
          This is a test
          </Text>
        </View>
    )
  }

[idibidiart]

on iOS it is also buggy

I've made a simpler version of the code posted by @EyalSi that shows an interesting definitely buggy behavior:

The only difference in the two screens below is a single extra "." after the last "test"

@kulmajaba there is more buggy behavior that I've encountered that may or may not be related to this

      <ScrollView > 
          <View style={{flexDirection: 'row',flexWrap:'wrap', backgroundColor: 'orange'}}>
              <View style={{margin: 15, backgroundColor: 'yellow'}}>
              <Text style={{fontSize:20}}> test test test test </Text>
              </View>
              <View style={{margin: 15, backgroundColor: 'yellow'}}>
              <Text style={{fontSize:20}}> test test test </Text>
              </View>
              <View style={{margin: 15, backgroundColor: 'yellow'}}>
              <Text style={{fontSize:20}}> test </Text>
              </View>

              <View style={{margin: 15, backgroundColor: 'red'}}>
              <Text style={{fontSize:20}}> test.. </Text>
              </View>

          </View>
          <Text>
          TEST
          </Text>
      </ScrollView>

EDIT:

This is only an issue when setting margins. If you set padding instead there is no issue.

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.