react-native-image-picker vs react-native-fs vs react-native-document-picker vs expo-document-picker
Document and Image Picking in React Native Comparison
Search packages..
1 Year
react-native-image-pickerreact-native-fsreact-native-document-pickerexpo-document-pickerSimilar Packages:
What's Document and Image Picking in React Native?

These npm packages provide functionalities for selecting documents and images in React Native applications. They allow developers to integrate file picking capabilities into their apps, enabling users to upload files from their device storage or cloud services. Each package has its unique features and use cases, catering to different requirements in mobile app development.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-native-image-picker288,3268,545189 kB3174 days agoMIT
react-native-fs277,8375,017570 kB623-MIT
react-native-document-picker167,4961,418135 kB109 months agoMIT
expo-document-picker157,55539,96699.5 kB7798 days agoMIT
Feature Comparison: react-native-image-picker vs react-native-fs vs react-native-document-picker vs expo-document-picker

File Type Support

  • react-native-image-picker:

    react-native-image-picker is specifically designed for images and videos, supporting various formats such as JPEG, PNG, and MP4. It allows users to capture media directly from the camera or select from the gallery, streamlining the media selection process.

  • react-native-fs:

    react-native-fs does not directly handle file picking but provides functionalities for managing files once they are selected. It allows for operations on files of any type, including reading, writing, and deleting, making it versatile for file management tasks.

  • react-native-document-picker:

    react-native-document-picker offers extensive file type support, enabling users to select documents of various formats such as PDFs, images, and text files. It also allows for custom MIME types, giving developers control over the types of files that can be picked.

  • expo-document-picker:

    expo-document-picker supports a wide range of file types including images, PDFs, and other document formats. It allows users to pick files from both local storage and cloud services, providing flexibility in file selection.

Ease of Use

  • react-native-image-picker:

    react-native-image-picker is relatively easy to use, with a clear API for capturing and selecting images. However, it may require additional permissions handling on both Android and iOS, which could add to the complexity.

  • react-native-fs:

    react-native-fs has a more complex API due to its extensive functionalities for file management. While powerful, it may require more effort to learn and implement effectively, especially for beginners.

  • react-native-document-picker:

    react-native-document-picker provides a simple API but may require additional setup for linking native modules. It is user-friendly but may involve a steeper learning curve compared to Expo packages for those unfamiliar with native configurations.

  • expo-document-picker:

    expo-document-picker is designed for ease of use, especially for developers using the Expo framework. Its API is straightforward, requiring minimal setup and configuration, making it ideal for quick implementations.

Integration with Expo

  • react-native-image-picker:

    react-native-image-picker can be used in both Expo and non-Expo projects, but similar to react-native-document-picker, it requires additional configuration for Expo users.

  • react-native-fs:

    react-native-fs can be used in both Expo and non-Expo projects, but requires additional setup for Expo users. It is more suited for projects that do not rely heavily on Expo's managed services.

  • react-native-document-picker:

    react-native-document-picker is not designed for Expo projects out of the box, requiring developers to eject from Expo to use it, which can complicate the development process for those relying on Expo's managed workflow.

  • expo-document-picker:

    expo-document-picker is fully integrated with the Expo ecosystem, allowing for seamless use in Expo-managed projects without the need for additional configuration or native code.

Platform Compatibility

  • react-native-image-picker:

    react-native-image-picker supports both iOS and Android, providing a native experience for capturing and selecting media. It is optimized for performance on both platforms, ensuring a smooth user experience.

  • react-native-fs:

    react-native-fs is compatible with both platforms, allowing developers to manage files on iOS and Android devices. Its functionality is consistent across platforms, making it a reliable choice for file management tasks.

  • react-native-document-picker:

    react-native-document-picker also supports both iOS and Android, offering native performance and capabilities. It allows for platform-specific configurations, giving developers more control over the user experience.

  • expo-document-picker:

    expo-document-picker is compatible with both iOS and Android, providing a consistent experience across platforms. It abstracts away platform-specific details, making it easier for developers to implement file picking.

Community Support and Maintenance

  • react-native-image-picker:

    react-native-image-picker is widely used and has a robust community backing it. Regular updates and active issue resolution contribute to its reliability and performance.

  • react-native-fs:

    react-native-fs has a dedicated user base and is regularly maintained, but its complexity may lead to slower updates compared to simpler packages. However, it remains a popular choice for file system operations.

  • react-native-document-picker:

    react-native-document-picker has a large community and is actively maintained, with frequent updates and contributions from developers. This ensures that it stays up-to-date with the latest React Native features and best practices.

  • expo-document-picker:

    expo-document-picker benefits from strong community support within the Expo ecosystem, with regular updates and a wealth of documentation available to assist developers.

How to Choose: react-native-image-picker vs react-native-fs vs react-native-document-picker vs expo-document-picker
  • react-native-image-picker:

    Use react-native-image-picker when your primary focus is on capturing or selecting images and videos from the device's camera or gallery. It provides a robust API for handling media selection and is optimized for performance, making it suitable for applications that heavily rely on image and video content.

  • react-native-fs:

    Opt for react-native-fs if your application requires file system access beyond just picking files. This package allows for reading, writing, and managing files on the device's file system, making it ideal for applications that need to handle file storage and manipulation directly.

  • react-native-document-picker:

    Select react-native-document-picker if you need a more customizable and flexible solution that works outside of the Expo environment. This package allows for advanced configurations and supports both Android and iOS, making it suitable for projects that require native capabilities and extensive file type support.

  • expo-document-picker:

    Choose expo-document-picker if you are already using Expo for your React Native project and want a straightforward solution that integrates seamlessly with the Expo ecosystem. It provides a simple API for picking documents and supports multiple file types, making it ideal for Expo-managed workflows.

Similar Npm Packages to react-native-image-picker

react-native-image-picker is a popular library for React Native applications that allows users to select images and videos from their device's library or capture new media using the camera. This library provides a simple and customizable interface for accessing the device's media, making it a go-to choice for developers looking to implement media selection functionality in their apps. While react-native-image-picker is widely used, there are other libraries that offer similar capabilities. Here are a few alternatives:

  • react-native-camera is a versatile library that provides a camera component for React Native applications. It allows developers to capture photos and videos directly from the camera, as well as scan barcodes and QR codes. While react-native-camera focuses primarily on camera functionality, it can be used in conjunction with other libraries to create a comprehensive media selection experience. If your application requires advanced camera features or real-time image processing, react-native-camera is an excellent choice.
  • react-native-image-crop-picker is another powerful library that allows users to select images and videos from their device's library or capture new media. In addition to media selection, it offers advanced features such as image cropping and resizing, making it a great option for applications that require image manipulation. If you need more control over the media selection process and want to provide users with the ability to crop or resize images, react-native-image-crop-picker is a strong alternative to consider.

To see how these packages compare, check out the comparison: Comparing react-native-camera vs react-native-image-crop-picker vs react-native-image-picker.

Similar Npm Packages to react-native-fs

react-native-fs is a file system library for React Native applications that allows developers to interact with the device's file system. It provides functionalities for reading, writing, and managing files and directories, making it a powerful tool for applications that require file handling capabilities. With react-native-fs, developers can perform tasks such as downloading files, uploading files, and accessing local storage, which are essential for many mobile applications.

While react-native-fs is a robust solution for file system operations, there are other libraries in the React Native ecosystem that provide alternative functionalities. Here are a couple of notable alternatives:

  • react-native-blob-util is a library that provides a set of utilities for handling binary data and file uploads in React Native. It is particularly useful for applications that need to work with large files, such as images or videos, and offers features like file streaming, multipart uploads, and base64 encoding. If your application requires efficient handling of binary data and file uploads, react-native-blob-util is an excellent choice.
  • react-native-document-picker is a library that allows users to select documents from their device's file system. It provides a user-friendly interface for picking files, making it easy to integrate document selection into your React Native application. If your app needs to allow users to upload or select files from their device, react-native-document-picker is a great complement to file handling libraries like react-native-fs.

To see how react-native-fs compares with react-native-blob-util and react-native-document-picker, check out the comparison: Comparing react-native-blob-util vs react-native-document-picker vs react-native-fs.

Similar Npm Packages to react-native-document-picker

react-native-document-picker is a popular library for React Native applications that allows users to select documents from their device's file system. This library provides a simple and efficient way to integrate document picking functionality into your mobile applications, making it easy for users to upload files or select documents for various purposes.

While react-native-document-picker is a robust solution, there are several alternatives in the React Native ecosystem that offer similar functionalities. Here are a few noteworthy options:

  • expo-document-picker is a part of the Expo SDK, which provides a set of tools and services for building React Native applications. This library allows users to pick documents from their device or cloud storage. If you are already using Expo for your project, expo-document-picker is a convenient choice, as it integrates seamlessly with the Expo ecosystem and requires minimal setup.
  • react-native-fs is a file system library for React Native that allows you to read, write, and manage files on the device. While it does not directly provide document picking functionality, it can be used in conjunction with other libraries to handle file operations after a document has been selected. If your application requires extensive file management capabilities, react-native-fs is a powerful tool to consider.
  • react-native-image-picker is a library specifically designed for selecting images and videos from the device's library or capturing them using the camera. While it focuses on media files rather than documents, it is a popular choice for applications that require image or video uploads. If your use case involves handling media files, react-native-image-picker is an excellent alternative.

To see how these packages compare, check out the comparison: Comparing expo-document-picker vs react-native-document-picker vs react-native-fs vs react-native-image-picker.

Similar Npm Packages to expo-document-picker

expo-document-picker is a library that allows users to select documents from their device's file system in Expo applications. It provides a simple and efficient way to access files, enabling developers to build applications that require file uploads or document management. While expo-document-picker is a powerful tool for document selection, there are several alternatives in the React Native ecosystem that offer similar functionality. Here are a few notable alternatives:

  • expo-file-system is a library that provides access to the device's file system in Expo applications. While it does not specifically focus on document picking, it allows developers to read, write, and manage files on the device. This library is useful for applications that need to handle file storage and manipulation, making it a good complement to document picking solutions. If your application requires more extensive file management capabilities alongside document picking, expo-file-system can be a valuable addition.
  • react-native-document-picker is a popular library for selecting documents in React Native applications. Unlike expo-document-picker, which is tailored for Expo, react-native-document-picker can be used in both Expo and non-Expo projects. It provides a straightforward API for accessing the device's document picker, allowing users to select files from various sources. If you are looking for a more flexible solution that can be integrated into both Expo and bare React Native projects, react-native-document-picker is an excellent choice.
  • react-native-fs is a file system library for React Native that enables developers to interact with the device's file system. It provides functionalities for reading, writing, and managing files, similar to expo-file-system. While it does not offer document picking capabilities, it can be used in conjunction with other libraries to handle file operations after a document has been selected. If your application requires low-level file system access and manipulation, react-native-fs is a powerful option.
  • react-native-image-picker is a library specifically designed for selecting images and videos from the device's gallery or camera. While its primary focus is on media selection, it can be used alongside document pickers for applications that require both document and media handling. If your application needs to manage images and videos in addition to documents, react-native-image-picker is a great choice.

For a comprehensive comparison of these libraries, check out the link: Comparing expo-document-picker vs expo-file-system vs react-native-document-picker vs react-native-fs vs react-native-image-picker.

README for react-native-image-picker

react-native-image-picker 🎆

A React Native module that allows you to select a photo/video from the device library or camera.

npm downloads npm package License

Installation

yarn add react-native-image-picker

New Architecture

To take advantage of the new architecture run-

iOS

RCT_NEW_ARCH_ENABLED=1 npx pod-install ios

Android

Set newArchEnabled to true inside android/gradle.properties

Pre-Fabric (AKA not using the new architecture)

npx pod-install ios

Post-install Steps

iOS

Add the appropriate keys to your Info.plist depending on your requirement:

| Requirement | Key | | ------------------------------ | ------------------------------------------------------- | | Select image/video from photos | NSPhotoLibraryUsageDescription | | Capture Image | NSCameraUsageDescription | | Capture Video | NSCameraUsageDescription & NSMicrophoneUsageDescription |

Android

No permissions required (saveToPhotos requires permission check).

Note: This library does not require Manifest.permission.CAMERA, if your app declares as using this permission in manifest then you have to obtain the permission before using launchCamera.

Targeting Android API Levels Below 30

If your app's minSdkVersion is set to below 30 and it does not already include or depend on androidx.activity:activity:1.9.+ or a newer version, you'll need to add the following line to the dependencies section of your app/build.gradle file to ensure support for the backported AndroidX Photo Picker:

dependencies {
    ...
    implementation("androidx.activity:activity:1.9.+")
    ...
}

Additionally, you may need to update your AndroidManifest.xml to trigger the installation of the backported Photo Picker. For reference, you can check the example app's configuration in example/android/app/src/main/AndroidManifest.xml and example/android/app/build.gradle.

For more details, consult the Android documentation on AndroidX Photo Picker: https://developer.android.com/training/data-storage/shared/photopicker

API Reference

Methods

import {launchCamera, launchImageLibrary} from 'react-native-image-picker';

launchCamera()

Launch camera to take photo or video.

launchCamera(options?, callback);

// You can also use as a promise without 'callback':
const result = await launchCamera(options?);

See Options for further information on options.

The callback will be called with a response object, refer to The Response Object.

launchImageLibrary

Launch gallery to pick image or video.

launchImageLibrary(options?, callback)

// You can also use as a promise without 'callback':
const result = await launchImageLibrary(options?);

See Options for further information on options.

The callback will be called with a response object, refer to The Response Object.

Options

| Option | iOS | Android | Web | Description | | ----------------------- | --- | ------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | mediaType | OK | OK | OK | photo or video or mixed(launchCamera on Android does not support 'mixed'). Web only supports 'photo' for now. | | restrictMimeTypes | NO | OK | NO | Array containing the mime-types allowed to be picked. Default is empty (everything). | | maxWidth | OK | OK | NO | To resize the image. | | maxHeight | OK | OK | NO | To resize the image. | | videoQuality | OK | OK | NO | low, medium, or high on iOS, low or high on Android. | | durationLimit | OK | OK | NO | Video max duration (in seconds). | | quality | OK | OK | NO | 0 to 1, photos. | | conversionQuality | NO | OK | NO | For conversion from HEIC/HEIF to JPEG, 0 to 1. Default is 0.92 | | cameraType | OK | OK | NO | 'back' or 'front' (May not be supported in few android devices). | | includeBase64 | OK | OK | OK | If true, creates base64 string of the image (Avoid using on large image files due to performance). | | includeExtra | OK | OK | NO | If true, will include extra data which requires library permissions to be requested (i.e. exif data). | | saveToPhotos | OK | OK | NO | (Boolean) Only for launchCamera, saves the image/video file captured to public photo. | | selectionLimit | OK | OK | OK | Supports providing any integer value. Use 0 to allow any number of files on iOS version >= 14 & Android version >= 13. Default is 1. | | presentationStyle | OK | NO | NO | Controls how the picker is presented. currentContext, pageSheet, fullScreen, formSheet, popover, overFullScreen, overCurrentContext. Default is currentContext. | | formatAsMp4 | OK | NO | NO | Converts the selected video to MP4 (iOS Only). | | assetRepresentationMode | OK | OK | NO | A mode that determines which representation to use if an asset contains more than one on iOS or disables HEIC/HEIF to JPEG conversion on Android if set to 'current'. Possible values: 'auto', 'current', 'compatible'. Default is 'auto'. |

|

The Response Object

| key | iOS | Android | Web | Description | | ------------ | --- | ------- | --- | ------------------------------------------------------------------- | | didCancel | OK | OK | OK | true if the user cancelled the process | | errorCode | OK | OK | OK | Check ErrorCode for all error codes | | errorMessage | OK | OK | OK | Description of the error, use it for debug purpose only | | assets | OK | OK | OK | Array of the selected media, refer to Asset Object |

Asset Object

| key | iOS | Android | Web | Photo/Video | Requires Permissions | Description | | ------------ | --- | ------- | --- | ----------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | base64 | OK | OK | OK | PHOTO ONLY | NO | The base64 string of the image (photos only) | | uri | OK | OK | OK | BOTH | NO | The file uri in app specific cache storage. Except when picking video from Android gallery where you will get read only content uri, to get file uri in this case copy the file to app specific storage using any react-native library. For web it uses the base64 as uri. | | originalPath | NO | OK | NO | BOTH | NO | The original file path. | | width | OK | OK | OK | BOTH | NO | Asset dimensions | | height | OK | OK | OK | BOTH | NO | Asset dimensions | | fileSize | OK | OK | NO | BOTH | NO | The file size | | type | OK | OK | NO | BOTH | NO | The file type | | fileName | OK | OK | NO | BOTH | NO | The file name | | duration | OK | OK | NO | VIDEO ONLY | NO | The selected video duration in seconds | | bitrate | --- | OK | NO | VIDEO ONLY | NO | The average bitrate (in bits/sec) of the selected video, if available. (Android only) | | timestamp | OK | OK | NO | BOTH | YES | Timestamp of the asset. Only included if 'includeExtra' is true | | id | OK | OK | NO | BOTH | YES | local identifier of the photo or video. On Android, this is the same as fileName |

Note on file storage

Image/video captured via camera will be stored in temporary folder allowing it to be deleted any time, so don't expect it to persist. Use saveToPhotos: true (default is false) to save the file in the public photos. saveToPhotos requires WRITE_EXTERNAL_STORAGE permission on Android 28 and below (The permission has to obtained by the App manually as the library does not handle that).

For web, this doesn't work.

ErrorCode

| Code | Description | | ------------------ | ------------------------------------------------- | | camera_unavailable | Camera not available on device | | permission | Permission not satisfied | | others | Other errors (check errorMessage for description) |

License

MIT

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc or npmjs.com, the official website for the npm registry. Please note that npm is a registered trademark of npm, Inc. For more details, please refer to our Terms & Privacy.