npm

Need private packages and team management tools?Check out npm Orgs. »

react-native-camera-roll-selector

1.3.3 • Public • Published

react-native-camera-roll-selector

LueHsoft LueH LABS Lue Hang luehang

An easy and simple to use React Native component providing images selection from camera roll. The images in the camera roll are displayed with a custom high performant masonry layout. Supporting both iOS and Android. Free and made possible along with costly maintenance and updates by Lue Hang (the author).

Check out the docs for a complete documentation.








react-native-camera-roll-selector

react-native-camera-roll-selector landscape

ℹ️ Learn more about React Native with project examples along with Cyber Security and Ethical Hacking at LH LABS.








Index

1. Getting Started

2. Android Installation

3. iOS Installation

3. Usage Example

4. 📚 API

5. Props

6. Reference

7. Example Project

8. Author

9. Contribute

10. License








🔷 Getting Started

Type in the following to the command line to install the dependency.

$ npm install --save react-native-camera-roll-selector

or

$ yarn add react-native-camera-roll-selector

ℹ️ No further installation is required for Android.



LueHsoft LueH LABS Lue Hang luehang

🔷 Android Installation


ℹ️ Android REQUIREMENT.

User's permission is required to access the Camera Roll. Add the following to AndroidManifest.xml which can be found in android/app/src/main.

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







🔷 iOS Installation

ℹ️ No further installation is required for Android.


ℹ️ iOS REQUIREMENT.

  1. react-native-camera-roll-selector uses React Native's CameraRoll API. It requires the RCTCameraRoll library to be linked. Learn more about Linking Libraries (iOS) clicking here or read for further instructions.

  1. Access the node_modules/react-native/Libraries/CameraRoll directory and look for RCTCameraRoll.xcodeproj. Drag this file to your project on Xcode (usually under the Libraries group on Xcode).

iOS Linking Libraries: Add to Libraries


  1. Click on your main .xcodeproj project file and select the Build Phases tab and drag the static library from the Products folder inside the library you are importing to Link Binary With Libraries.

iOS Linking Libraries: Add to Build Phases


ℹ️ Important: On devices running iOS 10 or later.

User's permission is required to access the Camera Roll. Add the NSPhotoLibraryUsageDescription key in your Info.plist with a string that describes how your app will use this data. This key will appear as Privacy - Photo Library Usage Description in Xcode.

<dict>
    <!-- ... -->
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Requesting access to the photo library.</string>
    <!-- ... -->
</dict>

ℹ️ Optional: On devices running iOS 11 or later.

It is required to add the NSPhotoLibraryAddUsageDescription key in your Info.plist. After that, define a string that describes how your app will use this data. By adding this key to your Info.plist, you will be able to request write-only access permission from the user. If you try to save to the camera roll without this permission, your app will exit.

<dict>
    <!-- ... -->
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>Requesting write-only access permission.</string>
    <!-- ... -->
</dict>


LueHsoft LueH LABS Lue Hang luehang

🔷 Usage Example

Add an import to the top of the file.

At minimal, declare the CameraRollGallery component in the render().

If you like react-native-camera-roll-selector, please be sure to give it a star at GitHub. Thanks.

import CameraRollSelector from "react-native-camera-roll-selector";
 
//...
render() {
    return (
        <CameraRollSelector
            callback={(selectedImages, currentSelectedImage) => {
                console.log(
                    "Current selected image: ",
                    currentSelectedImage
                );
                console.log(
                    "Selected images: ",
                    selectedImages
                );
            }}
        />
    );
}
//...







🔷 API

<CameraRollSelector /> component accepts the following props...


🔷 Props

- callback

- imagesPerRow

- initialColToRender

- initialNumInColsToRender

- spacing

- groupTypes

- assetType

- maximum

- selectSingleItem

- selected

- backgroundColor

- emptyText

- emptyTextStyle

- loaderColor

- customLoader

- imageContainerStyle

- markerColor

- customMarker

- renderIndividualHeader

- renderIndividualFooter

- onPressImage

- onLongPressImage

- containerWidth

- permissionDialogTitle

- permissionDialogMessage

- pendingAuthorizedView

- notAuthorizedView



LueHsoft LueH LABS Lue Hang luehang

🔷 Reference

If you like react-native-camera-roll-selector, please be sure to give it a star at GitHub. Thanks.

Props


🔹 callback

 
(selectedImages: Array, currentSelectedImage: Object) => void
 

Callback function when images was selected. Defaults to (selectedImages, currentSelectedImage) => { console.log(currentSelectedImage); console.log(selectedImages); }.

TYPE REQUIRED
Function No



🔹 imagesPerRow

Number of images per row. Defaults to 3.

TYPE REQUIRED
number No



🔹 initialColToRender

How many columns to render in the initial batch. Defaults to imagesPerRow.

TYPE REQUIRED
String No



🔹 initialNumInColsToRender

How many items to render in each column in the initial batch. Defaults to 1.

TYPE REQUIRED
number No



🔹 spacing

Gutter size of the column. The spacing is a multiplier of 1% of the available view. Defaults to 1.

TYPE REQUIRED
number No



🔹 groupTypes

The group where the photos will be fetched, one of "Album", "All", "Event", "Faces", "Library", "PhotoStream" and "SavedPhotos". Defaults to "All".

TYPE REQUIRED
String No



🔹 assetType

The asset type, one of "Photos", "Videos" or "All". Defaults to "Photos".

TYPE REQUIRED
String No



🔹 maximum

Maximum number of selected images. Defaults to 10.

TYPE REQUIRED
number No



🔹 selectSingleItem

To select only one single image at time or not. Defaults to false.

TYPE REQUIRED
Boolean No


LueHsoft LueH LABS Lue Hang luehang

🔹 selected

An object of images in an array that are already selected. Defaults to [].

TYPE REQUIRED
Array No



🔹 backgroundColor

Set the color of the background. Defaults to "white".

TYPE REQUIRED
String No



🔹 emptyText

Text to display instead of a list when there are no photos found. Defaults to "No photos.".

TYPE REQUIRED
String No



🔹 emptyTextStyle

Styles to apply to the emptyText. Defaults to {textAlign: "center"}.

TYPE REQUIRED
Object No



🔹 loaderColor

The foreground color of the initial load spinner. Defaults to "lightblue".

TYPE REQUIRED
String No



🔹 customLoader

Camera Roll loader component node. Defaults to <ActivityIndicator />.

TYPE REQUIRED
React.Element No



🔹 imageContainerStyle

The styles object which is added to the Image component. Defaults to {}.

TYPE REQUIRED
Object No



🔹 markerColor

The color of the marker image. Defaults to "white".

TYPE REQUIRED
string No



🔹 renderIndividualHeader

 
(item: Object, index: number) => ?React.Element
 

Custom function that is executed ABOVE each individual masonry image.

TYPE REQUIRED
Function No



🔹 renderIndividualFooter

 
(item: Object, index: number) => ?React.Element
 

Custom function that is executed BELOW each individual masonry image.

TYPE REQUIRED
Function No


LueHsoft LueH LABS Lue Hang luehang

🔹 onPressImage

 
(item: Object, index: number) => void
 

Custom function that is executed after a single tap on the image.

TYPE REQUIRED
Function No



🔹 onLongPressImage

 
(item: Object, index: number) => void
 

Custom function that is executed after a long press on the image.

TYPE REQUIRED
Function No



🔹 customMarker

Custom selected image marker component.

TYPE REQUIRED
React.Element No



🔹 containerWidth

The width of the masonry list layout. Adding this will improve performance.

TYPE REQUIRED
number No



🔹 permissionDialogTitle

Starting on android M individual permissions must be granted for certain services, having access to the camera roll is one of them, you can use this to change the title of the dialog prompt requesting permissions. Defaults to "Read Storage Permission".

TYPE REQUIRED
String No



🔹 permissionDialogMessage

Starting on android M individual permissions must be granted for certain services, having access to the camera roll is one of them, you can use this to change the content of the dialog prompt requesting permissions. Defaults to "Needs access to your photos so you can use these awesome services.".

TYPE REQUIRED
String No



🔹 pendingAuthorizedView

Starting on android M individual permissions must be granted for certain services, having access to the camera roll is one of them. This will be displayed when access to the camera roll has been denied. Defaults to Waiting on access permission to camera roll. message.

TYPE REQUIRED
React.Element No



🔹 notAuthorizedView

Starting on android M individual permissions must be granted for certain services, having access to the camera roll is one of them. This will be displayed when access to the camera roll has been denied completely. Defaults to Access denied to camera roll. message.

TYPE REQUIRED
React.Element No





LueHsoft LueH LABS Lue Hang luehang

🔷 Example Project

Perform steps 1-2 to run locally:

  1. Clone the Repo
  2. Install and Run

🔹 1. Clone the Repo

Clone react-native-camera-roll-selector locally. In a terminal, run:

$ git clone https://github.com/Luehang/react-native-camera-roll-selector.git react-native-camera-roll-selector

🔹 2. Install and Run

cd react-native-camera-roll-selector/example/

iOS - Mac - Install & Run

1. check out the code
2. npm install
3. npm run ios

Android - Mac - Install & Run

1. check out the code
2. npm install
3. emulator running in separate terminal
4. npm run android


LueHsoft LueH LABS Lue Hang luehang

🔷 Author

Free and made possible along with costly maintenance and updates by Lue Hang (the author).








🔷 Contribute

Pull requests are welcomed.


🔷 Contributors

Contributors will be posted here.


🔹 Beginners

Not sure where to start, or a beginner? Take a look at the issues page.








🔷 License

MIT © Lue Hang, as found in the LICENSE file.

install

npm i react-native-camera-roll-selector

Downloadsweekly downloads

49

version

1.3.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability