react_native_image_video_carousel v1.0.2

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

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