React Native Media Viewer

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-crausal

use

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

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 ( ); };

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, }, });