New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[0.29] With flexWrap: 'wrap', unexpected margin appears between wrapped rows #8691

Closed
inetfuture opened this Issue Jul 11, 2016 · 2 comments

Comments

Projects
None yet
3 participants
@inetfuture
Copy link

inetfuture commented Jul 11, 2016

This issue appears after upgrading to 0.29.

This code:

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default class Test extends Component {
  render = () => {
    return (
      <View style={styles.container}>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
        <Text style={styles.item}>Text</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  item: {
    width: 80
  }
});

Resulting this screenshot:

simulator screen shot jul 11 2016 20 29 24

You can see that there is huge margin between rows, and with more rows, the margin will be bigger.

Is this a bug or some flexbox behavior has been changed that I am not aware of?

Thanks.

@Thorbenandresen

This comment has been minimized.

Copy link

Thorbenandresen commented Jul 11, 2016

Does this here help: #8561 ?

@inetfuture

This comment has been minimized.

Copy link

inetfuture commented Jul 12, 2016

Adding alignItems: 'flex-start' works

@inetfuture inetfuture closed this Jul 12, 2016

@facebook facebook locked as resolved and limited conversation to collaborators May 24, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.