IMPORTATNT NOTE: this is an early BETA of React Native System Picker only iOS is available at the moment. Android is coming soon (I promise). The library is well tested and stable, although the API structure and props may change in upcoming releases.

The React Native System Picker is a library designed to interface with the photo/video pickers provided by the system on iOS and Android. This specifically allows you to interface with the system provided pickers PHPicker and Android Photo Picker. This library is designed to be a drop-in replacement for react-native-image-picker and react-native-image-crop-picker.

Features

• Built using TDD with explicit unit tests for each MIME type. See the list of supported MIME types below 🧪
• Uses the latest APIs for photo picking on iOS and Android 📱
• Correctly implements platform APIs without abusing permissions (more on this below) 🔒
• Returns complete MIME type information, without unnecessarily stripping out information like other libraries 📄
• Exposes methods for extracting metadata from images and videos outside of the picker flow. Read more about this problem here 📊

This library focuses on picking your photos and videos correctly. The native code has been rewritten from the ground up following the most up-to-date specifications for photo picking on iOS and Android.

A Quick Background of Photo Picking In React Naitve

Before installing this library, I'd like to explain how photo picking works and why you might prefer this library over others, such as react-native-image-picker or react-native-image-crop-picker.

As a contributor to react-native-image-picker in the last few years, I (@lukebrandonfarrell) noticed a number of design flaws. Which led me to create this new library from scratch. The main issue is that PHPicker on iOS and Android Photo Picker (their new picker in Android 11+) are designed so YOU DO NOT NEED TO REQUEST PERMISSIONS (You heard that correctly, no permissions dialog needed to pick photos). However, react-native-image-picker is designed in such a way that it requires you to request permissions just to read the metadata of the photo, which is NOT HOW THESE PICKERS ARE INTENDED TO BE USED. Does this mean we can't read exif data? Not at all. React Native System Picker returns full exif data for images without needing any platform permissions. If you wish to learn more about this issue, you can read my article: The right way to use PHPicker and retrieve EXIF data without requesting library permissions in Swift.

If this seems confusing, I understand. If you want to deep dive into the why and how, you can read either of the following:

• Deep Dive into iOS Photo Picking
• Deep Dive into Android Photo Picking

Installation

npm install react-native-system-picker
# or
yarn add react-native-system-picker

Usage

Basic usage is as follows:

import { launchSystemLibrary } from 'react-native-system-picker';

launchSystemLibrary({
  filter: 'images',
  selectionLimit: 4,
  maxSize: 3000,
  quality: 0.8,
  imageOutputType: 'png',
  enableDebugMode: true,
}).then((result) => {
  setAssets(result);
});

If you are looking for more advanced usage, you can find the full documentation here.

Supported MIME Types

The following MIME types are supported by React Native System Picker. This list is as extensive as possible without needing to include third-party libraries such as FFmpeg. Based on all the data and research we have done on photo picking, this should cover 99.9% of cases. However, the library is designed to be extensible if we need additional MIME types.

MIME type support is backed by XCTestCase unit tests on iOS.

Image MIME Types

| Extension | MIME Type | Status | Platform | |-----------|--------------------------------|---------------|----------| | GIF | Graphics Interchange Format | Supported | iOS | | HEIC | High Efficiency Image Coding | Supported | iOS | | HEIF | High Efficiency Image Format | Supported | iOS | | PNG | Portable Network Graphics | Supported | iOS | | TIFF | Tagged Image File Format | Supported | iOS | | WEBP | WebP | Supported | iOS | | CR2 | Canon Raw 2 | Supported | iOS | | JPEG | Joint Photographic Experts Group | Supported | iOS | | DNG | Digital Negative | Supported | iOS | | ICO | Icon | Supported | iOS | | BMP | Bitmap | Supported | iOS | | NEF | Nikon Electronic Format | Supported | iOS | | EXR | OpenEXR | Supported | iOS | | JP2 | JPEG 2000 | Supported | iOS | | RAF | Raw Image Format | Supported | iOS | | PNM | Portable Any Map | Supported | iOS | | WBMP | Wireless Bitmap | Supported | iOS | | TGA | Targa | Supported | iOS | | SGI | Silicon Graphics Image | Supported | iOS | | RW2 | Raw (Panasonic) | Supported | iOS | | PSD | Photoshop Document | Supported | iOS | | PPM | Portable Pixel Map | Supported | iOS | | PGM | Portable GrayMap | Supported | iOS | | PFM | Portable FloatMap | Supported | iOS | | JPE | JPEG | Supported | iOS | | JFIF | JPEG File Interchange Format | Supported | iOS | | HDR | Radiance HDR | Supported | iOS | | DDS | DirectDraw Surface | Supported | iOS | | SVG | Scalable Vector Graphics | Not Supported | iOS | | ARW | Sony Alpha Raw | Not Supported | iOS | | PICT | Macintosh PICT | Not Supported | iOS | | PCX | PC Paintbrush | Not Supported | iOS | | RAS | Sun Raster | Not Supported | iOS | | XPM | X PixMap | Not Supported | iOS | | XBM | X BitMap | Not Supported | iOS | | EPS | Encapsulated PostScript | Not Supported | iOS | | NRW | Nikon Raw Image | Not Supported | iOS | | MNG | Multiple-image Network Graphics| Not Supported | iOS | | FTS | Flexible Image Transport System| Not Supported | iOS | | EMF | Enhanced Metafile | Not Supported | iOS | | CUR | Windows Cursor | Not Supported | iOS |

Video MIME Types

| Extension | MIME Type | Status | Platform | |-----------|--------------------------------|---------------|----------| | MP4 | MPEG-4 Part 14 | Supported | iOS | | MOV | QuickTime File Format | Supported | iOS | | 3GP | 3GPP | Supported | iOS | | AVI | Audio Video Interleave | Not Supported | iOS | | MKV | Matroska | Not Supported | iOS | | WMV | Windows Media Video | Not Supported | iOS | | FLV | Flash Video | Not Supported | iOS | | WEBM | WebM | Not Supported | iOS | | DIVX | DivX | Not Supported | iOS | | ASF | Advanced Systems Format | Not Supported | iOS | | RM | RealMedia | Not Supported | iOS | | OGV | Ogg Video | Not Supported | iOS | | MXF | MXF | Not Supported | iOS | | MTS | MPEG Transport Stream | Not Supported | iOS | | MPG | MPEG-1 | Not Supported | iOS | | MJPEG | Motion JPEG | Not Supported | iOS | | MPEG | Motion Picture Experts Group | Not Supported | iOS | | FLV | Flash Video | Not Supported | iOS | | MKV | Matroska Video | Not Supported | iOS |

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