Pagination Examlpe For Javascript instead of TypeScript

[shubhamkackar0203]

i want to show the pagination component for my Carousel. The official document has the following code

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(null);
const progress = useSharedValue(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}

)}
/>

  <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;

However, Pagination,Basic is not working for JS. Can someone help me with this

[dosubot]

Hey, @shubhamkackar0203! I'm here to help you with your issue. Let's take a look at the problem together.

The example you provided is written in TypeScript, but it can be easily adapted for JavaScript. Here's how you can modify it:

1. Remove TypeScript-specific syntax, such as type annotations.
2. Ensure that the useSharedValue and ref are used correctly without type definitions.

Here's the JavaScript version of the code:

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

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

function App() {
  const ref = useRef(null);
  const progress = useSharedValue(0);

  const onPressPagination = (index) => {
    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 work for JavaScript. Make sure you have the correct versions of the dependencies installed, as mentioned in similar threads ^[1][2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[fwt-parth-jariwala]

`View id="carousel-component" dataSet={{ kind: 'utils', name: 'pagination' }} style={{ gap: 10 }}>
<Carousel
loop
ref={ref}

          width = {width}
          height = {width / 2}
          data = { list }

          autoPlay={true}
          autoFillData={true}
          pagingEnabled={true}
          scrollAnimationDuration={1000}
          renderItem={({ item }) => (
              <View style={styles.CarouselItem}>
                  <Image styles={styles.img} source={item.image} />
              </View>
          )}

      />
      </View>

      <Pagination.Basic
        progress={progress}
        data={list}
        dotStyle={{ backgroundColor: 'rgba(0,0,0,0.2)', borderRadius: 50 }}
        containerStyle={{ gap: 5, marginTop: 10 }}
        onPress={onPressPagination}
      />`

I have imported all the required modules for that and still got an error:

I am using below versions"
"react": "18.3.1",
"react-native": "0.76.6",
"react-native-gesture-handler": "^2.22.0",
"react-native-reanimated": "^3.16.7",
"react-native-reanimated-carousel": "^3.5.1",