CODEWITHSUNDEEP
react-nativeexpo
Daniel Visca
Daniel Visca

Reputation: 157

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

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:

enter image description here

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

Upvotes: 0

Views: 1249

Answers (1)

Rajnish singh
Rajnish singh

Reputation: 23

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] .

  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.

Upvotes: 1

Related Questions