How to display data using FlatList in react native?

Question

I have created cardView but how can I convert it to <FlatList/> I am not able to understand what should be the renderItem of FlatList ?

My current code:

<ScrollView style={styles.container}>
                <View style={styles.cardView}>
                    <Text style={styles.projectName}>{marketing_updates.length != 0 ? marketing_updates[0].project_name: ""}</Text>
                    <Text style={styles.title}>{marketing_updates.length != 0 ? marketing_updates[0].title: ""}</Text>
                    <Text style={styles.description}>Description: {marketing_updates.length != 0 ? marketing_updates[0].description: ""}</Text>
                    <Image
                    style={styles.img}
                    source={{uri: marketing_updates.length != 0 ? marketing_updates[0].image: null}}
                    />
                    <View style={styles.buttons}>
                        <Text style={styles.like}>Like</Text>
                        <Text style={styles.share}>Share</Text>
                    </View>
                    <View style={styles.comment}>
                        <Text>Comments: </Text>
                        <Text>comment 1</Text>
                        <Text>comment 2</Text>
                        <Text>comment 3</Text>
                    </View>
                </View>

            </ScrollView>

How can I convert it to FlatList ?

What I tried :

<ScrollView style={styles.container}>
                <FlatList
                data={marketing_updates.length != 0 && marketing_updates ? marketing_updates : null}
                renderItem={}
                />

            </ScrollView>

I am not able to understand what should be there inside renderItem={} ?

I understand that the first block of code is the CardView component and you are treating it as a react component right? — SmoggeR_js
– SmoggeR_js, Commented Oct 1, 2018 at 11:46
@MtgKhaJeskai I want each list item to display project_name, title, description, image etc — fun joker
– fun joker, Commented Oct 1, 2018 at 11:50

Tsvetan Ganev · Accepted Answer · 2018-10-01 11:58:17Z

2

renderItem accepts a function which takes the current list item as an argument and renders a component. You can think of it as the "map" function like in listItems.map(item => <MyListItem {...item} />.

I'd recommend you create a presentational "card" component to encapsulate the view rendering logic (e.g. MarketingUpdateCard) and just pass the list item data as props:

renderItem={({ item }) => (
  <MarketingUpdateCard {...item} />
)}

And an example card component:

// MarketingUpdateCard.js
const MarketingUpdateCard = ({ project_name, title, description, image }) => (
    <View>
      // your current card template here
    </View>
)

edited Oct 1, 2018 at 11:58

answered Oct 1, 2018 at 11:45

Tsvetan Ganev

8,9164 gold badges32 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fun joker Over a year ago

I want each list item to display project_name, title, description, image etc

Tsvetan Ganev Over a year ago

Yep, that's what is going to happen.

R.Duteil · Accepted Answer · 2018-10-01 11:46:11Z

2

The renderItem prop should be a function that returns a react-native component

See there : https://facebook.github.io/react-native/docs/flatlist#renderitem

data={marketing_updates}
renderItem = {
    (update) => {
        <Text>
           update.project_name
        </Text>
    }
}

The renderItem() method will be called for each element of your marketing_updates array.

answered Oct 1, 2018 at 11:46

R.Duteil

1,2371 gold badge14 silver badges28 bronze badges

4 Comments

fun joker Over a year ago

But I need to check if marketing_updates length is non zero or not ?

fun joker Over a year ago

So the data should be data={marketing_updates.length != 0 && marketing_updates ? marketing_updates : null} am I right ?

R.Duteil Over a year ago

You can pass it a zero lengthed array, it willl call renderItem() zero time because your array will contain zero element, and it won't throw an error

fun joker Over a year ago

I want each list item to display project_name, title, description, image etc

Nino9612 · Accepted Answer · 2018-10-01 11:49:24Z

1

According to the react-native docs the "renderItem" does the following:

Takes an item from data and renders it into the list.

So you can pass any kind of react component to it and the flat list will use this component as for every item inside your list. In your case you can do the following:

move your "CardView" to a new Component called for example "CardViewComponent".

Then you can do following to create a flatlist:

<FlatList
  data={marketing_updates.length != 0 && marketing_updates ? marketing_updates : null}
  renderItem={({item}) => {
    <CardViewComponent marketingData={marketing_updates[item.index]}/>
  }}
/>

answered Oct 1, 2018 at 11:49

Nino9612

9585 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to display data using FlatList in react native?

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related