repository·main·Indexed 20 days ago
https://github.com/nitrogenzlab/react-native-multiple-image-pickerA library for picking images and videos from multiple smart albums on iOS and Android, built upon HXPhotoPicker and PictureSelector. It provides functionality to open a media picker via openPicker, capture photos and videos using openCamera, and crop images with openCropper. Supports custom UI themes, selection limits, media type filtering, and multiple interface languages.
React Native Multiple Image Picker (RNMIP) is a library that enables applications to pick both images and videos from multiple smart albums on both iOS and Android.
It is built upon two native libraries:
It is designed for high performance and supports advanced features like iCloud Photo Library on iOS and smart album selection (camera roll, selfies, favorites, etc.) on both platforms.
The library provides a comprehensive suite of media picking features:
numberOfColumn, spacing, and primaryColor. Supports both Dark Mode and Light Mode.To set up the example project, use yarn to install dependencies and then run yarn prebuild --clean to prepare the Expo environment.
$ yarn
$ yarn prebuild --cleanFor React Native CLI projects, you must add usage descriptions to your Info.plist inside the outermost <dict> tag to request access to the photo library, camera, and microphone.
<key>NSPhotoLibraryAddUsageDescription</key>
<string>$(PRODUCT_NAME) needs photo library permissions</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) needs photo library permissions</string>
<!-- if you allow camera, you need to add this:-->
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs to access your Camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) needs to access your microphone so that you can record audio.</string>To use the camera module, you must add the following permissions to your native configuration files.
Add these keys to your Info.plist:
<key>NSCameraUsageDescription</key>
<string>Camera access is required to take photos and videos</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone access is required to record videos</string>Add these permissions to your AndroidManifest.xml:
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" /><key>NSCameraUsageDescription</key>
<string>Camera access is required to take photos and videos</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone access is required to record videos</string>For Managed Expo projects, add the permission keys to the ios.infoPlist section of your app.json, app.config.json, or app.config.js. After updating the config, run npx expo prebuild and build a new binary using EAS.
{
"name": "my app",
"ios": {
"infoPlist": {
"NSPhotoLibraryAddUsageDescription": "$(PRODUCT_NAME) needs photo library permissions",
"NSPhotoLibraryUsageDescription": "$(PRODUCT_NAME) needs photo library permissions",
"NSCameraUsageDescription": "$(PRODUCT_NAME) needs to access your Camera",
"NSMicrophoneUsageDescription": "$(PRODUCT_NAME) needs to access your microphone so that you can record audio"
}
}
}npx expo prebuild
eas buildTo launch the image picker interface, import openPicker and a Config type from @baronha/react-native-multiple-image-picker. Pass a configuration object to openPicker(), which returns a Promise that resolves with the selected media. Use a try/catch block to handle potential errors during the picking process.
import { openPicker, Config } from '@baronha/react-native-multiple-image-picker'
const config: Config = {
maxSelect: 10,
maxVideo: 10,
primaryColor: '#F6B35D',
backgroundDark: '#2f2f2f',
numberOfColumn: 4,
mediaType: 'all',
selectBoxStyle: 'number',
selectMode: 'multiple',
language: 'vi',
theme: 'dark',
isHiddenOriginalButton: false,
}
const onPicker = async () => {
try {
const response = await openPicker(config)
// response contains the selected images/videos
setImages(response)
} catch (e) {
// catch error for multiple image picker
}
}Before installing the picker, you must ensure react-native-nitro-modules is installed. Choose the command set corresponding to your environment (React Native CLI or Expo).
### React Native CLI
```bash
yarn add @baronha/react-native-multiple-image-picker
yarn add -D react-native-nitro-modules
cd ios && pod installnpx expo install @baronha/react-native-multiple-image-picker
npx expo install react-native-nitro-modules -- --dev
npx expo prebuildReact Native Multiple Image Picker (RNMIP) uses Nitro Modules. Ensure your environment meets the following minimum requirements:
compileSdkVersion 34+Control how users preview selected assets:
isPreview: Enables/disables the preview feature (default: true).isShowPreviewList: (iOS only) Shows a preview list.isHiddenPreviewButton: Hides the preview button.allowHapticTouchPreview: Enables haptic feedback during preview.You can change the language of the interface or provide custom text for specific buttons.
Custom Text Labels (text object):
finish: Text for the finish/done button.original: Text for the original button.preview: Text for the preview button.edit: Text for the edit button.Interface Language (language string):
Supported values: system (default), zh-Hans, zh-Hant, ja, ko, en, vi, ru, de, fr, ar.
iOS Only support: id (Indonesian), th (Thai).
You can customize the visual appearance of the picker using the following keys:
theme: The color mode. Options: light, dark, system (default).primaryColor: The color for primary UI elements (default: #2979ff).backgroundDark: The background color for dark mode (default: #1A1A1A).selectBoxStyle: How the selection indicator appears. Options: number (shows numbers, default), tick (shows checkmark).spacing: Grid item spacing (default: 2).numberOfColumn: Number of columns in the grid (default: 4).presentation: (iOS only) Modal style. Options: fullScreenModal (default), formSheet.