React Native Image Gallery with Thumbnails

!GitHub package.json version
!Platform - Android and iOS

Features

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

$3

$3

!@georstat:react-native-image-gallery default_demo

$3

!@georstat:react-native-image-gallery default_demo

Installation

#### yarn:

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

#### npm:

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

Usage

#### Simple Gallery with thumbs:

`tsx
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 (




)
}
`

#### Custom Gallery without thumbs:

For more info check example

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

`tsx
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

;
};

const renderFooterComponent = (image: ImageObject, currentIndex: number) => {
return


close={closeCustomGallery}
hideThumbs
images={images}
isOpen={isCustomGalleryOpen}
renderCustomImage={renderCustomImage}
renderFooterComponent={renderFooterComponent}
renderHeaderComponent={renderHeaderComponent}
/>

);
};
`

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