https://github.com/xhmm/react-native-dir-viewer
A react-native component for intuitively visualizing directory structure (aka a simple GUI for your directory)
https://github.com/xhmm/react-native-dir-viewer
file-viewer react-native reactjs
Last synced: 8 months ago
JSON representation
A react-native component for intuitively visualizing directory structure (aka a simple GUI for your directory)
- Host: GitHub
- URL: https://github.com/xhmm/react-native-dir-viewer
- Owner: XHMM
- License: mit
- Created: 2023-04-30T10:49:28.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-01T17:09:39.000Z (about 3 years ago)
- Last Synced: 2025-04-15T15:37:51.446Z (about 1 year ago)
- Topics: file-viewer, react-native, reactjs
- Language: TypeScript
- Homepage:
- Size: 468 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-dir-viewer
`react-native-dir-viewer` provide a component for intuitively visualizing directory structure (aka a simple GUI for your directory).
It supports:
- view basic info: modify time and content size
- navigate with back and forward (just like mac finder)
- create/rename/delete file/dir
- file edit (utf-8 content only)
## Installation
The lib depends on [`react-native-file-access`](https://github.com/alpha0010/react-native-file-access) for file operation, you need to install it first:
```sh
npm install react-native-file-access
npx pod-install
```
Then:
```shell
npm install react-native-dir-viewer
```
## Usage
```tsx
import * as React from 'react';
import { SafeAreaView } from 'react-native';
import { Dirs } from 'react-native-file-access';
import { DirReader } from 'react-native-dir-viewer';
export default function App() {
return (
);
}
```
Currently `DirReader` component not provide custom style control capability, it's mainly used for debug purpose
## License
MIT