> ## 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 Image Video Grid Viewer
> A versatile React Native component for displaying images and videos in a clean, responsive grid layout on both iOS and Android. It supports Expo (managed and bare workflows) and React Native CLI, making it easy to integrate into any mobile project
## Installation
### Using Yarn
```md theme={null}
yarn add @leafletui/rn-image-video-grid-viewer
```
### Using NPM
```html theme={null}
npm install @leafletui/rn-image-video-grid-viewer
```
## Demo video
### Sample Code
```html theme={null}
import { StyleSheet, Text, View } from 'react-native';
import RNImageVideoGridViewer from "@leafletui/rn-image-video-grid-viewer";
export default function App() {
return (
{ console.log(item, 'selected image properties', item.type, 'video/image') }}
style={{}}
playIconHeight={50}
playIconWidth={50}
/>
LeafletUI
React Native Image-Video Grid Viewer library
Please leave a github star
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#eee",
},
inner_container: {
width: "100%",
height: "60%",
},
textStyle: {
textAlign: "center",
fontSize: 20,
}
});
```
### Useage Props
| Props | Required | Description |
| -------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| images | `true` | `[{ type: 'image', url: 'https://image.jpg', videoThumbnail: null }, { type: 'video', url: 'https://image.mp4', videoThumbnail: 'https://imageThumb.jpg' }]` |
| style | `false` | style the image container |
| onPress | `true` | returns the image properties |
| playIconHeight | `true` | the video play icon height |
| playIconWidth | `true` | the video play icon width |
Have an idea and want to improve this package? [Raise an issue](https://github.com/LeafletUI/react-native-image-video-grid-viewer/issues). or [Raise a PR](https://github.com/LeafletUI/react-native-image-video-grid-viewer/pulls)