How to make a two column grid on react native? - react-native

Question

I am tasked right now with making a screen that gives options in a grid of two columns with multiple cards as the items of a list. (You can see here)
I was trying to create a row flexbox, but it ended up simply continuing horizontally forever.
I'd like to know what would be a good way to get this effect os two columns expanding downwards.

Answer 1

You should use FlatList and set numColumns prop to "2" to show FlatList as grid
Here is complete code sample
import React from "react";
import { SafeAreaView, FlatList, Text, View, Image } from "react-native";
const DATA = [
{
id: "1",
title: "RUSTY DRIVE",
image:
"https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
},
{
id: "2",
title: "SABOR MORENO",
image:
"https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
},
{
id: "3",
title: "0 MESTRE PUB",
image:
"https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
},
{
id: "4",
title: "GRILL 54 CHEF",
image:
"https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
},
{
id: "5",
title: "RUSTY DRIVE",
image:
"https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
},
{
id: "6",
title: "SABOR MORENO",
image:
"https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
},
{
id: "7",
title: "0 MESTRE PUB",
image:
"https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
},
{
id: "8",
title: "GRILL 54 CHEF",
image:
"https://res.cloudinary.com/demo/image/upload/w_260,h_200,c_crop,g_north/sample.jpg"
}
];
export default class App extends React.Component {
_renderItem = ({ item }) => (
<View style={{ flex: 1, marginHorizontal: 20, marginBottom: 20 }}>
<Image
style={{ width: "100%", height: 140 }}
source={{ uri: item.image }}
/>
<Text style={{ textAlign: "center", marginTop: 8 }}>{item.title}</Text>
</View>
);
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<FlatList
data={DATA}
renderItem={this._renderItem}
keyExtractor={item => item.id}
numColumns={2}
style={{ flex: 1 }}
contentContainerStyle={{ paddingVertical: 20 }}
/>
</SafeAreaView>
);
}
}
App Preview

Answer 2

You can achieve this by simply doing something like:
<View style={{flex:1, flexDirection:"row", maxHeight:100}}>
<View style={{flex : 1, backgroundColor:"red"}}/>
<View style={{flex : 1, backgroundColor:"yellow"}}/>
</View>
Then adding new views will let you achieve such a layout, then it's up to you deciding what and how many you want to render