@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:

``sh
$ 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:

`jsx
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.

`jsx
// 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 () => (


images={images}
renderImages={({ item, index }) => {
return (
source={{ uri: item.url }}
/>
);
}}
keyExtractor={(item, index) => ${item.id}-${index}}
/>


);
`

Component Props

$3

| 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 | _ |

$3

| 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.