React Native File Manager

A modern, developer-friendly file manager component for React Native, Expo, and Web applications. Provides a rich UI with navigation, file operations, theming, and cross-platform support.

Features

✅ Cross-platform support: Works with Expo, bare React Native, and Web
✅ Auto-detection: Automatically selects the appropriate file system provider
✅ Modern UI: Card-based design with grid/list views
✅ File operations: Delete, share, rename files and folders
✅ Multi-select: Bulk operations with visual selection indicators
✅ Dark/Light mode: Built-in theme toggle
✅ Navigation: Breadcrumb navigation with back button
✅ Search: Real-time file/folder search
✅ Root selector: Dropdown to switch between different root directories
✅ Web features: File download, demo file system for web environments

Installation

npm install react-native-file-manager
# or
yarn add react-native-file-manager

Dependencies

For full functionality, install the appropriate dependencies for your platform:

Expo projects:

npx expo install expo-file-system expo-media-library expo-sharing react-native-paper react-native-safe-area-context

Bare React Native projects:

# Option 1: Community maintained fork (recommended)
npm install @dr.pogodin/react-native-fs react-native-share react-native-paper react-native-safe-area-context

# Option 2: Original package
npm install react-native-fs react-native-share react-native-paper react-native-safe-area-context

Web projects: No additional dependencies needed - uses built-in browser APIs.

Usage

Simple Example (All Platforms)

import { useEffect, useState } from 'react';
import { View, Alert } from 'react-native';
import { 
  FileManager, 
  getDefaultProvider, 
  getAvailableDirectories,
  handleRootChange,
  createTestFiles
} from 'react-native-file-manager';

export default function App() {
  const [rootPath, setRootPath] = useState<string>('');
  const [isDarkMode, setIsDarkMode] = useState(false);
  
  const fileSystemProvider = getDefaultProvider();
  const availableDirectories = getAvailableDirectories();
  
  useEffect(() => {
    // Use first safe directory (no permissions needed)
    const safeDir = availableDirectories.find(dir => !dir.requiresPermission);
    if (safeDir) {
      setRootPath(safeDir.path);
      createTestFiles(safeDir.path); // Create demo files
    }
  }, []);

  const onRootChange = async (newPath: string) => {
    await handleRootChange(
      newPath,
      (path: string) => setRootPath(path),
      (error: string) => Alert.alert('Error', error)
    );
  };

  if (!rootPath) return null;

  return (
    <View style={{ flex: 1 }}>
      <FileManager 
        rootPath={rootPath}
        provider={fileSystemProvider}
        isDarkMode={isDarkMode}
        onThemeChange={setIsDarkMode}
        rootOptions={availableDirectories}
        onRootChange={onRootChange}
      />
    </View>
  );
}

Bare React Native Setup (Full External Storage Access)

For bare React Native projects with full external storage access:

# Option 1: Community maintained fork (recommended for newer RN versions)
npm install @dr.pogodin/react-native-fs react-native-share react-native-paper react-native-safe-area-context

# Option 2: Original package
npm install react-native-fs react-native-share react-native-paper react-native-safe-area-context

# iOS setup (both options)
cd ios && pod install
# Android - no additional setup needed

The library will automatically detect and use either @dr.pogodin/react-native-fs or react-native-fs, with preference for the community fork.

Manual Provider Selection

You can also manually specify which provider to use:

import React from 'react';
import { FileManager, expoFSProvider, webFSProvider } from 'react-native-file-manager';

export default function App() {
  return (
    <FileManager 
      rootPath="/"
      provider={expoFSProvider} // or webFSProvider, RNFSProvider
      onFileOpen={(file) => console.log('Opened:', file.name)}
    />
  );
}

Platform Support

Expo

• Uses expo-file-system for file operations
• Supports expo-sharing for file sharing
• Full file system access within app sandbox

Bare React Native

• Uses react-native-fs for file operations
• Supports react-native-share for sharing
• Full device file system access (with permissions)

Web

• Uses in-memory demo file system
• Supports file downloads via browser APIs
• Web Share API integration for modern browsers
• Clipboard API fallback for sharing

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | rootPath | string | '/' | Starting directory path | | provider | FileSystemProvider | Auto-detected | File system provider to use | | viewMode | 'list' \| 'grid' | 'list' | Initial view mode | | enableDelete | boolean | true | Enable delete functionality | | enableShare | boolean | true | Enable share functionality | | onFileOpen | (file: FileInfo) => void | - | Callback when file is opened | | isDarkMode | boolean | false | Control dark mode externally | | onThemeChange | (isDark: boolean) => void | - | Theme change callback | | rootOptions | Array<{label: string, path: string}> | - | Root directory options | | onRootChange | (path: string) => void | - | Root change callback |

Mobile Directory Access

iOS Directories

• Documents: App's private documents folder (always accessible)
• Cache: App's cache folder (may be cleared by system)
• Bundle: App's read-only bundle files

Note: iOS sandboxing restricts access to directories outside the app's container. Only the app's own Documents, Cache, and Bundle directories are reliably accessible.

Android Directories

• Internal Storage (No permissions needed):

  • Documents: App's private documents
  • Cache: App's private cache

• External Storage (Bare React Native only, requires permissions):

  • /storage/emulated/0/ - External storage root
  • /storage/emulated/0/Download/ - Downloads folder
  • /storage/emulated/0/Pictures/ - Pictures folder
  • /storage/emulated/0/DCIM/ - Camera photos
  • /storage/emulated/0/Music/ - Music files
  • /storage/emulated/0/Movies/ - Video files

Note: External storage access is limited in Expo environments due to security restrictions. For full external storage access, use bare React Native with react-native-fs.

Permissions Setup

For Android external storage access, you need to configure permissions:

Expo Projects

Add to your app.json:

{
  "expo": {
    "android": {
      "permissions": [
        "READ_EXTERNAL_STORAGE",
        "WRITE_EXTERNAL_STORAGE",
        "MANAGE_EXTERNAL_STORAGE"
      ],
      "requestLegacyExternalStorage": true
    },
    "plugins": [
      [
        "expo-media-library",
        {
          "photosPermission": "Allow $(PRODUCT_NAME) to access your photos.",
          "savePhotosPermission": "Allow $(PRODUCT_NAME) to save photos.",
          "isAccessMediaLocationEnabled": true
        }
      ]
    ]
  }
}

Bare React Native Projects

Add to android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />

<!-- For Android 10+ legacy external storage -->
<application
  android:requestLegacyExternalStorage="true"
  ... >

Permission Handling

The library automatically handles permission requests using modern Expo APIs:

• ✅ Uses expo-media-library (recommended, replaces deprecated expo-permissions)
• ✅ Shows system permission dialogs when accessing external storage
• ✅ Provides "Open Settings" option if permission is denied
• ✅ Graceful fallback to internal storage if permissions unavailable
• ✅ Visual indicators (🔒) for folders requiring permissions
• ✅ Fallback to PermissionsAndroid for bare React Native projects

Android Scoped Storage Notes

• Android 10+: Uses scoped storage by default
• Legacy mode: requestLegacyExternalStorage provides broader access
• Target API 30+: May require MANAGE_EXTERNAL_STORAGE for full access
• App-specific storage: Always accessible without permissions

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library