Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react_native_image_video_carousel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react_native_image_video_carousel

A React Native package for a media carousel with image zoom and video components.

DEMO:

Watch the Demo Video

Installation

npm install react_native_image_video_carousel

yarn add react_native_image_video_carousel

Dependencies

Usage

MediaCarouselScreen Example

// App.js
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { MediaCarouselScreen } from 'react_native_image_video_carousel';

const data = [
    {
      url: 'https://dummyimage.com/500x400/ff6699/000',
      _id: '6673f24bcf4a1934317f1aea',
      type: 'image',
    },
    {
      url: 'https://www.w3schools.com/html/mov_bbb.mp4',
      _id: '6673f24bcf4a19343a17f1aed',
      type: 'video',
    },
    {
      url: 'https://dummyimage.com/500x400/ff6699/000',
      _id: '6673f24bcf4a1934317f1aeb',
      type: 'image',
    },
    // More items...
];

const App = () => {
  return (
    <View style={styles.container}>
      <MediaCarouselScreen
        data={data}
        navigation={navigation}
      />
    </View>
  );
};

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

export default App;

MediaCarouselScreen Props

Prop Name	Type	Default Value	Description
`data`	Array	`[]`	Array of media items with `url`, `_id`, and `type` (either 'image' or 'video').
`wrapperStyle`	Object	`null`	Style object for the wrapper component.
`navigation`	Object	`null`	React Navigation object for navigation handling.
`closeViewComponent`	Component	`null`	Custom component for a close button.
`onPressClose`	Function	`null`	Function to handle close button press.
`resizeMode`	String	`'contain'`	Resize mode for media content.
`mediaMuted`	Boolean	`false`	Boolean to mute the media.
`paused`	Boolean	`false`	Boolean to pause the media.

ImageZoomComp Example

// App.js
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { ImageZoomComp } from 'react_native_image_video_carousel';

const App = () => {
  return (
    <View style={styles.container}>
      <ImageZoomComp
        uri={'https://dummyimage.com/500x400/ff6699/000'}
        isPanEnabled={true}
        resizeMode={'contain'}
      />
    </View>
  );
};

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

export default App;

ImageZoomComp Props

Prop Name	Type	Default Value	Description
`uri`	String	`null`	URI of the image to be zoomed.
`isPanEnabled`	Boolean	`true`	Enable or disable panning.
`resizeMode`	String	`'contain'`	Resize mode for the image.