Pagination Is not Importable from the library as Shown in the Documentation Example

[bharatkumar-777]

Describe the bug I am not able to import the pagination from the library as shown in the documentation. so the main usage example is not working.

import Carousel, {
  ICarouselInstance,
  Pagination,
} from "react-native-reanimated-carousel";

Expected behavior I need to apply the pagination as shown in the documentation example so that i can show the slider progress.

Versions (please complete the following information):

• react: v18.2.0
• react-native: v0.72.7
• react-native-reanimated: v3.14.0
• react-native-reanimated-carousel: v3.5.1
• react-native-gesture-handler: v2.17.1

Smartphone (please complete the following information):

• Device: [e.g. iPhone15]

Additional context Add any other context about the problem here.

[dosubot[bot]]

Hey @bharatkumar-777 👋, I'm here to help you with any questions or issues you have with the library. I can assist you in solving bugs, answering questions, and becoming a contributor while you're waiting for a human maintainer.

The issue you're encountering is due to the version of react-native-reanimated-carousel you are using. The Pagination component is not available in version 3.5.1. To resolve this, you need to upgrade to version 4.0.0-alpha.12 or later.

You can upgrade by running the following command:

yarn add react-native-reanimated-carousel@4.0.0-alpha.12

After upgrading, you should be able to import and use the Pagination component as shown in the documentation:

import Carousel, {
  ICarouselInstance,
  Pagination,
} from "react-native-reanimated-carousel";

Here is an example of how to use the Pagination component:

import * as React from "react";
import { Dimensions, Text, View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import Carousel, {
  ICarouselInstance,
  Pagination,
} from "react-native-reanimated-carousel";

const data = [...new Array(6).keys()];
const width = Dimensions.get("window").width;

function App() {
  const ref = React.useRef<ICarouselInstance>(null);
  const progress = useSharedValue<number>(0);

  const onPressPagination = (index: number) => {
    ref.current?.scrollTo({
      count: index - progress.value,
      animated: true,
    });
  };

  return (
    <View style={{ flex: 1 }}>
      <Carousel
        ref={ref}
        width={width}
        height={width / 2}
        data={data}
        onProgressChange={progress}
        renderItem={({ index }) => (
          <View
            style={{
              flex: 1,
              borderWidth: 1,
              justifyContent: "center",
            }}
          >
            <Text style={{ textAlign: "center", fontSize: 30 }}>{index}</Text>
          </View>
        )}
      />
      <Pagination.Basic
        progress={progress}
        data={data}
        dotStyle={{ backgroundColor: "rgba(0,0,0,0.2)", borderRadius: 50 }}
        containerStyle={{ gap: 5, marginTop: 10 }}
        onPress={onPressPagination}
      />
    </View>
  );
}

export default App;

This should resolve the issue and allow you to use the Pagination component to show the slider progress ^[1][2].

To continue talking to Dosu, mention @dosu.