React Native Image Gallery with Thumbnails

Features

• Image gallery with thumbnails
• Made with PanResponder, no external dependencies
• Written in Typescript

If you're looking for Image caching visit @georstat/react-native-image-cache

Default Gallery Preview:

Custom Gallery Preview:

Installation

yarn:

yarn add @georstat/react-native-image-gallery

npm:

npm i @georstat/react-native-image-gallery

Usage

Simple Gallery with thumbs:

import { ImageGallery } from '@georstat/react-native-image-gallery';

const images = [
  {
    id: 1,
    url: 'https://...',
    // any other extra info you want
  },
  ...
]

const MyGallery = () => {
    const [isOpen, setIsOpen] = useState(false);
    const openGallery = () => setIsOpen(true);
    const closeGallery = () => setIsOpen(false);

    return (
        <View>
            <Button onPress={openGallery} title="Open Gallery" />
            <ImageGallery close={closeGallery} isOpen={isOpen} images={images} />
        </View>
    )
}

Custom Gallery without thumbs:

For more info check example

This example uses georstat/react-native-image-cache for image caching

import { ImageGallery } from '@georstat/react-native-image-gallery';
import { CacheManager, CachedImage } from '@georstat/react-native-image-cache';
import { Dirs } from 'react-native-file-access';
import {
  ImageGallery,
  ImageObject,
} from '@georstat/react-native-image-gallery';

CacheManager.config = {
  baseDir: `${Dirs.CacheDir}/images_cache/`,
  blurRadius: 15,
  sourceAnimationDuration: 1000,
  thumbnailAnimationDuration: 1000,
};

const MyGallery = () => {
  const [isOpen, setIsOpen] = useState(false);
  const openGallery = () => setIsOpen(true);
  const closeGallery = () => setIsOpen(false);

  const renderHeaderComponent = (image: ImageObject, currentIndex: number) => {
    return <Header currentIndex={currentIndex} />;
  };

  const renderFooterComponent = (image: ImageObject, currentIndex: number) => {
    return <Footer total={images.length} currentIndex={currentIndex} />;
  };

  const renderCustomImage = (image: ImageObject) => {
    return (
      <View style={styles.customImageContainer}>
        <CachedImage
          resizeMode="cover"
          source={image.url}
          style={styles.customImage}
          thumbnailSource="https://via.placeholder.com/350x150"
        />
      </View>
    );
  };
  return (
    <View>
      <Button onPress={openGallery} title="Open Gallery" />
      <ImageGallery
        close={closeCustomGallery}
        hideThumbs
        images={images}
        isOpen={isCustomGalleryOpen}
        renderCustomImage={renderCustomImage}
        renderFooterComponent={renderFooterComponent}
        renderHeaderComponent={renderHeaderComponent}
      />
    </View>
  );
};

Props

CachedImage accepts the following props:

| Properties | PropType | Description | |-------------------------|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------| | isOpen | Boolean | (Required) when to show the gallery. | | images | Array | (Required) array of objects. Every image must have a url (required), a thumbUrl (optional) and id (optional) and any other info you need | | resizeMode | string | React Native Image component resizeMode defaults to contain, used on images | | close | Func | (Required) function to close the gallery image | | disableSwipe | Boolean | Disables the swipe gesture. | | initialIndex | Number | Initial index of image to snap when opening the gallery | | thumbSize | Number | Height and width of the thumb, defaults to 48 | | thumbColor | string | Outline color of selected thumb, defaults to #d9b44a | | thumbResizeMode | string | React Native Image component resizeMode defaults to cover, used on thumbnails | | hideThumbs | Boolean | Set to true to hide the thumbs defaults to false | | renderCustomThumb | Func | Function to render a custom thumb. Accepts image, index and if the thumb is selected, eg. (image:Image, index:number, isSelected:boolean) => ... | | renderCustomImage | Func | Function to render a custom Image. Accepts image, index and if the thumb is selected, eg. (image:Image, index:number, isSelected:boolean) => ... | | renderHeaderComponent | Func | Function to render a custom header at the top of the screen. Accepts image and current index, eg. (image:Image, currentIndex:number) => ... | | renderFooterComponent | Func | Function to render a custom header at the top of the screen. Accepts image and current index eg. (image:Image, currentIndex:number) => ... |

Todo:

• [ ] Add zoom factor

• [ ] Add prop to keep zoom and double tap to zoom out

Authors:

• Efstathios Ntonas
• George Bakogiannis
• George Kallinikos