Flatlist not re-rendering after deleting an item from the state

Question

I'm working on a react native application,

In this application I have an image capturing the view, If the user captures an image it will be stored in the state hook, if something stored it will be displayed in Flatlist.

If we think the user needs to remove an item from the list, that I have provided a delete button. When a user clicks on it the item should be removed from the state and update the Flatlist.

My question is: after removing an item from the state my view is not re-render. I can guarantee that data is successfully removed from the state, but my Flatlist not updating.

My code as follows, please help me to find an answer. Thanks in advance.

below code used to remove the item from the state.

const [selectedFiles, setSelectedFiles] = useState([]);

const removeItemFromArray = (index: number) => {
     let imagesArray = selectedFiles;
     imagesArray.splice(index, 1);
     setSelectedFiles(imagesArray);
}

flatlist

 {
                        return (
                             viewImage(index)}
                                deleteItem={() => removeItemFromArray(index)}
                            />
                        );
                    }}
                />

---------- complete code --------------

photoUpload.tsx

import React, { useState } from "react";
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    Image,
    ImageBackground,
    TouchableOpacity,
    Modal,
    FlatList
} from "react-native";
import ImagePicker from 'react-native-image-picker/lib/commonjs';
import ComponentStyles, { FONT_FAMILY, COLORS } from "../../../../constants/Component.styles";
import IconF from 'react-native-vector-icons/FontAwesome';
import ActionButton from "../../../../components/ActionButton";
import ImagePreviewSlider from "../../../../subComponents/ProgressBarWithImage";

import InspectionCheckListItem from './InspectionCheckListRow';

const ImageUpload = props => {

    /**
     * image capturing and upload tab view
     */
    const [modalVisible, setModalVisible] = useState(false);
    const [selectedFiles, setSelectedFiles] = useState([]);

    /**
     * used to open popup dialog / state hook will be updated.
     */
    const openModal = () => {
        // setModalVisible(true);
        props.navigation.navigate('Inspection result');
    }

    /**
     * when user click on previous button this method will be worked.
     */
    const previousTab = () => {
        props.navigation.navigate('Inspection checkList');
    }

    /**
     * below method used to close the popup dialog. 
     */
    const colseModal = () => {
        setModalVisible(false);
    }

    /**
     * @chooseFile method is a alert dialog / here user can select camera or galery
     * @ImagePicker method used to open camera and collect picture / select picture from galery(function)
     */
    const chooseFile = () => {
        const options = {
            title: 'Select an option',
            storageOptions: {
                skipBackup: true,
                path: 'images',
            },
        };
        ImagePicker.showImagePicker(options, (response) => {
            // console.log('Response = ', response);
            if (response.didCancel) {
                console.log('User cancelled image picker');
            } else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            } else {
                // let source = response;
                // You can also display the image using data:
                let source = {
                    uri: 'data:image/jpeg;base64,' + response.data
                };
                setImagesToHooks(source);
            }
        });
    };

    /**
     * 
     * @param newImage base64- converted image
     */
    const setImagesToHooks = (newImage) => {
        // This will update the array. Refer the blog link for more information.
        let imagesArray = [...selectedFiles, newImage];
        setSelectedFiles(imagesArray);

    };

    const removeItemFromArray = (index: number) => {
        let imagesArray = selectedFiles;
        imagesArray.splice(index, 1);
        setSelectedFiles(imagesArray);
    }

    const viewImage = (index: number) => {
        console.log("view item : ########  : ");
    }

    return (
        

            
                
                    
                        
                            
                            Take image or upload from device
                        
                    
                

                
                    {/*  deleteItemFromArray(value)}/> */}
                     {
                            return (
                                 viewImage(index)}
                                    deleteItem={() => removeItemFromArray(index)}
                                />
                            );
                        }}
                    />
                
            
            
                 previousTab()}
                />
                 openModal()}
                />
            

            
                
                    
                        
                            
                                
                                    
                                
                            
                            
                                Inspection of pharmacies
                                Checklist:

                                
                                    
                                        Description
                                    
                                    
                                        Validiry
                                    
                                    
                                        Remark
                                    
                                
                            
                            
                                {/*  */}
                            
                        
                    
                
            
        
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    modalContainer: {
        position: 'absolute',
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(100,100,100, 0.5)',
        padding: 20,
    },
    centeredView: {
        position: 'relative',
        width: '90%',
        height: '90%',
        backgroundColor: COLORS.WHITE_FC,
        padding: 20,
    },
    inspectionNumber: {
        flex: 1.5,
        fontSize: 18,
        color: COLORS.BLUE_69,
        fontFamily: FONT_FAMILY.BOLD
    },
    modalTitle: {
        flex: 2,
        fontSize: 12,
        color: COLORS.GREEN_42,
        fontFamily: FONT_FAMILY.BOLD
    },
    contentTitle: {
        fontSize: 18,
        color: COLORS.BLUE_69,
        fontFamily: FONT_FAMILY.REGULAR,
    },
    contentSubTitle: {
        fontSize: 18,
        color: COLORS.BLUE_69,
        fontFamily: FONT_FAMILY.BOLD,
    },
    columnView: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    rowView: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: '5%'
    },
    tableText: {
        fontSize: 18,
        color: COLORS.BLUE_69,
        fontFamily: FONT_FAMILY.LIGHT,
        justifyContent: 'center',
        alignSelf: 'center'
    },
    actionButton: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'flex-end',
        position: 'relative',
        bottom: '2%',
        left: 0,
    }
});

export default ImageUpload;

ProgressBarWithImage.tsx

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity
} from "react-native";
import IconMC from 'react-native-vector-icons/MaterialCommunityIcons';
import { ProgressBar } from '@react-native-community/progress-bar-android';
import { COLORS, FONT_FAMILY } from "../constants/Component.styles";

const ProgressBarWithImage = props => {
    return (
        
            
                
                    
                
            

            
                
                    Photo01.PNG
                    
                    
                        
                    
                
                7.5Mb
                
            
        
    );
};

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        width: '100%',
        marginTop: 20,

    },

});

export default ProgressBarWithImage;

rishikesh_07 · Accepted Answer

Just use extraData prop of flatList to re-render flatList.

Simply add this state

const [refreshFlatlist, setRefreshFlatList] = useState(false);

And on in removeItemFromArray function add the following line

setRefreshFlatList(!refreshFlatlist)

finally, in flatList add this prop

extraData(refreshFlatlist)

Flatlist not re-rendering after deleting an item from the state

Answers (1)

Related Questions