DOCSEARCHbyAlgolia
Submit Docs

react-native-image-viewing

repository·master·Indexed 21 days ago

https://github.com/jobtoday/react-native-image-viewing

A React Native modal component for viewing images as a sliding gallery. It supports pinch-to-zoom, double-tap to zoom, and swipe-to-close animations via the ImageView component.

Tokens
1.6K
Snippets
5
Records
5
Agent score
26%

What's inside react-native-image-viewing

  2. Use the ImageView component

    master

    To use the image viewing gallery, import ImageView and provide an array of images, the initial index, visibility state, and a close handler. The component supports pinch-to-zoom, double-tap to zoom, and swipe-to-close animations.

    import ImageView from "react-native-image-viewing";

const images = [
  {
    uri: "https://images.unsplash.com/photo-1571501679680-de32f1e7aad4",
  },
  {
    uri: "https://images.unsplash.com/photo-1573273787173-0eb81a833b34",
  },
  {
    uri: "https://images.unsplash.com/photo-1569569970363-df7b6160d111",
  },
];

const [visible, setIsVisible] = useState(false);

<ImageView
  images={images}
  imageIndex={0}
  visible={visible}
  onRequestClose={() => setIsVisible(false)}
/>

  3. ImageView Props Reference

    master

    The ImageView component accepts the following props to control the gallery behavior, appearance, and lifecycle events.

    | Prop name | Description | Type | Required |
| ------------------------ | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -------- |
| `images` | Array of images to display | ImageSource[] | true |
| `keyExtractor` | Uniqely identifying each image | (imageSrc: ImageSource, index: number) => string | false |
| `imageIndex` | Current index of image to display | number | true |
| `visible` | Is modal shown or not | boolean | true |
| `onRequestClose` | Function called to close the modal | function | true |
| `onImageIndexChange` | Function called when image index has been changed | function | false |
| `onLongPress` | Function called when image long pressed | function (event: GestureResponderEvent, image: ImageSource) | false |
| `delayLongPress` | Delay in ms, before onLongPress is called: default `800` | number | false |
| `animationType` | Animation modal presented with: default `fade` | `none`, `fade`, `slide` | false |
| `presentationStyle` | Modal presentation style: default: `fullScreen` **Android:** Use `overFullScreen` to hide StatusBar | `fullScreen`, `pageSheet`, `formSheet`, `overFullScreen` | false |
| `backgroundColor` | Background color of the modal in HEX (#000000EE) | string | false |
| `swipeToCloseEnabled` | Close modal with swipe up or down: default `true` | boolean | false |
| `doubleTapToZoomEnabled` | Zoom image by double tap on it: default `true` | boolean | false |
| `HeaderComponent` | Header component, gets current `imageIndex` as a prop | component, function | false |
| `FooterComponent` | Footer component, gets current `imageIndex` as a prop | component, function | false |

- type ImageSource = ImageURISource | ImageRequireSource

  4. Use Dimensions and Position types

    master

    The library uses Dimensions and Position types to represent spatial data. Use these when interacting with APIs that require specific coordinate or size structures.

    • Dimensions: An object containing width and height as numbers.
    • Position: An object containing x and y coordinates as numbers.
    export type Dimensions = {
  width: number;
  height: number;
};

export type Position = {
  x: number;
  y: number;
};

  5. Define ImageSource types

    master

    The ImageSource type defines the compatible formats for images passed to the library. It accepts standard React Native image source objects, which can be either a URI-based source (ImageURISource) or a local require-based source (ImageRequireSource).

    import { ImageURISource, ImageRequireSource } from 'react-native';

export type ImageSource = ImageURISource | ImageRequireSource;