1

I am trying to build a layout for a drag and drop game, I would like the drag placeholders (of which there is an undetermined amount, shown in black) to be laid out in rows with space around and aligned vertically. I can achieve this easily with regular flexbox like this: simplified version of the layout I am trying to achieve

with this code:

<html>
<head>
    <style>
        .container {
            display:flex;
            flex:1;
            align-items:center;
            justify-content:space-around;
            flex-direction:row;
            flex-wrap: wrap;
            background-color: #ccc;
            width:500px;
            height:300px;
        }
        .drag {
            width:100px;
            height: 100px;
            margin:10px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="drag"></div>
        <div class="drag"></div>
        <div class="drag"></div>
        <div class="drag"></div>
        <div class="drag"></div>
        <div class="drag"></div>
        <div class="drag"></div>
        <div class="drag"></div>
    </div>
</body>

However, when I try to do this in React Native flexbox I get this: react native alignItems not aligning

Using this code:

return (<View style={styles.container}>
    <View style={styles.box}></View>
    <View style={styles.box}></View>
    <View style={styles.box}></View>
    <View style={styles.box}></View>
    <View style={styles.box}></View>
    <View style={styles.box}></View>
    <View style={styles.box}></View>
    <View style={styles.box}></View>
</View>);



    const styles = StyleSheet.create({
      container: {
        justifyContent: 'space-around',
        alignItems: 'center',
        flexDirection:'row',
        backgroundColor: '#ccc',
        width:'100%',
        height:'100%',
        flexWrap:'wrap',
      },
      box: {
        width:140,
        height:140,
        backgroundColor:'#000',
        margin:2,
      },
    });

I put a small margin round the boxes to see where they are.

If I reduce the number of boxes so they don't wrap then the alignItems property seems to work as desired like this: alignItems working properly

But as soon as they wrap they are no longer aligned center along the cross axis, they go to flex-start and I can't seem to move them from there?

Thanks in advance.

Jamie
  • 31
  • 5
  • 2
    There is already a bug for this issue https://github.com/facebook/react-native/issues/8960 – Durgaprasad Budhwani Apr 01 '17 at 04:55
  • Thank you, there is a work around mentioned by lokesh-coder in this post which does layout items correctly by adding a View wrapper with round the main container. So long as you set the height on the container to auto then the container itself becomes aligned center on the cross axis. The issue then is that the container is only the height of the content and not the full height of the viewport - which might be ok for my scenario. – Jamie Apr 02 '17 at 00:08

0 Answers0