Add one last element to the end of FlatList
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.
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.