React Native refresh the component after deleting a file from react-native-fs

Question

I am using react-native-fs to list and delete files in my app, I have listed all the files in one component and I have another component to show the file(Image Viewer), I want to delete the file on Image viewer and should redirect to list page after deleting a file, Deleting a file I am navigating to List component, but still I can see the deleted file on the list

deleteImageFile = () => {
  const fileName = this.state.fileName;
  const dirPicutures = RNFS.DocumentDirectoryPath;
  const filepath = `${dirPicutures}/${fileName}`;
  RNFS.exists(filepath)
  .then( (result) => {
      console.warn("file exists: ", result);

      if(result){
        return RNFS.unlink(filepath)
          .then(() => {
            console.warn('FILE DELETED');
            this.props.navigation.navigate('Gallery');

          })
          // `unlink` will throw an error, if the item to unlink does not exist
          .catch((err) => {
            console.warn(err.message);
          });
      }

    })
    .catch((err) => {
      console.warn(err.message);
    });
  }

If there is file existing in the directory then File is deleting and if not I am getting file not exist message.

After successful deleting I am calling

this.props.navigation.navigate('Gallery');

Gallery is main screen(List screen), the redirect also working but the deleted file is still present in the list.

Please help me on this.

No I am using componentDidMount to read files from the `DocumentDirectoryPath` in a Array list like `this.state = { filesList : [] }` — Jothi Kannan, Nov 28 '18 at 14:19
So you have to remove the deleted document from filesList table using splice or delete (hope your table is indexed) — Anis D, Nov 28 '18 at 15:16
I think you to delete from fileSystem and filesList in order to update the state. — Anis D, Nov 28 '18 at 15:32
Possible duplicate of [componentDidMount is not working when redirect to a screen](https://stackoverflow.com/questions/53525357/componentdidmount-is-not-working-when-redirect-to-a-screen) — Siraj Alam, Nov 28 '18 at 18:20
You can use react navigation event listeners to get this done. [This might be the solution you are looking for](https://stackoverflow.com/a/53525574/5131689) — Karthik Dechiraju, Nov 28 '18 at 18:32

score 0 · Answer 1 · answered Jan 09 '20 at 16:54

I think the issue is simply that the application doesn't reflect the file system's real-time state.

There's not enough code here to tell, but filesList needs to be dynamically updated. This either means loading the file system contents into filesList each time the Gallery is presented, or removing the document from filesList upon a successful RNFS.unlink(filepath) event.

React Native refresh the component after deleting a file from react-native-fs

1 Answers1