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?

Jemie

Use RN's own FlatList component together with numOfColumns={3} prop. You can disabled scrolling if that view is meant to be static. – Ala

Answer 1

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,
    },
});

Loosestrife

How to deal with 3 columns? Dimensions.get('window').width * 0.3333...? – Jemie

Yes, you can set the width to Dimensions.get('window').width * 0.33 – Loosestrife

This will not make the item square, because the width won't always be 100, like the height. – Gaudreau

Answer 2

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/

Turley