CODEWITHSUNDEEP
react-nativereact-native-flatlist
Ammar Tariq
Ammar Tariq

Reputation: 847

How show static content and dynamic content in react native flat list at same time?

I have a view that has top banner and some text, and after that there is a list of product which uses pagination, what I want to do is use flat list, Is there a way to configure it so that in my renderItems I'll return my products and have the the static content in same flat list?

Note: I do not have any code yet but **this picture might help a bit.**

Upvotes: 0

Views: 799

Answers (2)

akhil choudhary
akhil choudhary

Reputation: 953

If you have fixed banner and some text before the flatlist. You can wrap the banner, text and flatlist in scrollView.This will work as you wanted.

    render(){
     return(
       <ScrollView>
        this.renderBanner();
        this.renderText();
        this.renderFlatList();
      </ScrollView)
    }

Upvotes: 0

Ankit Makwana
Ankit Makwana

Reputation: 2451

If your Banner and text will always be on top of product list then you can use ListHeaderComponent prop of Flatlist to render static content(e.g. banner and text).

<FlatList
     ...
     ListHeaderComponent={this.renderHeader}
/>

Upvotes: 1

Related Questions