@baronha/react-native-multiple-image-picker

React Native Multiple Image Picker (RNMIP)

React Native Multiple Image Picker enables application to pick images and videos from multiple smart album in iOS/Android, similar to the current Facebook App. React Native Multiple Image Picker is based on two libraries available, TLPhotoPicker and PictureSelector

What's new (0.2.1)

add options maxVideo - default value is 20. See more

Demo 👉👈

iOS	Android

Installation

npm i @baronha/react-native-multiple-image-picker
or
yarn add @baronha/react-native-multiple-image-picker

iOS

Don't forget the Privacy Description in info.plist.

cd ios/ && pod install

Issue

When installing this library on Xcode 12, you'll get the following error in Xcode:

Undefined symbol: (extension in UIKit):
__C.UIMenu.init(title: Swift.String, image: __C.UIImage?, identifier: __C.UIMenuIdentifier?, options: __C.UIMenuOptions, children: [__C.UIMenuElement]) -> __C.UIMenu

Undefined symbol: (extension in UIKit):
__C.UIAction.init(title: Swift.String, image: __C.UIImage?, identifier: __C.UIActionIdentifier?, discoverabilityTitle: Swift.String?, attributes: __C.UIMenuElementAttributes, state: __C.UIMenuElementState, handler: (__C.UIAction) -> ()) -> __C.UIAction

Here are some related issues in the RN repo: Issue 30202 and Issue 29178. This bug could be fixed in a future version of react native, but a workaround I've found is to do the following:

1. Open your ios/project.xcworkspace project.

2. In the project navigator panel (located on the right side of Xcode), select your project group (i.e. the item with the blueprint icon).

3. The Xcode project editor should appear. In the left panel, under the "Project" section, select your project (if it isn't already selected).

4. In the project section's top tab bar, select the "Build Settings" tab (also make sure the "All" and "Combined" tabs are selected).

5. In the project navigator list, under the "Search Path" section, there should be a "Library Search Paths" setting (alternatively, you can search for "Library Search Paths" in the search bar).

6. Change the entry "$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)" to "$(TOOLCHAIN_DIR)/usr/lib/swift-5.3/$(PLATFORM_NAME)" i.e. change swift-5.0 to swift-5.3 (to show the popup dialog, double click the value/item).

   • Alternatively, according to this issue comment, you can clear all the items listed in the "Library Search Paths" setting. TLDR: Xcode automatically manages this setting, and the RN template hardcodes it to use Swift 5.0.

7. If you haven't already, make sure to create an empty swift file. Then clean the build folder (the option is in the menu bar under: "Product" -> "Clean Build Folder") and try building your project again.

8. If you are still having problems building the app, try the following and build your project again:

   • Try clearing out Xcode's derivedData directory: rm -rf ~/Library/Developer/Xcode/DerivedData/* (check out this gist for instructions on how to clean up Xcode)
   • Try clearing out the Cocoapods cache: rm -rf "${HOME}/Library/Caches/CocoaPods" (and then try running pod install again).

Android

Add Permission in AndroidManifest.xml

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Usage

See options

import MultipleImagePicker from "react-native-multiple-image-picker";
// ...
const response = await MultipleImagePicker.openPicker(options);

Features

• Selected order index.
• Support smart album collection.
• Camera roll, selfies, panoramas, favorites, videos, custom users album
• Support Camera
• Playback video and live photos.
• Just one. playback first video or live Photo in bounds of visible cell.
• Display video duration.
• Async phasset request and displayed cell.
• Scrolling performance is better than facebook in displaying video assets collection.
• Reload of changes that occur in the Photos library.
• Preview photo. ...etc

Options

Property	Type	Default value	Platform	Description
usedCameraButton	bool	true	Both	Show camera button in first row
mediaType	string	all	Both	Select the media format you want. Values include all, image, video. Default is all.
isPreview	bool	true	Both	Allows to preview the image / video will select (iOS - Forcetouch)
maxVideoDuration	number	60	Both	Show only video with time allowed (in seconds)
numberOfColumn	number	3	Both	Number of columns in a row
maxVideo	number	20	Both	Number of videos allowed to select
maxSelectedAssets	number	20	Both	Maximum number of one selection
singleSelectedMode	bool	false	Both	Only one image / video can be selected
isExportThumbnail	bool	false	Both	Export thumbnail image for Video type
selectedAssets	Array	undefined	Both	Images / Videos selected to mark
doneTitle	string	Done	Both	Title in button Done
cancelTitle	string	Cancel	Both	Title in button Cancel
selectedColor	string	#30475e	Both	The color of the mark in the row when the user selected
autoPlay	bool	true	iOS	Auto play video
allowedLivePhotos	bool	true	iOS	Allowed Live Photos type
emptyMessage	string	No albums	iOS	Show string when gallery empty
maximumMessageTitle	string	Notification	iOS	The title of the alert when the user chooses to exceed the specified number of pictures
messageTitleButton	string	Notification	iOS	The title of button in the alert when the user chooses to exceed the specified number of pictures
maximumMessage	string	You have selected the maximum number of media allowed	iOS	The description of the alert when the user chooses to exceed the specified number of pictures
tapHereToChange	string	Tap here to change	iOS	The sub-title in navigation bar (under albums's name in iOS)

selectedAssets (Important)

Get an Array value only. If you want React Native Multiple Image Picker to re-select previously selected images / videos, you need to add “selectedAssets” in options. Perhaps I say a little bit confusing. See Example for more details.

Response Object

Property	Type	Platform	Description
path	string	Both	Selected images's path
filename	string	Both	Selected images's filename
localIdentifier	string	Both	Selected images's local identifier
width	number	Both	Selected image width
height	number	Both	Selected image height
mime	string	Both	Selected image MIME type (image/jpeg, image/png, video/mp4 etc...)
type	string	Both	Selected image type (image or video)
thumbnail	string	Both	Appears only in video format and you must have set isExportThumbnail = true. See options
creationDate	string	iOS	UNIX timestamp when image was created

To Do

• Crop photo.
• Multiple croping photo (Android only).
• Video Compression

Performance

We're trying to improve performance. If you have a better solution, please open a issue or pull request. Best regards!

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT
TLPhotoPicker
PictureSelector