react-native-zoom-carousel

Table of Contents

• Installation
• Usage
• API
• Examples
• Contributing
• License

Installation

To use react-native-zoom-carousel in your React Native project, you need to follow these steps:

1. Install the package using npm:

   1npm install react-native-zoom-carousel

Usage

Note: In react-native-zoom-carousel data props is used for server/online images and for local/offline images use localImagesData props (see below).

Example for server/URLs media(images, video URL, youtube video URL), pass Array in data prop as below:

1import React from "react";
2import { SafeAreaView } from "react-native";
3import MediaCarousel from "react-native-zoom-carousel";
4
5const YourImage = () => {
6  const MediaUrls = [
7    "https://www.visualeducation.com/wp-content/uploads/2020/05/Beats_headphones-2-1558px.jpg", //Image URL
8    "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4", // Video URL
9    "https://www.youtube.com/watch?v=Tmnv3g3cy-w", // Youtube Video URL
10  ];
11
12  return (
13    <SafeAreaView>
14      <MediaCarousel
15        style={{ width: 200, height: 200 }}
16        data={MediaUrls}
17        styledView={true} //This styled prop will give you desinged view or carousel
18      />
19    </SafeAreaView>
20  );
21};

Example for offline data (images only), pass Array in data prop as below:

1import React from "react";
2import { SafeAreaView } from "react-native";
3import MediaCarousel from "react-native-zoom-carousel";
4
5const YourImage = () => {
6  const OfflineImages = {
7    Logo: require("../assets/images/Thumbnail.png"),
8    YouTubeLogo: require("../assets/images/YoutubeIcon.jpeg"),
9    VideoIcon: require("../assets/images/VideoIcon.png"),
10    CloseIcon: require("../assets/images/Close.png"),
11  };
12
13  return (
14    <SafeAreaView>
15      <MediaCarousel
16        style={{ width: 200, height: 200 }}
17        localImagesData={[
18          OfflineImages.FirstImage,
19          OfflineImages.SecondImage,
20          OfflineImages.ThirdImage,
21        ]}
22        resizeMode={FastImage.resizeMode.contain}
23      />
24    </SafeAreaView>
25  );
26};