React Native Image Video Carousal

A dynamic media viewer for React Native that allows users to render both images and videos. The package also supports image zooming with pinch-to-zoom gestures.

Features

• Render images and videos dynamically based on the data provided.
• Pinch-to-zoom functionality for images.
• Horizontal scrolling for media items.
• Supports both Android and iOS.

Installation

Install the package using npm:

npm install react-native-image-video-Carousal

use

import React from 'react';
import { View, StyleSheet } from 'react-native';
import MediaViewer from 'react-native-image-video-carousal';

const mediaData = [
{ type: 'image', url: 'https://example.com/image1.jpg' },
{ type: 'video', url: 'https://example.com/video1.mp4' },
{ type: 'image', url: 'https://example.com/image2.jpg' },
];

const App = () => {
return (
<View style={styles.container}>
<MediaViewer mediaData={mediaData} />
</View>
);
};


const styles = StyleSheet.create({
container: {
flex: 1,
},
});

export default App;

Props

Prop Type Required Description mediaData Array Yes An array of media objects, each having type and url.

Media Object

const mediaData = [ { type: 'image', url: 'https://example.com/image1.jpg' }, { type: 'video', url: 'https://example.com/video1.mp4' }, { type: 'image', url: 'https://example.com/image2.jpg' }, ];

Customization

const styles = StyleSheet.create({ mediaItem: { width: '100%', height: 300, }, });