Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/liaoyuan-io/react-native-multiple-image-picker
React Native Multiple Image Picker
https://github.com/liaoyuan-io/react-native-multiple-image-picker
Last synced: about 2 months ago
JSON representation
React Native Multiple Image Picker
- Host: GitHub
- URL: https://github.com/liaoyuan-io/react-native-multiple-image-picker
- Owner: liaoyuan-io
- License: mit
- Created: 2016-06-20T19:10:40.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-14T15:43:24.000Z (about 6 years ago)
- Last Synced: 2024-05-13T04:20:29.233Z (5 months ago)
- Language: Objective-C
- Size: 8.24 MB
- Stars: 41
- Watchers: 10
- Forks: 11
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native-native-modules - react-native-multiple-image-picker ★32
README
# react-native-multiple-image-picker
React Native Multiple Image Picker is a React Native native module wrapping [TZImagePickerController](https://github.com/banchichen/TZImagePickerController) for iOS (iOS 8+ for using PhotoKit) and [RxGalleryFinal](https://github.com/FinalTeam/RxGalleryFinal) for Android (Android 4.1+). This module allows you to pick multiple images for further processing.
React Native Multiple Image Picker 多图片选择器 是一个 React Native 原生模块，封装了 [TZImagePickerController](https://github.com/banchichen/TZImagePickerController)（用于 iOS 8+，因为使用了 PhotoKit）和 [RxGalleryFinal](https://github.com/FinalTeam/RxGalleryFinal)（用于 Android 4.1+，尚处于**试验阶段**）。使用这个模块你可以一次选择多张图片，以供进一步处理。
## Known Issues
- Currently, [RxGalleryFinal](https://github.com/FinalTeam/RxGalleryFinal) is still in a **pre-release** stage and is **NOT READY for production** yet. Image previews are not presented in correct aspect ratios.
## Install
### iOS
1. Run `npm install --save react-native-multiple-image-picker` .
2. Add `RCTMultipleImagePicker` to your iOS project.
3. Add `libRCTMultipleImagePicker.a` to your `Link Binary with Libraries` section in `Build Phases` .
4. Copy `TZImagePickerController.framework` to your `Framework` folder.
5. Add `TZImagePickerController.framework` to your `Framework` group and `Embedded Binaries` section in `Target->General` .
### Android
1. Run `npm install --save react-native-multiple-image-picker` .
2. Add `new MultipleImagePickerPackage()` to your `getPackages` return in `android/app/src/main/java/com/your/path/MainApplication.java`.
3. Add following to your `android/app/src/main/AndroidManifest.xml`:
```
// permission declaration
// in application
```
4. Add `compile project(':react-native-multiple-image-picker')` to `dependencies` section in `android/app/build.gradle` .
5. Add following to your `android/settings.gradle`:
```
include ':react-native-multiple-image-picker'
project(':react-native-multiple-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-multiple-image-picker/android')
```
## Usage
```javascript
import MultipleImagePicker from 'react-native-multiple-image-picker';
const options = {
maxImagesCount: 9, // Max number of images user can select; if maxImagesCount == 1, Single mode (i.e. Tap to Select & Finish) will be activated.
selectedPaths: [
'/Users/tshen/Library/Developer/CoreSimulator/Devices/8C416B45-F555-4A63-A1B0-09E61109F0A0/data/Containers/Data/Application/A1790255-CDE8-486C-A6BA-1693BA2AA87B/Documents/BB6ADD56-09E7-402C-BF0E-AD79400D3889-7539-000007B93A6B5733/0.jpg',
'/Users/tshen/Library/Developer/CoreSimulator/Devices/8C416B45-F555-4A63-A1B0-09E61109F0A0/data/Containers/Data/Application/A1790255-CDE8-486C-A6BA-1693BA2AA87B/Documents/BB6ADD56-09E7-402C-BF0E-AD79400D3889-7539-000007B93A6B5733/1.jpg',
'/Users/tshen/Library/Developer/CoreSimulator/Devices/8C416B45-F555-4A63-A1B0-09E61109F0A0/data/Containers/Data/Application/A1790255-CDE8-486C-A6BA-1693BA2AA87B/Documents/BB6ADD56-09E7-402C-BF0E-AD79400D3889-7539-000007B93A6B5733/2.jpg',
'/Users/tshen/Library/Developer/CoreSimulator/Devices/8C416B45-F555-4A63-A1B0-09E61109F0A0/data/Containers/Data/Application/A1790255-CDE8-486C-A6BA-1693BA2AA87B/Documents/BB6ADD56-09E7-402C-BF0E-AD79400D3889-7539-000007B93A6B5733/3.jpg'
] // Currently selected paths, must be from result of previous calls. Empty array allowed.
};
MultipleImagePicker.launchImageGallery(options).then((newSelectedPaths) => {
// newSelectedPaths will be an Array of String, like [ '/path/1', '/path/2' ], and may be used for `selectedPaths` on the next invocation
});
```
## Error Codes
| Code | Platform | Description |
| ----------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------- |
| camera_permission_not_granted | iOS | User has not granted CAMERA permission to your app. Should guide user to Settings > Privacy > Camera . |
| create_directory_failed | iOS | The app has failed to create the temp folder for photo processing due to insufficient storage or other system errors. |
| user_cancelled | iOS | User has cancelled the image picker. |