> ## Documentation Index
> Fetch the complete documentation index at: https://leafletui.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native View Image

> React Native Image and Video Viewing component Library for IOS and Android. With this component, you can view multiple images and videos and slide through them.

## Support for Expo managed, Expo bare, and React Native CLI.

```
🔥Pinch zoom for both iOS and Android
🔥Double tap to zoom for both iOS and Android
🔥Supports swipe-to-close animation
🔥Custom header and footer components
🔥Video on the slide
🔥Uses VirtualizedList to optimize image loading and rendering'
```

## Installation

### Using Yarn

```md theme={null}
yarn add @leafletui/react-native-view-image
```

### Using NPM

```html theme={null}
npm i @leafletui/react-native-view-image
```

## Demo video

<iframe width="560" height="315" src="https://www.youtube.com/embed/lTKgSrqjMZ4" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen style={{ width: '100%', borderRadius: '0.5rem' }} />

<br />

### Sample Code

```html theme={null}
import ImageView from "@leafletui/react-native-view-image";

const ViewImage = () => {

  const [open, setOpen] = React.useState(false);

const openImages = [
  { 
    uri: "https://images.unsplash.com/photo-1601824772624-9375c6f20701?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fHNwbGFzaHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60"
  }
  
  ];

return (
<ImageView
  images={openImages}
  imageIndex={0}
  visible={open}
  onRequestClose={() => setOpen(false)}
  navigateToVideo={navigateToVideo}
/>
  )
};
```

### Useage Props

| Props           | Required | Description                                                                                                                                                                           |
| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| images          | `true`   | `[{uri: "https://images.unsplash.com/photo-1601824772624-9375c6f20701?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fHNwbGFzaHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60"}];` |
| imageIndex      | `true`   | what image should it start with                                                                                                                                                       |
| visible         | `true`   | display selected image                                                                                                                                                                |
| onRequestClose  | `true`   | hide image                                                                                                                                                                            |
| navigateToVideo | `true`   | play video                                                                                                                                                                            |

<Tip>
  Have an idea and want to improve this package? [Raise an issue](https://github.com/LeafletUI/react-native-view-image/issues). or [Raise a PR](https://github.com/LeafletUI/react-native-view-image/pulls)
</Tip>