Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add one last element to the end of FlatList

I am trying to achieve the following, whereas all but the last are normal images coming from an array.

Images

Currently this is the code for the FlatList:

<FlatList
  data={images}
  numColumns={3}
  // ListFooterComponent={
  // <View style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]}>
  //     <Image source={require('../../../images/add-icon.png')} />
  // </View>}
  renderItem={ ({item, index}) => index == images.length -1 ?
     <View style={{flexDirection: 'row'}}>
       <Image style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]} source={{uri: item.url}} /> 
       <View style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]}>
         <Image source={require('../../../images/add-icon.png')} />
       </View>
     </View>
    : <Image style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]} source={{uri: item.url}} /> }
  keyExtractor={(item, index) => index.toString()}
/>

Which long story short, renders the pictures in the array in a table of 3 columns, and checks for the last picture in the list and in addition to rendering the picture, it also renders this plus sign.

However this is bound to have some sort of error if the list has a number of elements multiple of 3, since the plus sign would most likely be out of the screen. If I use ListFooterComponent, it renders it in an entirely new line.

Does anyone know an effective work around to this?

like image 434
Ren Avatar asked Jan 22 '19 21:01

Ren


People also ask

How do I get the last item of FlatList?

You can use FlatList's ListFooterComponent prop to render some JSX or a component at the end of the list. If you need to know that you are at the end of the list within renderItem , you can check the index in the metadata provided to renderItem against the length of data .

What is keyExtractor in FlatList?

keyExtractor ​Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item. key , then item.id , and then falls back to using the index, like React does.

What is extraData in FlatList?

The extraData prop is used to re-render the FlatList items dynamically. So what we are doing is that we make 2 Array in our tutorial and render the FlatList using first array object. We would also make 1 button.

What does the key extractor prop of the FlatList do?

It extracts the unique key name and its value and tells the FlatList component to track the items based on that value.


2 Answers

I also came around the same situation and found a good way when I have check the documentation of FlatList so the best way that I recommend is to use ListFooterComponent you can pass a style object for that element using ListFooterComponentStyle Click here for more details.

enter image description here

like image 154
Umair Ahmed Avatar answered Sep 18 '22 06:09

Umair Ahmed


Since I don't think I was clear enough, I'll try to explain properly my idea with this sample code:

<FlatList
  data={[...images, { plusImage: true }]}
  numColumns={3}
  renderItem={({ item }) => {
    if (item.plusImage) {
      return (
        <View
          style={[
            StyleSheet.actionUploadedPictureFrame,
            { height: PIC_HEIGHT, width: PIC_WIDTH }
          ]}
        >
          <Image source={require("../../../images/add-icon.png")} />
        </View>
      );
    }
    return (
      <Image
        style={[
          StyleSheet.actionUploadedPictureFrame,
          { height: PIC_HEIGHT, width: PIC_WIDTH }
        ]}
        source={{ uri: item.url }}
      />
    );
  }}
  keyExtractor={(item, index) => index.toString()}
/>;

I don't know if it's the best practice to concat data array like that directly in the data prop, but you can always choose to declare it earlier in the render method. Let me know if this can fit your request.

like image 23
Milore Avatar answered Sep 22 '22 06:09

Milore