1.7.1 • Published 4 days ago
@fidme/react-native-image-gallery v1.7.1
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:
1.7.1
4 days ago
1.7.0
18 days ago
1.7.0-beta10
18 days ago
1.7.0-beta8
21 days ago
1.7.0-beta9
21 days ago
1.7.0-beta7
22 days ago
1.7.0-beta6
22 days ago
1.7.0-beta4
23 days ago
1.7.0-beta3
23 days ago
1.7.0-beta2
23 days ago
1.7.0-beta1
23 days ago
1.7.0-beta5
23 days ago
1.6.4
3 months ago
1.6.3
3 months ago
1.6.6
3 months ago
1.5.3
4 months ago
1.6.1
4 months ago
1.5.2
4 months ago
1.6.0
4 months ago
1.5.1
6 months ago
1.5.0
6 months ago
1.4.0
6 months ago
1.3.0
6 months ago
1.2.0
6 months ago