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

or

yarn add react_native_image_video_carousel

Dependencies

• @likashefqet/react-native-image-zoom
• react-native-video
• react-native-tab-view
• react

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