react-native-gallery-swiper v1.26.5

An easy and simple to use React Native component to render a high performant and easily customizable image gallery with common gestures like pan, pinch and double tap. Supporting both iOS and Android.

Learn more about the installation and how to use this package in the updated documentation page.

• Supports smart rendering for large lists or small.
• Scroll loading and supporting onEndReached.
• Includes guestures and important event listeners for pan, pinch, single tap and double tap.
• Includes zoom mode.
• Easily customizable.
• Intelligent scrolling detection to cushion rough swipe guestures.
• Supports both iOS and Android.

Built and similar to react-native-gallery.

:open_file_folder: Index

1. Install

2. Usage Example

3. Performance Optimization List Example

4. API

5. :books: Props

6. :books: Methods

7. Example Project

9. License

:gem: Install

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

$ npm install --save react-native-gallery-swiper

or

$ yarn add react-native-gallery-swiper

:tada: Usage Example

Add an import to the top of the file. At minimal, declare the GallerySwiper component in the render() method providing an array of data for the images prop.

:information_source: Local images must have a defined dimensions field with width and height or just height and width.

import GallerySwiper from "react-native-gallery-swiper";

//...
render() {
    return (
        <GallerySwiper
            images={[
                // Version *1.1.0 update (or greater versions): 
                // 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: require("yourApp/image.png"),
                    // Version *1.5.0 update (or greater versions):
                    // An alternative to the dimensions field.
                    // This will also be acceptable.
                    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" },
            ]}
            // Version *1.15.0 update
            // onEndReached={() => {
            //     // add more images when scroll reaches end
            // }}
        />
    );
}
//...

:watch: Performance Optimization List Example

import GallerySwiper from "react-native-gallery-swiper";

//...
render() {
    return (
        <GallerySwiper
            images={[
                { uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg",
                    // Optional: Adding a dimensions or height and
                    // width field with the actual width and height
                    // for REMOTE IMAGES will help improve performance.
                    dimensions: { width: 1080, height: 1920 } },
                { uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-women-beauty-40901.jpg",
                    dimensions: { width: 1080, height: 1920 } },
                { uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg",
                    dimensions: { width: 1080, height: 1920 } },
                { uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg",
                    dimensions: { width: 1080, height: 1920 } },
                { uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg",
                    dimensions: { width: 1080, height: 1920 } },
                { uri: "https://luehangs.site/pic-chat-app-images/attractive-balance-beautiful-186263.jpg",
                    dimensions: { width: 1920, height: 1080 } },
                // ...
                // ...
                // ...
            ]}
            // Version *1.15.0 update
            // onEndReached={() => {
            //     // add more images when scroll reaches end
            // }}
            // Change this to render how many items before it.
            initialNumToRender={2}
            // Turning this off will make it feel faster
            // and prevent the scroller to slow down
            // on fast swipes.
            sensitiveScroll={false}
        />
    );
}
//...

:nut_and_bolt: API

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

:books: Props

:books: Methods

:small_blue_diamond: flingToPage(params)

Scrolls to the following index with input velocity.

Parameters:

Valid params keys are:

• "index" (number) - Index of desired page. Required.
• "velocityX" (boolean) - Speed intensity > 0.00. Required.

:small_blue_diamond: scrollToPage(params)

Scrolls to the following index with or without animation.

Parameters:

Valid params keys are:

• "index" (number) - Index of desired page. Required.
• "immediate" (boolean) - Animated transition or not. Defaults to false.

:clapper: Example Project

Perform steps 1-2 to run locally:

1. Clone the Repo
2. Install and Run

:small_blue_diamond: 1. Clone the Repo

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

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

:small_blue_diamond: 2. Install and Run

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

:page_facing_up: License

ISC, as found in the LICENSE file.