{"id":21893596,"url":"https://github.com/xhmm/react-native-dir-viewer","last_synced_at":"2025-10-29T21:17:46.258Z","repository":{"id":159199739,"uuid":"634504640","full_name":"XHMM/react-native-dir-viewer","owner":"XHMM","description":"A react-native component for intuitively visualizing directory structure (aka a simple GUI for your directory)","archived":false,"fork":false,"pushed_at":"2023-05-01T17:09:39.000Z","size":479,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T15:37:51.446Z","etag":null,"topics":["file-viewer","react-native","reactjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/XHMM.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-04-30T10:49:28.000Z","updated_at":"2023-07-14T04:46:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"86d07ed0-f9b6-4cf2-9f3b-7ab117cc9db2","html_url":"https://github.com/XHMM/react-native-dir-viewer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/XHMM/react-native-dir-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XHMM%2Freact-native-dir-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XHMM%2Freact-native-dir-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XHMM%2Freact-native-dir-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XHMM%2Freact-native-dir-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/XHMM","download_url":"https://codeload.github.com/XHMM/react-native-dir-viewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XHMM%2Freact-native-dir-viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281699634,"owners_count":26546359,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-29T02:00:06.901Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["file-viewer","react-native","reactjs"],"created_at":"2024-11-28T13:15:14.868Z","updated_at":"2025-10-29T21:17:46.252Z","avatar_url":"https://github.com/XHMM.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-dir-viewer\n\n`react-native-dir-viewer` provide a component for intuitively visualizing directory structure (aka a simple GUI for your directory).\n\nIt supports:\n- view basic info: modify time and content size\n- navigate with back and forward (just like mac finder)\n- create/rename/delete file/dir\n- file edit (utf-8 content only)\n\n\u003cimg src=\"./static/ios-preview.png\" width=\"300\"\u003e\n\n## Installation\nThe lib depends on [`react-native-file-access`](https://github.com/alpha0010/react-native-file-access) for file operation, you need to install it first:\n\n```sh\nnpm install react-native-file-access\nnpx pod-install\n```\n\nThen:\n```shell\nnpm install react-native-dir-viewer\n```\n\n## Usage\n\n```tsx\nimport * as React from 'react';\n\nimport { SafeAreaView } from 'react-native';\nimport { Dirs } from 'react-native-file-access';\nimport { DirReader } from 'react-native-dir-viewer';\n\nexport default function App() {\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cDirReader\n        baseDir={Dirs.CacheDir}\n        /* optional */\n        listHeight={400}\n        /* optional */\n        containerStyle={{}}\n      /\u003e\n    \u003c/SafeAreaView\u003e\n  );\n}\n\n```\n\nCurrently `DirReader` component not provide custom style control capability, it's mainly used for debug purpose\n\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxhmm%2Freact-native-dir-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxhmm%2Freact-native-dir-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxhmm%2Freact-native-dir-viewer/lists"}