CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-hooks
Evandro Delgado
Evandro Delgado

Reputation: 41

How to create a FlatList

I want to create a FlatList, Grid List or a View off numColum={3} for my 

{folderToDisplay.map((item) => {
        return <Text key={item.id}>{item.value}</Text>;
      })}

right now my text is a list row. How to make it a colum off 3?

Upvotes: 1

Views: 104

Answers (2)

Chaurasia
Chaurasia

Reputation: 496

numColumns

Multiple columns can only be rendered with horizontal={false}.

FlatList in React-Native

<FlatList
    contentContainerStyle={{margin:4}}
    horizontal={false}
    numColumns={4}
    data={this.state.categoryDataSource}
    renderItem={(item) =>
        return <Text key={item.id}>{item.value}</Text>;
        }
    keyExtractor={category => category.id}
/>

Upvotes: 0

Swetank
Swetank

Reputation: 1597

Use FlatList with numColumns props.

<FlatList
    data={folderToDisplay}
    renderItem={({ item }) => <Text key={item.id}>{item.value}</Text>}
    keyExtractor={item => item.id}
    numColumns={3}
  />

https://reactnative.dev/docs/flatlist

Upvotes: 1

Related Questions