Cannot read property 'Basic' of undefined

[ReactNativ]

https://rn-carousel.dev/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({
      /**
       * Calculate the difference between the current index and the target index
       * to ensure that the carousel scrolls to the nearest index
       */
      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;

[dosubot]

Hey @ReactNativ! I'm here to assist you with any bugs, questions, or contributions. Let's work together to solve this issue.

There are similar issues related to the error "Cannot read property 'Basic' of undefined" when trying to import Pagination from react-native-reanimated-carousel.

1. Open Issue: The issue is due to the version of react-native-reanimated-carousel being used. The Pagination component is not available in version 3.5.1. To resolve this, upgrade to version 4.0.0-alpha.12 or later by running the command:

   yarn add [email protected]

   After upgrading, you should be able to import and use the Pagination component as shown in the documentation ^[1].

2. Closed Issue: The Pagination component was not exported in earlier versions. If upgrading is not an option, you can create a custom pagination component. However, upgrading to version v4.0.0-alpha.11 or later is recommended to use the built-in Pagination ^[2].

Consider upgrading your package to the latest version to resolve this issue.

To continue talking to Dosu, mention @dosu.

[dohooo]

which version are you using?

[ducpt-bili]

I met this issue on:
"react-native-reanimated-carousel": "^3.5.1",
"react-native-gesture-handler": "~2.18.1",
"react-native-reanimated-carousel": "^3.5.1",
expo: 51
cc @dohooo
i will try to upgrade lib to 4.0.0-alpha.12 and see if the issue still persist or not.
Thanks

[MonicaP22]

+1 with version 3.5.1 the Pagination component is not found from the dependencies.