How to layout with nine square view in React Native?

Question

How to achieve the square layout like the image below?

Or any related package exist?

Use RN's own `FlatList` component together with `numOfColumns={3}` prop. You can disabled scrolling if that view is meant to be static. — Samuli Hakoniemi, Nov 05 '17 at 20:22

score 6 · Answer 1 · answered Oct 03 '18 at 08:52

6

I was googling for the same question and found a simpler solution. Just use aspectRatio: 1 style attribute. See an example: https://reactnative.fun/2017/06/21/ratio/

answered Oct 03 '18 at 08:52

Ivan Grishaev

1,583
10
15

score 4 · Accepted Answer · answered Nov 05 '17 at 15:21

I am using the combination of ScrollView and flexbox to achieve my static grid view.

import {Dimensions} from 'react-native';

....

return (
  <ScrollView>
    <View style={styles.container}>
      {
        this.props.categories.map((category, index) => {
          return (
            <TouchableOpacity
              key={index}
              style={styles.item}
              onPress={() => {}}
            >
              <Image
                style={styles.itemIcon}
                source="..."
              />
              <Text style={styles.itemTitle}>
                {category.name}
              </Text>
            </TouchableOpacity>
          )
        })
      }
    </View>
  </ScrollView>
)

var styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    item: {
        width: Dimensions.get('window').width * 0.5,
        height: 100,
        borderWidth: 1,
        borderColor: "lightgray",
        alignItems: 'center',
        justifyContent: 'center'        
    },
    itemIcon: {
        width: 100,
        height: 100,
        resizeMode: 'contain'
    },
    itemTitle: {
        marginTop: 16,
    },
});

How to deal with 3 columns? `Dimensions.get('window').width * 0.3333...`? — junlin, Nov 07 '17 at 11:14
Yes, you can set the width to ```Dimensions.get('window').width * 0.33``` — Kelvin, Nov 07 '17 at 11:40
This will not make the item square, because the `width` won't always be `100`, like the `height`. — instanceof, Oct 31 '19 at 11:45

How to layout with nine square view in React Native?

2 Answers2