React Native Gallery Swiper

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](https://luehangs.site/lue_hang/projects/react-native-gallery-swiper) 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](#gem-install) ### 2. [Usage Example](#tada-usage-example) ### 3. [Performance Optimization List Example](#watch-performance-optimization-list-example) ### 4. [API](#nut_and_bolt-api) ### 5. :books: [Props](#books-props) ### 6. :books: [Methods](#books-methods) ### 7. [Example Project](#clapper-example-project) ### 9. [License](#page_facing_up-license)

---

## :gem: Install Type in the following to the command line to install the dependency. ```bash $ npm install --save react-native-gallery-swiper ``` or ```bash $ 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`. ```javascript import GallerySwiper from "react-native-gallery-swiper"; //... render() { return ( { // // add more images when scroll reaches end // }} /> ); } //... ```

---

## :watch: Performance Optimization List Example ```javascript import GallerySwiper from "react-native-gallery-swiper"; //... render() { return ( { // // 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 ```` component accepts the following props...
# :books: Props Props | Description | Type | Default ------ | ------ | ------ | ------ `images` | An array of objects. `source`, `source.uri`, `uri`, `URI`, `url` or `URL` is a required field (if multiple similar fields in an image object, priority will go from start `source` to last `URL`). EX. `[{ source: require("yourApp/image.png"), 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-blonde-hair-478544.jpg"}]` | `Array` | Required `style` | Styling the gallery. | `object`, `Array` | `{flex: 1, backgroundColor: "#000"}` `initialPage` | Index of image to be displayed first. | `number` | `0` `resizeMode` | The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Expecting one of `"contain"`, `"cover"`, `"stretch"`, `"repeat"`, `"center"`. **Version \*1.12.0 update**. | `string` | `"contain"` `imageComponent` | Custom function to render your images. `(imageProps: { imageLoaded: boolean, source: object, image: object, style: Array

	Stars	Issues	Version	Updated	Created
react-native-gallery-swiper			1.26.4	4 years ago	6 years ago
react-native-image-pan-zoom	633	73	2.1.12	4 years ago	8 years ago
react-native-photo-view			1.5.2	7 years ago	8 years ago

react-native-gallery-swiper vs react-native-image-pan-zoom vs react-native-photo-view

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past