Navigate back to the homepage

How to get file details in react native

Infinitbility
React Native
August 29th, 2021 · 1 min read
How to get file details in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help to get file details like file name, file type, file created date, file last modified date, and file size in react native with example. Here we use react-native-fs package ( https://github.com/itinance/react-native-fs ) to check file details.

Introduction

React Native FS provide stat() function to get file details and will return Promise with file details of name, path, ctime, mtime, size, and mode.

react native fs stat() function using syntax and response example.

1stat(filepath: string): Promise<StatResult>
  • react native fs stat() function response.
1type StatResult = {
2 path: // The same as filepath argument
3 ctime: date; // The creation date of the file
4 mtime: date; // The last modified date of the file
5 size: string; // Size in bytes
6 mode: number; // UNIX file mode
7 originalFilepath: string; // ANDROID: In case of content uri this is the pointed file path, otherwise is the same as path
8 isFile: () => boolean; // Is the file just a file?
9 isDirectory: () => boolean; // Is the file a directory?
10};

Installation

First you need to install react-native-fs:

1npm install react-native-fs --save

Note: If your react-native version is < 0.40 install with this tag instead:

1npm install [email protected] --save

Link react-native-fs

1npx react-native link react-native-fs

React Native FS stat() example

For stat() example, we have pick path on device file:///storage/emulated/0/Pictures/Screenshots/Screenshot_20210828-135547.png and print detais got from stat(). stat() not return file thats ehy we use regex to show file name. check below example code and Output image.

1import React, { Component } from 'react';
2import {
3 StyleSheet,
4 View,
5 Text,
6 SafeAreaView,
7} from 'react-native';
8import { stat } from 'react-native-fs';
9
10
11class App extends Component {
12
13 constructor(props) {
14 super(props);
15
16 this.state = {
17 fileDetails: {},
18 fileName: ""
19 }
20 }
21
22
23 componentDidMount(){
24 this.fetchFileDetail();
25 }
26
27 fetchFileDetail = async () => {
28 const filePath = "file:///storage/emulated/0/Pictures/Screenshots/Screenshot_20210828-135547.png";
29 var filename = filePath.replace(/^.*[\\\/]/, '')
30
31 const statResult = await stat(filePath);
32 console.log(statResult);
33 this.setState({fileDetails: statResult, filename: filename})
34 }
35
36 render() {
37 const { fileDetails, filename } = this.state;
38 return (
39 <SafeAreaView style={{ flex: 1 }}>
40 <View style={styles.container}>
41 <Text>File details</Text>
42 <Text>Ctime: {`${fileDetails.ctime}`}</Text>
43 <Text>mode: {`${fileDetails.mode}`}</Text>
44 <Text>mtime: {`${fileDetails.mtime}`}</Text>
45 <Text>originalFilepath: {`${fileDetails.originalFilepath}`}</Text>
46 <Text>path: {`${fileDetails.path}`}</Text>
47 <Text>size: {`${fileDetails.size}`}</Text>
48 <Text>file name: {`${filename}`}</Text>
49 </View>
50 </SafeAreaView>
51 );
52 }
53}
54
55const styles = StyleSheet.create({
56 container: {
57 flex: 1,
58 alignItems: 'center',
59 marginTop: 20,
60 backgroundColor: '#ffffff',
61 },
62});
63
64export default App;

Output

React Native, react-native-fs, stat, Example

Thanks for Reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to get seconds between two dates in javascript

How to get seconds between two dates in javascript

Get seconds differance between two dates in javascript example

August 28th, 2021 · 1 min read
How to detect screen lock set or not in react native

How to detect screen lock set or not in react native

React Native DeviceInfo isPinOrFingerprintSet example

August 27th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]