Description:
A simple image viewer (gallery) with thumbnails, created for React Native applications.
How to use it:
1. Install.
# Yarn $ yarn add @georstat/react-native-image-gallery # NPM $ npm i @georstat/react-native-image-gallery
2. Import the image gallery component.
import { ImageGallery } from '@georstat/react-native-image-gallery';3. Define your image list as follows:
const images = [
{
id: 1,
url: '1.jpg',
// ...
},
{
id: 2,
url: '2.jpg',
// ...
},
{
id: 3,
url: '3.jpg',
// ...
},
// more images ...
]4. Create a basic image gallery.
const MyGallery = () => {
const [isOpen, setIsOpen] = useState(false);
const openGallery = () => setIsOpen(true);
const closeGallery = () => setIsOpen(false);
return (
<View>
<Button onPress={openGallery} title="Launch Gallery" />
<ImageGallery close={closeGallery} isOpen={isOpen} images={images} />
</View>
)
}5. Available component props.
{
// Required
// function to close the gallery image
close: FUNCTION,
// Required
isOpen: true,
hideThumbs: false,
// 'cover', 'stretch', 'repeat', 'center'
resizeMode: 'contain',
thumbColor: '#d9b44a',
thumbResizeMode: 'cover',
thumbSize: 48,
initialIndex: 1,
// disable swipe gestures
disableSwipe: false,
renderCustomImage: FUNCTION,
renderCustomThumb: FUNCTION,
renderFooterComponent: FUNCTION,
renderHeaderComponent: FUNCTION,
}Preview:
