How to show an icon on last index of flat list

Question

I'm trying to wrap my flat list and trying to show an Icon after last index of Flatlist. I had tried but it works fine on a single row. when we data goes to next row it would not work.

Here is my flat list code. Modal and Input both are my custom component.

const renderItem = ({item}) => {
  return (
   <TouchableOpacity style={[styles.tagPostContainer, styles.viewTagContainer]}>
      <AppText
        type={'input'}
        label={`#${item}`}
        color={colors.placeholder}
        containerStyle={[styles.tagPostInactiveTxt, styles.BgAddedTag]}
      />
    </TouchableOpacity>
  );
};

return(
 <>
 <View style={{flexDirection:'row',justifyContent:'flex-start'}}>
 <FlatList
      data={tags}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      contentContainerStyle={styles.TagFlatlist}
    />
      <TouchableOpacity
          style={styles.plusIconContainer}
          onPress={() => setVisible(true)}>
          <CreateBuildIconFocus height={13} width={13} />
      </TouchableOpacity>
 </View>
 <Modal
    visible={visible}
    buttonLabel={'Done'}
    containerWidth={width / 1.7}
    onCancel={onCancel}
    onSubmit={onClick}
    containerHeight={Platform.OS === 'android' ? 200 : 200}>
    <Input
      placeholder={'Add Tags'}
      autoFocus={true}
      minWidth={120}
      maxWidth={150}
      value={tag}
      onChangeText={text => setTag(text)}
    />
  </Modal>
 
 </>
)

FlatList styles:

TagFlatlist: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
},

Here is my design screen.

Answer 1

I find a solution for this. You can implement ListFooterComponent that used for showing something on end of flatlist. Here you can see more details of ListFooterComponent.

Here are the code of Flatlist.

return(
   <FlatList
      data={tags}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      ListFooterComponent={
        <TouchableOpacity
          style={styles.plusIconContainer}
          onPress={() => setVisible(true)}>
          <CreateBuildIconFocus height={13} width={13} />
        </TouchableOpacity>
      }
      contentContainerStyle={styles.TagFlatlist}
    />
)