react-native-new-image-picker

iOS/Android image picker with support for camera, configurable compression, multiple images and cropping

Usage

Import library

``javascript
import ImagePicker from 'react-native-new-image-picker';
`

$3

Call single image picker with cropping
`javascript
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true
}).then(image => {
console.log(image);
});
`

Call multiple image picker

`javascript
ImagePicker.openPicker({
multiple: true
}).then(images => {
console.log(images);
});
`

Select video only from gallery

`javascript
ImagePicker.openPicker({
mediaType: "video",
}).then((video) => {
console.log(video);
});
`

Android: The prop 'cropping' has been known to cause videos not to be display in the gallery on Android. Please do not set cropping to true when selecting videos.




$3

`javascript
ImagePicker.openCamera({
width: 300,
height: 400,
cropping: true
}).then(image => {
console.log(image);
});
`

$3

`javascript
ImagePicker.openCropper({
path: 'my-file-path.jpg',
width: 300,
height: 400
}).then(image => {
console.log(image);
});
`

$3

Module is creating tmp images which are going to be cleaned up automatically somewhere in the future. If you want to force cleanup, you can use clean to clean all tmp files, or cleanSingle(path) to clean single tmp file.

`javascript
ImagePicker.clean().then(() => {
console.log('removed all tmp images from tmp directory');
}).catch(e => {
alert(e);
});
`

$3

| Property | Type | Description |
| --------------------------------------- | :--------------------------------------: | :--------------------------------------- |
| cropping | bool (default false) | Enable or disable cropping |
| width | number | Width of result image when used with cropping option |
| height | number | Height of result image when used with cropping option |
| multiple | bool (default false) | Enable or disable multiple image selection |
| writeTempFile (ios only) | bool (default true) | When set to false, does not write temporary files for the selected images. This is useful to improve performance when you are retrieving file contents with the includeBase64 option and don't need to read files from disk. |
| includeBase64 | bool (default false) | Enable or disable returning base64 data with image |
| cropperCircleOverlay | bool (default false) | Enable or disable circular cropping mask. |
| imageCount | number (default 5) | Max number of files to select when using multiple option |
| waitAnimationEnd (ios only) | bool (default true) | Promise will resolve/reject once ViewController completion block is called |
| smartAlbums (ios only) | array (supported values) (default ['UserLibrary', 'PhotoStream', 'Panoramas', 'Videos', 'Bursts']) | List of smart albums to choose from |
| useFrontCamera (ios only) | bool (default false) | Whether to default to the front/'selfie' camera when opened |
| compressVideoPreset (ios only) | string (default MediumQuality) | Choose which preset will be used for video compression |
| compressImageMaxWidth | number (default none) | Compress image with maximum width |
| compressImageMaxHeight | number (default none) | Compress image with maximum height |
| compressImageQuality | number (default 1) | Compress image with quality (from 0 to 1, where 1 is best quality) |
| loadingLabelText (ios only) | string (default "Processing assets...") | Text displayed while photo is loading in picker |
| mediaType | string (default photo) | Accepted mediaType for image selection, can be one of: 'photo', 'video'
| showsSelectedCount (ios only) | bool (default true) | Whether to show the number of selected assets |

#### Smart Album Types (ios)

`
['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure']
`

$3

| Property | Type | Description |
| ------------------------- | :----: | :--------------------------------------- |
| path | string | Selected image location. This is null when the writeTempFile option is set to false. |
| localIdentifier(ios only) | string | Selected images' localidentifier, used for PHAsset searching |
| sourceURL(ios only) | string | Selected images' source path, do not have write access |
| filename(ios only) | string | Selected images' filename |
| width | number | Selected image width |
| height | number | Selected image height |
| original_uri(Android only)| string | 图片原始路径 |
| size | number | Selected image size in bytes |
| data | base64 | Optional base64 selected file representation |
| cropRect (ios only) | object | Cropped image rectangle (width, height, x, y) |
| creationDate (ios only) | string | UNIX timestamp when image was created |
| modificationDate | string | UNIX timestamp when image was last modified |

Install

Install package

`bash
npm i react-native-new-image-picker --save
`

Link the package using react-native link:

`bash
react-native link react-native-new-image-picker
`

Post-install steps

$3

#### Step 1:

In Xcode open Info.plist and add string key NSPhotoLibraryUsageDescription with value that describes why you need access to user photos. More info here https://forums.developer.apple.com/thread/62229. Depending on what features you use, you also may need NSCameraUsageDescription and NSMicrophoneUsageDescription keys.

#### Step 2:

##### Cocoapods (Highly recommended)

`bash
cd ios
pod init
`

After this you have to add pod dependencies to Podfile. Open Podfile with your editor, and add or adjust example configuration:

`bash
platform :ios, '8.0'

target '' do
pod 'RSKImageCropper'
pod 'QBImagePickerController'
end
`

After this run:

`bash
pod install
`

##### Manual

- Drag and drop the ios/ImageCropPickerSDK folder to your xcode project. (Make sure Copy items if needed IS ticked)
- Click on project General tab
- Under Deployment Info set Deployment Target to 8.0
- Under Embedded Binaries click + and add RSKImageCropper.framework and QBImagePicker.framework

$3


##### 1、在 build.gradle 中添加 maven { url "https://jitpack.io" } 和Google 配置：
`gradle
buildscript {
repositories {
jcenter()
maven {
url 'https://maven.google.com/'
name 'Google'
}
google()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.0'

// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
jcenter()
maven { url "https://jitpack.io" }
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
`

##### 2、在 AndroidManifest.xml 中添加权限：
`xml



`

##### 3、更新到 PictureSelector 2.2.0 需要修改：
`gradle
// app/build.gradle

android {
compileSdkVersion 26
buildToolsVersion "26.0.3"
...
}
`



$3


1. 检查自动 link 是否成功
2. 使用 Android Studio 查看 MainApplication.java 文件是否添加 new RNImagePickerPackage()
3. 使用 Android Studio 打开项目检查 Gradle 是否同步完成

Production build

$3

#### Cocoapods (Highly recommended)

- You are already done

#### Manual

If you are using pre-built frameworks from ios/ImageCropPickerSDK, then before deploying app to production you should strip off simulator ARCHs from these, or you can add frameworks from Libraries/imageCropPicker/Libraries/_framework_name_.xcodeproj/Products/_framework_name_.framework to Embedded Binaries instead of pre-built ones.

Details for second approach:

1. Remove the pre-built frameworks from Embedded Binaries
2. Build for Device
3. Add the newly built binaries for both frameworks to Embedded Binaries (located at Libraries/imageCropPicker/Libraries/_framework_name_.xcodeproj/Products/_framework_name_.framework`)

License

MIT

提示

该包结合react-native-syan-image-picker 和 react-native-image-crop-picker 根据自身项目需求修改，api具有一定差异性，仅供参考使用