react-native-camera-roll-gallery v4.4.3

An easy and simple to use React Native component to render a custom layout for CameraRoll photos (next update will have videos) and displayed on a custom interactive image viewer for manipulation. Includes animations and support for 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.

• Choose a custom way to get images or use default CameraRoll getter.
• Optimized for large list rendering of images.
• Swipe up and down to close images.
• Pull to Refresh.
• Scroll loading.
• Support for dynamic device rotation.
• Easily and highly customizable.
• Includes guestures and important event listeners for pan, pinch, single tap and double tap.
• Includes zoom mode.
• Intelligent scrolling detection to cushion rough swipe guestures.
• Supports iOS and Android.

:information_source: Learn more about React Native with project examples along with Cyber Security and Ethical Hacking at LueHsoft.

Built with react-native-gallery-swiper & react-native-smart-gallery.

:open_file_folder: Index

1. Getting Started

2. Example Usage Customization

3. Example Usage With Provided CameraRoll

4. API

5. :books: Props

6. Installation For Provided CameraRoll

7. Example Project

8. Author

9. Contribute

10. License

:gem: Getting Started

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

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

or

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

:tada: Example Usage Customization

Version *4.0.0 update

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

import CameraRollGallery from "react-native-camera-roll-gallery";

//...
render() {
    return (
        <CameraRollGallery
            enableCameraRoll={false} // default true
            // Get data logic goes here.
            // This will get trigger initially
            // and when it reached the end
            // if there is more.
            onGetData={(fetchParams, resolve) => {
                resolve({
                    assets: [
                        // Can be used with different image object fieldnames.
                        // Ex. source, source.uri, uri, URI, url, URL
                        { uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg" },
                        // { source: require("yourApp/image.png"),
                        //     // IMPORTANT: It is REQUIRED for LOCAL IMAGES
                        //     // to include a dimensions field with the
                        //     // actual width and height of the image or
                        //     // it will throw an error.
                        //     dimensions: { width: 1080, height: 1920 } },
                        { source: { uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-women-beauty-40901.jpg" } },
                        { uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg" },
                        { URI: "https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg" },
                        { url: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" },
                        { URL: "https://luehangs.site/pic-chat-app-images/attractive-balance-beautiful-186263.jpg" },
                    ],
                    pageInfo: {
                        hasNextPage: false
                    }
                });
            }}
        />
    );
}
//...

:tada: Example Usage With Provided CameraRoll

:information_source: Additional installation is required to install additional package and link binaries. Follow the Installation section.

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

import CameraRollGallery from "react-native-camera-roll-gallery";

//...
render() {
    return (
        <CameraRollGallery />
    );
}
//...

:nut_and_bolt: API

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

:books: Props

:small_blue_diamond: Image Layout Props of <CameraRollGallery />

If you like react-native-image-layout, please be sure to give it a star at GitHub. Thanks.

:small_blue_diamond: Props of <CameraRollGallery /> WITH DEFAULT CAMERAROLL

Inorder to use these props, make sure enableCameraRoll prop is set to true.

:small_blue_diamond: Gallery Props of <CameraRollGallery />

If you like react-native-image-layout, please be sure to give it a star at GitHub. Thanks.

:gem: Installation For Provided CameraRoll

react-native >= 0.60

Install

$ npm install @react-native-community/cameraroll --save

or

$ yarn add @react-native-community/cameraroll

Linking

Autolinking will just do the job.

:information_source: 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" />

Install

$ npm install @react-native-community/cameraroll --save

or

$ yarn add @react-native-community/cameraroll

Linking

Autolinking will just do the job.

:information_source: 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>

:information_source: 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>

react-native < 0.60

:information_source: 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" />

:information_source: iOS REQUIREMENT.

1. react-native-camera-roll-gallery 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.

2. 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).

3. 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.

:information_source: 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>

:information_source: 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>

:clapper: Example Project

Perform steps 1-2 to run locally:

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

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

$ cd react-native-camera-roll-gallery/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

:santa: Author

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

:clap: Contribute

Pull requests are welcomed.

:tophat: Contributors

Contributors will be posted here.

:baby: Beginners

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

:page_facing_up: License

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