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

Answer 1

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>
  )}
/>