Package Exports

react-native-stack-carousel
react-native-stack-carousel/src/index.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-stack-carousel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.