rs-react-native-image-gallery
Version:
React Native Image Gallery with Thumbnails
159 lines (123 loc) • 6.7 kB
Markdown
# 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](https://github.com/georstat/react-native-image-cache)
### Default Gallery Preview
### Custom Gallery Preview
## 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 (
<View>
<Button onPress={openGallery} title="Open Gallery" />
<ImageGallery close={closeGallery} isOpen={isOpen} images={images} />
</View>
)
}
```
#### Custom Gallery without thumbs
For more info check [example](https://github.com/georstat/react-native-image-gallery/tree/main/example/src)
This example uses [georstat/react-native-image-cache](https://github.com/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 <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](https://reactnative.dev/docs/image#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](https://reactnative.dev/docs/image#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](https://github.com/efstathiosntonas)
- [George Bakogiannis](https://github.com/geobako)
- [George Kallinikos](https://github.com/giokallis)