react-native-full-image-picker

中文说明

It is a react native UI component including a camera view and an album selection view. You can take photos, take video recording or select photo from photo library.

It supports:

• Take photos by camera.
• Video recording.
• Select photos from photo library.
• Safe area for iPhone X.
• Portrait and Landscape mode.
• Multiple selection or capture mode.
• Preview after capture or video recording.
• Maximum count of photos.

ScreenShots

Same UI on Android.

Install

Install by Yarn:

yarn add react-native-full-image-picker

Install by NPM:

npm install --save react-native-full-image-picker

NOTICE: This library has no native code for iOS and Android. But you should also install native code of these libraries:

• CameraRoll: Used to get all photos in camera roll or photo library.
• react-native-camera: Used to show camera in view.
• react-native-video: Used to preview the video.
• react-native-fs: Used to copy generated photo or video to a temporary place.

Usage

First import in the file:

import * as ImagePicker from 'react-native-full-image-picker';

It has three method:

• ImagePicker.getCamera(options): Take photo from camera. (Camera Mode)
• ImagePicker.getVideo(options): Video recording. (Video Mode)
• ImagePicker.getAlbum(options): Select photo or video from photo library. (Photo Mode)

options is a object with these settings:

• callback: (data: any[]) => void: Callback method with photo or video array. data is an uri array of photo or video. Do not use Alert in this callback method.
• maxSize?: number: The maximum number of photo count. Valid in camera or photo library mode.
• sideType?: RNCamera.Constants.Type: Side of camera, back or front. Valid in camera or video.
• pictureOptions?: RNCamera.PictureOptions: The options of RNCamera.takePictureAsync(PictureOptions)
• recordingOptions?: RNCamera.RecordingOptions: The options of RNCamera.recordAsync(RecordingOptions)
• flashMode?: RNCamera.Constants.FlashMode: Flash mode. Valid in camera or video.

You can use react-native-general-actionsheet to show ActionSheet by same API and UI with ActionSheetIOS.

Change Default Property

You can import page and change defaultProps to modify settings globally:

import * as ImagePicker from 'react-native-full-image-picker';

ImagePicker.XXX.defaultProps.yyy = ...;

The XXX is the export items of library. Following is the detail.

PhotoModalPage

This is the outter navigator for all modes. You can change these properties of defaultProps:

| Name | Type | Description | | :-: | :-: | :- | | okLabel | string | OK button text | | cancelLabel | string | Cancel button text | | deleteLabel | string | Delete button text | useVideoLabel | string | UseVideo button text | | usePhotoLabel | string | UsePhoto button text | | previewLabel | string | Preview button text | | choosePhotoTitle | string | ChoosePhoto page title | | maxSizeChooseAlert | (num: number) => string | Max size limit alert message when choosing photos | | maxSizeTakeAlert | (num: number) => string | Max size limit alert message when taking photos from camera | | supportedOrientations | string[] | Supported orientations. Default is landscape and portrait |

CameraView

This is page for taking photos from camera or recording video. You can change these properties of defaultProps:

| Name | Type | Description | | :-: | :-: | :- | | maxSize | number | Default max number limit | | sideType | RNCamera.Constants.Type | Camera side type. Default is back | | flashMode | RNCamera.Constants.FlashMode | Flash mode. Default is off |

AlbumListView

This is page for selecting photo from photo library. You can change these properties of defaultProps:

| Name | Type | Description | | :-: | :-: | :- | | maxSize | number | Default max number limit | | autoConvertPath | boolean | Auto copy photo or not to convert file path to standard file path. Default is false | | assetType | string | Asset type. Please see CameraRoll Docs | | groupTypes | string | Group type. Please see CameraRoll Docs |