RN Image Gallery Documentation

Installation

npm i rn-image-gallery

Import

import {
  ImageGallery
} from 'rn-image-gallery'

Quick Example

    <ImageGallery
      activePill={"#c40b0a"}
      inactivePill={"#29ABE2"}
      thumbnailGallery={false}
      imageList={imageList}
      slideShow={false}
    />

ImageGallery Properties Detail

Define a ImageGallery screen with following properties as such:

| Property | Type | Description | | ------------- |-------------| -----| | activePill | String | Defines the color of the dot or pill of the shown image | | inactivePill | String | Defines the color of the dot or pill of the hidden/inactive image | | thumbnailGallery | Boolean | Defines the thumbnail of the gallery on the bottom | | imageList | Array | Defines the list of images path which is to be shown in the gallery | | slideShow | Boolean | Defines whether you automatically want to slideshow the gallery |

Example :

    imageList: [
        { "name": "Nature", "url": "https://images.freeimages.com/images/large-previews/af4/french-desert-6-1400167.jpg", "thumbnail": "https://images.freeimages.com/images/small-previews/af4/french-desert-6-1400167.jpg"},
        { "name": "Nature1", "url": "https://images.freeimages.com/images/large-previews/867/volcanic-mt-ngauruhoe-1378772.jpg", "thumbnail": "https://images.freeimages.com/images/small-previews/867/volcanic-mt-ngauruhoe-1378772.jpg"},
        { "name": "Nature2", "url": "https://images.freeimages.com/images/large-previews/e2a/boise-downtown-1387405.jpg", "thumbnail": "https://images.freeimages.com/images/small-previews/e2a/boise-downtown-1387405.jpg"},
        { "name": "Nature3", "url": "https://images.freeimages.com/images/large-previews/8a1/small-waterfall-1376352.jpg", "thumbnail": "https://images.freeimages.com/images/small-previews/8a1/small-waterfall-1376352.jpg"},
        { "name": "Nature4", "url": "https://images.freeimages.com/images/large-previews/199/sunflowers-6-1392951.jpg", "thumbnail": "https://images.freeimages.com/images/small-previews/199/sunflowers-6-1392951.jpg"}
      ]

    <ImageGallery
      activePill={"#c40b0a"}
      inactivePill={"#29ABE2"}
      thumbnailGallery={false}
      imageList={imageList}
      slideShow={false}
    />