Expo react native, how to make a responsive clickable list with columns - react-native

Question

I have recently been learning react native and I am using expo. I want to make a responsive grid of clickable items. Similar to how an iphones main screen has a bunch of apps on it in a grid. My attemps so far have gotten me this:
For what you see in the image I am using a flat list with a fixed number of columns (hence one of the columns being cut off). The items in the list do not respond to clicks.
How should I go about making this into a responsive grid that adjusts to different phones screen sizes, have it scrollable (which it currently is) and have each item in the list respond to being pressed?
I appreciate anything pointing me in the right direction

Answer 1

you can do it in two ways.
1. by using ant rn design use "GRID COMPONENT"
<Grid
data={data}
columnNum={3}
isCarousel
onPress={(_el, index) => alert(index)}
/>
**Sample** : [Vist][1]
for more [visit here][1] .
By Using "FlatList"
<FlatList
data={[{},{}]} //array of objects
renderItem={({item}) => (
<TouchableOpacity
style={style.GridViewBlockStyle}
onPress={this._handleClick.bind(this, item.link, item.text)}
>
<View
style={{
height: 100,
justifyContent: 'center',
alignItems: 'center',
}}
>
{item.icon}
<Text style={style.GridViewInsideTextItemStyle}> {item.text}
</Text>
)}
</View>
</TouchableOpacity>
)}
numColumns={3}
keyExtractor={item => item.id.toString()}
style={{}}
/>
Sample Visit.