Display text as a header in flatlist items to seperate each part, React native

Question

I have a flatlist that renders data fetched from the DB,so i made sure the items are sorted by type.

Now i want to render a text at the top of each part to make a distinction between every part, a header sort of(example: Specialities: and then the part of specialities, doctor: and then the part of doctors) here is a look at my code:

<FlatList
            data={this.state.data.sort((a, b) => a.type === 'spécialité' ? -1 : 1)}
            keyExtractor={item => { return item.id }}
            renderItem={({ item }) => 
              <TouchableOpacity onPress={() =>NavigationService.navigate('Où ?',{lien: item.lien, choix: c}) }> 
              {item.type == 'spécialité' && (
                
                <Highlighter
                  highlightStyle={{ backgroundColor: '#FFC617' }}
                  searchWords={[this.searchedText]}
                  textToHighlight={item.name}
                  style={{paddingLeft:10,color: '#2c3e50',height:42,backgroundColor: 'white'}}
                />
                
              )}
              {item.type == 'Tag' && (
                <Highlighter
                highlightStyle={{ backgroundColor: '#FFC617' }}
                searchWords={[this.searchedText]}
                textToHighlight={item.name}
                style={{paddingLeft:10,color: '#2c3e50',height:42,backgroundColor: 'white'}}
              />
                
              )}
              {item.type == 'Médecin' && (
                <View style={{ backgroundColor: 'white', flexDirection: 'row',flexWrap: 'wrap',height:80 }}>
                <Image style={{ height: 50, width: 80,marginTop:5, borderRadius:5 }} source={{ uri:getImageFromApi( item.image ) }} />
                <View style={{ flexDirection: 'column'}}>
                <Text style={{ fontWeight:'bold',color:'#2980b9' }}> {item.name} </Text>
                <Text style={{color: '#2c3e50'}}> {item.speciality} </Text>
                </View>
              </View>)}
              {item.type == 'Clinique' && (
                
                <View style={{ backgroundColor: 'white', flexDirection: 'row',flexWrap: 'wrap',height:80 }}>
                <Image style={{ height: 50, width: 80,marginTop:5, borderRadius:5 }} source={{ uri:getImageFromApi( item.image ) }} />
                <View style={{ flexDirection: 'column'}}>
                <Text style={{ fontWeight:'bold',color:'#2980b9' }}> {item.name} </Text>
                <Text style={{color: '#2c3e50'}}> {item.speciality} </Text>
                </View>
              </View>)}
              
            </TouchableOpacity>}
            ItemSeparatorComponent={this.renderSeparator}
          />)}

i tried doing <Text in my touchable opacity but it duplicates inside every item. I'll appreciate your help

Guruparan Giritharan · Accepted Answer · 2020-07-22T09:40:47.590

7

You can use the ListHeaderComponent and ListFooterComponent and show a text or even render a custom component.

 <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        ListHeaderComponent={()=><Text>1231312</Text>}
        ListFooterComponent={()=><Text>1231312</Text>}
      />

Or if you want to have group level headers consider using the section list

<SectionList
  sections={DATA}
  keyExtractor={(item, index) => item + index}
  renderItem={({ item }) => <Item title={item} />}
  renderSectionHeader={({ section: { title } }) => (
    <Text style={styles.header}>{title}</Text>
  )}
/>

edited Jul 22 '20 at 09:40

answered Jul 22 '20 at 09:25

Guruparan Giritharan

15,660
4
27
50

thank you for your reply, but there is 4 different part in render item sorted by type as you can see in the code, how can i render a header at the top of every part, not just one header for all the items? – Aymen Aymen Jul 22 '20 at 09:32
Why not use a section list instead of a flatlist ? as you need a grouped view – Guruparan Giritharan Jul 22 '20 at 09:34
1

I m new to react native i didn't knew of this component, it seems like the right answer.thank you trying it right now! – Aymen Aymen Jul 22 '20 at 09:38
If you need anything please be free to ask – Guruparan Giritharan Jul 22 '20 at 09:39
ok thank you, i replace it and got another issue undefined is not an object (evaluating 'items.length') sectionlist. is there a way to keep my flatlist and do the seperators? – Aymen Aymen Jul 22 '20 at 10:01
Flatist is more of a list of items of the same type so there is no easy way, so section list is the easiest option, may i know where you are getting the error from ? – Guruparan Giritharan Jul 22 '20 at 10:06
check the docs https://reactnative.dev/docs/sectionlist.html, you will have to provide the data in a grouped way, thats why you are getting the error – Guruparan Giritharan Jul 22 '20 at 10:07
its maybe from the data i fetch from the server but i got no control over it. this is the problem,i 'm only on the front-end side. see my code above, i changed flatlist to sectionlist – Aymen Aymen Jul 22 '20 at 10:09
Why not do the grouping at front end and show it in section list https://stackoverflow.com/questions/14446511/most-efficient-method-to-groupby-on-an-array-of-objects – Guruparan Giritharan Jul 22 '20 at 10:11

score 0 · Answer 2 · answered Jul 22 '20 at 09:29

0

You can Use ListHeaderComponent prop

Read the docs here

An example would be like this:

<FlatList
    data={DATA}
    renderItem={renderItem}
    keyExtractor={item => item.id}
    ListHeaderComponent={() => {
      return (<Text>Header</Text>)
    }}
 />

answered Jul 22 '20 at 09:29

Rupesh Chaudhari

308
2
3
12

thank you for your reply, but there is 4 different part in render item sorted by type as you can see in the code, how can i render a header at the top of every part, not just one header for all the items? – Aymen Aymen Jul 22 '20 at 09:32

Display text as a header in flatlist items to seperate each part, React native

2 Answers2