Socket
Socket
Sign inDemoInstall

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

Package Overview
Dependencies
752
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@phong95/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.


Version published
Maintainers
1
Weekly downloads
1

Weekly downloads

Readme

Source

React Native Multiple Image Picker (RNMIP)

This lib i forked from https://www.npmjs.com/package/@baronha/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 👉👈

iOSAndroid

Installation

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

iOS

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:

  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" />
    <!-- request permission android version < 13 -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <!-- request permission android version >= 13 -->
    <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
    <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />

Usage

See options

import MultipleImagePicker from '@ko-developerhong/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.
  • Download from iCloud. ...etc

Options

PropertyTypeDefault valuePlatformDescription
usedCameraButtonbooltrueBothShow camera button in first row
mediaTypestringallBothSelect the media format you want. Values include all, image, video. Default is all.
isPreviewbooltrueBothAllows to preview the image / video will select (iOS - Forcetouch)
maxVideoDurationnumber60BothShow only video with time allowed (in seconds)
numberOfColumnnumber3BothNumber of columns in a row
maxVideonumber20BothNumber of videos allowed to select
maxSelectedAssetsnumber20BothMaximum number of one selection
singleSelectedModeboolfalseBothOnly one image / video can be selected
isExportThumbnailboolfalseBothExport thumbnail image for Video type
selectedAssetsArrayundefinedBothImages / Videos selected to mark
doneTitlestringDoneBothTitle in button Done
cancelTitlestringCancelBothTitle in button Cancel
selectedColorstring#FB9300BothThe color of the mark in the row when the user selected
autoPlaybooltrueiOSAuto play video
allowedLivePhotosbooltrueiOSAllowed Live Photos type
emptyMessagestringNo albumsiOSShow string when gallery empty
selectMessagestringselectiOSShow string when long pressing on image not selected
deselectMessagestringdeselectiOSShow string when long pressing on image selected
maximumMessageTitlestringNotificationiOSThe title of the alert when the user chooses to exceed the specified number of pictures
messageTitleButtonstringNotificationiOSThe title of button in the alert when the user chooses to exceed the specified number of pictures
tapHereToChangestringTap here to changeiOSThe sub-title in navigation bar (under albums's name in iOS)
maximumMessagestringYou have selected the maximum number of media allowediOSThe description of the alert when the user chooses to exceed the specified number of pictures
maximumVideoMessagestringYou have selected the maximum number of media allowediOSThe description of the alert when the user chooses to exceed the specified number of videos
selectedAssets (Important)

Get an Array value only(Only works when singleSelectedMode === false). 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

PropertyTypePlatformDescription
pathstringBothSelected media's path
fileNamestringBothSelected media's file name
localIdentifierstringBothSelected media's local identifier
widthnumberBothSelected photo/video width
heightnumberBothSelected photo/video height
mimestringBothSelected photo/video MIME type (image/jpeg, image/png, video/mp4 etc...)
typestringBothSelected image type (image or video)
sizenumberBothSelected photo/video size in bytes
durationnumberBothduration of the video (0 for images)
thumbnailstringBothAppears only in video format and you must have set isExportThumbnail = true. See options
realPathstringAndroidReal path to file
parentFolderNamestringAndroidParent folder name of file
creationDatestringiOSUNIX timestamp when image was created

To Do

  • (Bug) Record Video (iOS).
  • Crop Image in iOS.

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

Keywords

FAQs

Last updated on 04 Apr 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc