Almost all examples are not working

[transli]

Pagination is not exported on latest releases

[dosubot[bot]]

Hey @transli! I'm here to help you with any bugs, questions, or contributions you may have regarding the repository. Let me know how I can assist you!

To resolve the issue where almost all examples are not working because Pagination is not exported in the latest releases, ensure that the Pagination component is correctly exported. The Pagination component is being exported from src/index.tsx:

import Carousel from "./components/Carousel";
export { Pagination } from "./components/Pagination";

export type {
  TCarouselProps,
  ICarouselInstance,
  IComputedDirectionTypes,
  CarouselRenderItem,
} from "./types";
export type { TAnimationStyle } from "./components/BaseLayout";
export type { ILayoutConfig } from "./layouts/stack";

export default Carousel;

If the examples are still not working, check if the import paths in the examples are correct and if the Pagination component is properly implemented and exported in ./components/Pagination.

Ensure that the Pagination component is being imported correctly in the examples:

import { Pagination } from 'path-to-pagination-component';

Refer to the usage example provided in the documentation to ensure correct usage:

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;

If the Pagination component is not being found, double-check the file paths and ensure that the module is correctly included in your project ^[1][2].

To continue talking to Dosu, mention @dosu.

[rochajulian]

Second this. I can't use Pagination!

[Zakisb]

Same can't use paginaton. !

[haeniya]

Had the same issue. Using version 4.0.0-alpha.12 worked for me.

[AnfalHussain]

I have the same issue with version 3.5.1

[dosubot[bot]]

Hi, @transli. I'm Dosu, and I'm helping the react-native-reanimated-carousel team manage their backlog. I'm marking this issue as stale.

Issue Summary:

• The Pagination component is not being exported in the latest releases, causing examples to fail.
• You reported this issue, and several other users confirmed experiencing the same problem.
• A suggestion was made to check export configurations and import paths, but it was not well-received.
• Reverting to version 4.0.0-alpha.12 resolved the issue for some users, indicating a regression in newer versions.

Next Steps:

• Please let us know if this issue is still relevant to the latest version of the react-native-reanimated-carousel repository. If it is, you can keep the discussion open by commenting here.
• If there is no further activity, this issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!

[transli]

🎉