@gluestack-ui/image-viewer

Table of Contents

• Installation
• Usage
• Customizing the ImageViewer
• Component Props
• Contributing
• License

Installation

To use @gluestack-ui/image-viewer, install the package using either Yarn or npm:

$ yarn add @gluestack-ui/image-viewer

# or

$ npm i @gluestack-ui/image-viewer

Usage

The ImageViewer component provides a modal view for displaying and interacting with images, supporting features like pinch-to-zoom, double-tap zoom, and swipe up/down to dismiss. Here's an example of how to use this package:

import { createImageViewer } from '@gluestack-ui/image-viewer';
import { Root, Backdrop, Content, CloseButton } from './styled-components';

export const ImageViewer = createImageViewer({
  Root,
  Backdrop,
  Content,
  CloseButton,
});

Customizing the ImageViewer

Default styling of all these components can be found in the components/core/image-viewer file. For reference, you can view the source code of the styled ImageViewer components.

// import the styles
import {
  Root,
  Backdrop,
  Content,
  CloseButton,
} from '../components/core/image-viewer/styled-components';

// import the createImageViewer function
import { createImageViewer } from '@gluestack-ui/image-viewer';

// Understanding the API
const ImageViewer = createImageViewer({
  Root,
  Backdrop,
  Content,
  CloseButton,
});

// Using the ImageViewer component
export default () => (
  <ImageViewer isOpen={isOpen} onClose={onClose}>
    <ImageViewerBackdrop>
      <ImageViewerContent
        images={images}
        renderImages={({ item, index }) => {
          return (
            <ImageViewerImage
              source={{ uri: item.url }}
            />
          );
        }}
        keyExtractor={(item, index) => `${item.id}-${index}`}
      />
    </ImageViewerBackdrop>
  </ImageViewer>
);

Component Props

ImageViewer

| Prop | Type | Default | Description | Required | | -------- | --------- | ------- | ------------------------------------------------------ | -------- | | isOpen | boolean | false | If true, the image viewer modal will open | Yes | | onClose | function | - | Callback invoked when the image viewer modal is closed | Yes | | children | ReactNode | - | The content to be rendered inside the image viewer | _ |

ImageViewerContent

| Prop | Type | Default | Description | Required | | ------------ | ----------------------------------------- | ------- | ----------------------------------------------- | -------- | | images | Array | - | Array of image objects to display | Yes | | renderImages | ({item: any, index: number}) => ReactNode | - | Function to render each image item | Yes | | keyExtractor | (item: any, index: number) => string | - | Function to extract the key for each image item | Yes |

More guides on how to get started are available here.

Contributing

We welcome contributions to the @gluestack-ui/image-viewer package. If you have an idea for a new feature or a bug fix, please read our contributing guide for instructions on how to submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.