@gluestack-ui/image-viewer NPM

@gluestack-ui/image-viewer

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.