rnn

react-native-new-image-picker

react-native-new-image-picker

Showing:

Popularity

Downloads/wk

1

Maintenance

No Maintenance Data Available

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

react-native-new-image-picker

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

Usage

Import library

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

Call single image picker with cropping

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

Call multiple image picker

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

Select video only from gallery

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.

Select from camera

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

Crop picture

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

Optional cleanup

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.

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

Request Object

PropertyTypeDescription
croppingbool (default false)Enable or disable cropping
widthnumberWidth of result image when used with cropping option
heightnumberHeight of result image when used with cropping option
multiplebool (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.
includeBase64bool (default false)Enable or disable returning base64 data with image
cropperCircleOverlaybool (default false)Enable or disable circular cropping mask.
imageCountnumber (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
compressImageMaxWidthnumber (default none)Compress image with maximum width
compressImageMaxHeightnumber (default none)Compress image with maximum height
compressImageQualitynumber (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
mediaTypestring (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']

Response Object

PropertyTypeDescription
pathstringSelected image location. This is null when the writeTempFile option is set to false.
localIdentifier(ios only)stringSelected images' localidentifier, used for PHAsset searching
sourceURL(ios only)stringSelected images' source path, do not have write access
filename(ios only)stringSelected images' filename
widthnumberSelected image width
heightnumberSelected image height
original_uri(Android only)string图片原始路径
sizenumberSelected image size in bytes
database64Optional base64 selected file representation
cropRect (ios only)objectCropped image rectangle (width, height, x, y)
creationDate (ios only)stringUNIX timestamp when image was created
modificationDatestringUNIX timestamp when image was last modified

Install

Install package

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

Link the package using react-native link:

react-native link react-native-new-image-picker

Post-install steps

iOS

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:

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:

platform :ios, '8.0'

target '<your_project_name>' do
    pod 'RSKImageCropper'
    pod 'QBImagePickerController'
end

After this run:

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

Android

1、在 build.gradle 中添加 maven { url "https://jitpack.io" }Google 配置:
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 中添加权限:
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
3、更新到 PictureSelector 2.2.0 需要修改:
// app/build.gradle

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

注意安装运行报错

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

Production build

iOS

  • 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具有一定差异性,仅供参考使用

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

rni
react-native-image-crop-pickeriOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping
User Rating
4.5/ 5
4
Top Feedback
4Great Documentation
3Easy to Use
1Performant
GitHub Stars
5K
Weekly Downloads
75K
expo-image-pickerAn open-source platform for making universal native apps with React. Expo runs on Android, iOS, and the web.
User Rating
3.5/ 5
2
Top Feedback
2Great Documentation
2Easy to Use
2Performant
GitHub Stars
15K
Weekly Downloads
48K
rnp
react-native-photo-browserLocal and remote media gallery with captions, selections and grid view support for react native.
User RatingN/A
Top Feedback
N/A
GitHub Stars
705
Weekly Downloads
270
react-native-image-picker:sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera.
User Rating
4.3/ 5
15
Top Feedback
14Great Documentation
12Easy to Use
6Performant
GitHub Stars
7K
Weekly Downloads
105K
rnc
react-native-camera-roll-picker📷 A React Native component providing images selection from camera roll
User RatingN/A
Top Feedback
N/A
GitHub Stars
409
Weekly Downloads
147
See 10 Alternatives

Tutorials

No tutorials found
Add a tutorial