CODEWITHSUNDEEP
react-nativereact-native-flatlist
Prateek Gupta
Prateek Gupta

Reputation: 63

How to render flat list horizontally and vertically?

I have a 10x10 matrix and I want to render it in a flat list. How can I enable vertical and horizontal scrolling on this so that user can select the item of their choice out of 10X10 matrix. I just want my flat list to be scrolled in both the ways.

Upvotes: 4

Views: 8537

Answers (3)

Precious Nanle Luke
Precious Nanle Luke

Reputation: 43

<FlatList
        data={data}
        numColumns={4}
        renderItem={({ item, index }) => (
          <View
            style={{
              padding: 20,
            }}
          >
            <Image
              source={{
                uri: item.uri,
              }}
              style={{ width: 64, height: 50 }}
            />
            <Txt.$Title
              style={{ fontSize: 10, paddingTop: 5, textAlign: "center" }}
            >
              {tr(item.name)}
            </Txt.$Title>
          </View>
        )}
        ItemSeparatorComponent={Kitten.Divider_________}
        ListEmptyComponent={
          <Txt.Indicator marginV>{tr("No trophy found")}</Txt.Indicator>
        }
      />

Upvotes: 0

Rishi Sahu
Rishi Sahu

Reputation: 516

Please pass this in flatlist numColumns={10} according to number of columns you want to show , it will display items horizontally in a flatlist in a grid format (You don't need separate scrollview)

Upvotes: 5

Amine
Amine

Reputation: 2434

For this, you can nest your FlatList inside a ScrollView as follow

<ScrollView>
  <View>
     <FlatList />
  </View>
</ScrollView>

To achieve the both direction Scroll behaviour, you can do that by nesting a second ScrollView like this 

<ScrollView
 horizontal
 bounces={false}
>
  <ScrollView
    nestedScrollEnabled
    bounces={false}
    contentContainerStyle={{ height: //the height of your inner content }}
   >
      <View>
        <FlatList />
      </View>
   </ScrollView>
 </ScrollView>

I haven't tested this yet, so please make sure to ask me anything.

Upvotes: -1

Related Questions