React Native Multiple Image Picker
source link: https://reactnativeexample.com/react-native-multiple-image-picker/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
react-native-multiple-image-picker
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
Demo 👉👈
iOS AndroidInstallation
npm i @baronha/react-native-multiple-image-picker
or
yarn add @baronha/react-native-multiple-image-picker
Don't forget the Privacy Description in
info.plist
and add file.swift
in your project (and create bridging header file swift).
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:
-
Open your
ios/project.xcworkspace
project. -
In the project navigator panel (located on the right side of Xcode), select your project group (i.e. the item with the blueprint icon).
-
The Xcode project editor should appear. In the left panel, under the "Project" section, select your project (if it isn't already selected).
-
In the project section's top tab bar, select the "Build Settings" tab (also make sure the "All" and "Combined" tabs are selected).
-
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).
-
Change the entry
"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)"
to"$(TOOLCHAIN_DIR)/usr/lib/swift-5.3/$(PLATFORM_NAME)"
i.e. changeswift-5.0
toswift-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.
-
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.
-
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 runningpod install
again).
- Try clearing out Xcode's
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 "@baronha/react-native-multiple-image-picker";
// ...
const response = await MultipleImagePicker.openPicker(options);
Features
- [x] Selected order index.
- [x] Support smart album collection.
- [x] Camera roll, selfies, panoramas, favorites, videos, custom users album
- [x] Support Camera
- [x] Playback video and live photos.
- [x] Just one. playback first video or live Photo in bounds of visible cell.
- [x] Display video duration.
- [x] Async phasset request and displayed cell.
- [x] Scrolling performance is better than facebook in displaying video assets collection.
- [x] Reload of changes that occur in the Photos library.
- [x] 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 includeall
, 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- [ ] Video Compression
- [ ] Hmmm...
GitHub
https://github.com/baronha/react-native-multiple-image-picker
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK