A universal headless ImageViewer component for React Native, Next.js & React
npm install @gluestack-ui/image-viewer- Installation
- Usage
- Customizing the ImageViewer
- Component Props
- Contributing
- License
To use @gluestack-ui/image-viewer, install the package using either Yarn or npm:
``sh
$ yarn add @gluestack-ui/image-viewer
$ npm i @gluestack-ui/image-viewer
`
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,
});
`
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 () => (
renderImages={({ item, index }) => {
return (
/>
);
}}
keyExtractor={(item, index) => ${item.id}-${index}}
/>
);
`
| 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 | _ |
| Prop | Type | Default | Description | Required |
| ------------ | ----------------------------------------- | ------- | ----------------------------------------------- | -------- |
| images | Array
| 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.
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.
This project is licensed under the MIT License. See the LICENSE file for more details.