CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-hooksreact-native-flatlist
navidabasi
navidabasi

Reputation: 181

Illustrating Multiple lines in a flatList

This is what I want to do: I have a data source that contains several objects such as 'author' , 'source' , 'title', etc.. but I want to use only ONE flatList to render them all not sure if it is possible any prop which I should be aware of?

flatList goes to show objects in a vertical order like this: title /n author /n source /n description and all of the are horizontal scrollable. Thanks in advance.

sorry to put a question couldn't find any similar problem in overflow.

Upvotes: 1

Views: 560

Answers (1)

Yasin Tazeoglu
Yasin Tazeoglu

Reputation: 1004

Sort answer: Yes, you can.

Long answer: FlatList is an advanced component and you can render custom component. https://reactnative.dev/docs/flatlist#required-renderitem

Example Code:

    <FlatList
      data={yourData}
      renderItem={({item, index, separators}) => (
        <View
          style={{
            backgroundColor: 'white',
            borderBottomColor: 'black',
            borderBottomWidth: 1,
          }}>
          <Text>
            {item.title}
            {'\n'}
            {item.source}
            ...
          </Text>
        </View>
      )}
    />

Upvotes: 1

Related Questions