React native RNFS library - react-native

Question

I have used react native RNFS library to access my mobile's file system . I am able to delete the file using file name. For example,
import React, { Component } from "react";
import { Text, View } from "react-native";
var RNFS = require("react-native-fs");
var path = RNFS.ExternalDirectoryPath + "/abc.png";
export default class HelloWorldApp extends Component {
render() {
return (
RNFS.unlink(path)
.then(() => {
console.log("FILE DELETED");
console.log(path);
})
.catch(err => {
console.log(err.message);
console.log(path);
})
);
}
}
Here, file with name abc.png will get deleted.
Question 1 - But suppose if want all files with a particular extension (like .txt,.png) to get deleted, then how can i achieve that ??
Question 2- using this code, Although I am able to delete the file but i am getting error in console .
Invariant Violation: Objects are not valid as a React child (found:
object with keys {_40, _65, _55, _72}). If you meant to render a
collection of children, use an array instead.
in HelloWorldApp (at renderApplication.js:34)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:33)
I have used this documentation for writing code - https://github.com/itinance/react-native-fs

Answer 1

Delete files of a specific extension
It is possible to delete files with a specific extension it is a little involved but it is not too complicated. There are a few steps that we need to accomplish to make it happen.
Get a list of all the files in the directory
Filter the list so that only the files with the extension that we want to delete are left.
Unlink the files that are in our list.
So we could do something like this:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
const RNFS = require('react-native-fs');
export default class App extends Component<Props> {
deleteFiles = async () => {
let ext = 'txt'; // extention that we want to delete
var re = /(?:\.([^.]+))?$/; // regex to get the file extension of the file
try {
let path = RNFS.DocumentDirectoryPath;
let fileList = await RNFS.readDir(path); // get all the files in the directory
if (fileList.length) {
let filesToDelete = fileList.filter(file => {
let extension = re.exec(file.name)[1] // gets the extension of the found file
return extension === ext; // check to make sure that each file has the extension that we are looking for
});
for (const file of filesToDelete) {
if (file.isFile()) { // only delete if it is a file
try {
await RNFS.unlink(file.path);
console.log(`Successfully deleted ${file.name}`);
} catch (deleteError) {
console.log(`Error deleting ${file.name}`);
}
}
}
}
} catch (err) {
console.warn(err);
}
}
render() {
return (
<View style={styles.container}>
<Button title={'delete files'} onPress={this.deleteFiles} />
</View>
);
}
}
This is a simple component that renders a button on screen. The deleteFiles function is called when the button is pressed. Currently it is set up to delete all files with the extension txt
Error: Invariant Violation: Objects are not valid as a React child
You are calling the function inside the return of your render method. You shouldn't be doing that. Either implement something like I have above where the files are deleted on the press of a button or the function to delete is called via a specific action, if you need to delete the file when the component is created then you should be doing that inside the componentDidMount rather than in the render function.
componentDidMount () {
RNFS.unlink(path)
.then(() => {
console.log("FILE DELETED");
console.log(path);
})
.catch(err => {
console.log(err.message);
console.log(path);
});
}

Answer 2

You can use readdir to get the file names and then pass the ones you want to delete to unlink
This error is because you are not returning a component. The render() method expects a react component as its return value.

Answer 3

When you return something from render(){} it need to beJSX, you cant render RNFS, because it's not JSX.
return (
RNFS.unlink(path)
.then(() => {
console.log("FILE DELETED");
console.log(path);
})
.catch(err => {
console.log(err.message);
console.log(path);
})
);
I'm not sure what you want to render, but that is why you are getting this error.
Objects are not valid as a React child means "you can't render an Object", to render something, it need to be a JSX
(e.g <Text>hey<Text>)