React-native – Flatlist row with items of different size

You can just add flex: 0.5 to item container:

 <FlatList
      columnWrapperStyle={{justifyContent:'space-between', }}
      data={[{key: 'a'}, {key: 'b'}, {key: 'c'}]}
      keyExtractor={item => item.itemId}
      horizontal={false}
      numColumns={2}
      renderItem={({ item, index }) => (
        <View style={{backgroundColor:'red', flex: 0.5, margin: 4}}>{/*Here*/}
          <Text>{index}</Text>
        </View>
      )}
    />

Do you want easy squares? , ok then you should know this property that react native has, it's called Aspect Ratio , you just set the width or height, set the aspect ratio to 1 in style and you have an square.

This stays the same

<FlatList
   numColumns={3}
   data={this.state.data}
   renderItem={({ item }) => this.renderItem(item)}
/>

but this is more simple

renderItem(item) {
    return (
        <TouchableOpacity  
                 style={{flex:1/3, //here you can use flex:1 also
                 aspectRatio:1}}>
                <Image style={{flex: 1}} resizeMode='cover' source={{ uri:  item.photoUrl[0].photoUrl}}></Image>
        </TouchableOpacity>
    )
}

It shoud be noted that if you have an extra item below all the rows, and you use flex:1 instead of flex:1/3 it's gonna be a big , really big square, for that you can use the methods described here