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:
import React from "react";
import { View, StyleSheet } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import Carousel from "react-native-stack-carousel";
const App = () => {
const currentIndex = useSharedValue(0);
const animatedValue = useSharedValue(0);
const IMAGES = [
{ id: 1, uri: "https://example.com/image1.jpg" },
{ id: 2, uri: "https://example.com/image2.jpg" },
{ id: 3, uri: "https://example.com/image3.jpg" },
];
return (
<View style={styles.container}>
{IMAGES.map((item, index) => (
<Carousel
item={item}
index={index}
key={item.id}
maxVisibleItems={6}
prevIndex={prevIndex}
dataLength={IMAGES.length}
currentIndex={currentIndex}
animatedValue={animatedValue}
imageStyle={styles.imageStyle}
direction="vertical-top-variant2"
>
<View style={styles.textContainer}>
<Text style={styles.text}>{item?.value}</Text>
</View>
</Carousel>
))}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff",
},
});
export 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.
