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:

Download Details:

Author: georstat

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/georstat/react-native-image-gallery

License: MIT