react-native-stack-carousel

A React Native component for creating an animated stack carousel with customizable directions and gestures.

Installation

To install the package, use npm or yarn:

Using npm:

npm install react-native-stack-carousel

Using yarn:

yarn add react-native-stack-carousel

Usage

To use the Carousel component in your React Native project, follow these steps:

Import the Component

import Carousel from 'react-native-stack-carousel';

Example

Here's a basic example of how to use the Carousel component:

1import React from "react";
2import { View, StyleSheet } from "react-native";
3import { useSharedValue } from "react-native-reanimated";
4import Carousel from "react-native-stack-carousel";
5
6const App = () => {
7  const currentIndex = useSharedValue(0);
8  const animatedValue = useSharedValue(0);
9  const IMAGES = [
10    { id: 1, uri: "https://example.com/image1.jpg" },
11    { id: 2, uri: "https://example.com/image2.jpg" },
12    { id: 3, uri: "https://example.com/image3.jpg" },
13  ];
14
15  return (
16    <View style={styles.container}>
17      {IMAGES.map((item, index) => (
18        <Carousel
19          item={item}
20          index={index}
21          key={item.id}
22          maxVisibleItems={6}
23          prevIndex={prevIndex}
24          dataLength={IMAGES.length}
25          currentIndex={currentIndex}
26          animatedValue={animatedValue}
27          imageStyle={styles.imageStyle}
28          direction="vertical-top-variant2"
29        >
30          <View style={styles.textContainer}>
31            <Text style={styles.text}>{item?.value}</Text>
32          </View>
33        </Carousel>
34      ))}
35    </View>
36  );
37};
38
39const styles = StyleSheet.create({
40  container: {
41    flex: 1,
42    justifyContent: "center",
43    alignItems: "center",
44    backgroundColor: "#fff",
45  },
46});
47
48export default App;

Demo

Check out the demo of the component in action:

Props

Prop	Type	Default	Description
item	object	N/A	The item to be displayed in the carousel.
index	number	N/A	The index of the current item.
prevIndex	number	N/A	The index of the previous item.
dataLength	number	N/A	Total number of items in the carousel.
currentIndex	object	N/A	The current index of the carousel.
animatedValue	object	N/A	Animated value for transitions.
maxVisibleItems	number	3	Maximum number of visible items at once.
direction	string	"vertical-top-variant1"	Direction of the carousel animations.
imageStyle	object	{}	Custom style for the carousel images.

License

This project is licensed under the ISC License.

Contact

If you have any questions or issues, please open an issue on the GitHub repository or contact the author directly.