Custom-react-native-image-gallery NPM

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:

@georstat:react-native-image-gallery default_demo

Custom Gallery Preview:

@georstat:react-native-image-gallery default_demo

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) => ...`