can not read property 'Basic' of undefined

[huseyintopuz]

import { View, Dimensions } from 'react-native';
import React, { useRef } from 'react';
import Carousel, { Pagination } from 'react-native-reanimated-carousel';
import { campaigns } from '../../constants/campaigns';
import CampaignCard from './CampaignCard';
import { useSharedValue } from 'react-native-reanimated';

const CampaignCarousel = () => {
const width = Dimensions.get('window').width;
const ref = useRef(null);
const progress = useSharedValue(0);

const onPressPagination = index => {
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 (

<Carousel
ref={ref}
width={width}
height={width / 2}
data={campaigns}
onProgressChange={progress}
// mode="parallax"
// scrollAnimationDuration={1000}
renderItem={({ item }) => }
/>
<Pagination.Basic
progress={progress}
data={campaigns}
dotStyle={{ backgroundColor: 'rgba(0,0,0,0.2)', borderRadius: 50 }}
containerStyle={{ gap: 5, marginTop: 10 }}
onPress={onPressPagination}
/>

);
};

export default CampaignCarousel;

although i am using last version 3.5.1, it gives this error.

[dosubot]

The error "cannot read property 'Basic' of undefined" occurs because the Pagination component is not being imported correctly. Ensure you are importing Pagination from react-native-reanimated-carousel and then accessing the Basic component.

Here is the corrected code snippet:

import { View, Dimensions } from 'react-native';
import React, { useRef } from 'react';
import Carousel, { Pagination } from 'react-native-reanimated-carousel';
import { campaigns } from '../../constants/campaigns';
import CampaignCard from './CampaignCard';
import { useSharedValue } from 'react-native-reanimated';

const CampaignCarousel = () => {
  const width = Dimensions.get('window').width;
  const ref = useRef(null);
  const progress = useSharedValue(0);

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

  return (
    <View>
      <Carousel
        ref={ref}
        width={width}
        height={width / 2}
        data={campaigns}
        onProgressChange={progress}
        renderItem={({ item }) => <CampaignCard villa={item} />}
      />
      <Pagination.Basic
        progress={progress}
        data={campaigns}
        dotStyle={{ backgroundColor: 'rgba(0,0,0,0.2)', borderRadius: 50 }}
        containerStyle={{ gap: 5, marginTop: 10 }}
        onPress={onPressPagination}
      />
    </View>
  );
};

export default CampaignCarousel;

Ensure you have the correct import statements:

import { View, Dimensions } from 'react-native';
import React, { useRef } from 'react';
import Carousel, { Pagination } from 'react-native-reanimated-carousel';
import { campaigns } from '../../constants/campaigns';
import CampaignCard from './CampaignCard';
import { useSharedValue } from 'react-native-reanimated';

If the issue persists, make sure react-native-reanimated is properly installed and configured. You can reinstall it using:

yarn add react-native-reanimated@~3.3.0

After installing, rebuild your project:

yarn start --reset-cache
yarn android  # or yarn ios

Also, ensure your babel.config.js includes the react-native-reanimated/plugin:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-reanimated/plugin',
  ],
};

This should resolve the issue with the Pagination.Basic component being undefined.

Details

Sources

• TypeError: Cannot read property 'adaptViewConfig' of undefined
• TypeError: (0, _reactNativeReanimated.useSharedValue) is not a function.
• TypeError: Cannot read properties of undefined (reading 'toString')
• Attempting to define property on object that is not extensible
• Basic example doesn't actually return anything
• example/expo/package.json
• src/components/Pagination/index.tsx
• src/components/Pagination/Basic/index.tsx
• example/website/pages/usage.mdx
• example/app/src/pages/parallax/index.tsx
• src/components/Pagination/Basic/PaginationItem.tsx
• example/app/src/pages/quick-swipe/index.tsx

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[sawane8]

Same problem here, trying all the method above, still not working, and i noticed that there are no Pagination exported from react-native-reanimated-carousel index.tsx file

[huseyintopuz]

@dosu still not working

[dosubot]

The issue arises because the Pagination component is not exported from the react-native-reanimated-carousel package. To resolve this, you need to create your own pagination component or use a different library for pagination.

Here's an example of how you can create a custom pagination component:

import { View, Dimensions, TouchableOpacity, StyleSheet } from 'react-native';
import React, { useRef } from 'react';
import Carousel from 'react-native-reanimated-carousel';
import { campaigns } from '../../constants/campaigns';
import CampaignCard from './CampaignCard';
import { useSharedValue } from 'react-native-reanimated';

const CustomPagination = ({ data, progress, onPress }) => {
  return (
    <View style={styles.paginationContainer}>
      {data.map((_, index) => {
        const isActive = Math.round(progress.value) === index;
        return (
          <TouchableOpacity
            key={index}
            style={[styles.dot, isActive && styles.activeDot]}
            onPress={() => onPress(index)}
          />
        );
      })}
    </View>
  );
};

const CampaignCarousel = () => {
  const width = Dimensions.get('window').width;
  const ref = useRef(null);
  const progress = useSharedValue(0);

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

  return (
    <View>
      <Carousel
        ref={ref}
        width={width}
        height={width / 2}
        data={campaigns}
        onProgressChange={progress}
        renderItem={({ item }) => <CampaignCard villa={item} />}
      />
      <CustomPagination
        progress={progress}
        data={campaigns}
        onPress={onPressPagination}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  paginationContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 10,
  },
  dot: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: 'rgba(0,0,0,0.2)',
    marginHorizontal: 5,
  },
  activeDot: {
    backgroundColor: 'black',
  },
});

export default CampaignCarousel;

This custom pagination component should work as a replacement for the missing Pagination component from react-native-reanimated-carousel.

@ghost, could you help with this?

Details

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[huseyintopuz]

@sawane8 this works for me

import { View, Dimensions, TouchableOpacity, StyleSheet } from 'react-native';
import React, { useRef, useState } from 'react';
import Carousel from 'react-native-reanimated-carousel';
import { campaigns } from '../../constants/campaigns';
import CampaignCard from './CampaignCard';
import { useSharedValue } from 'react-native-reanimated';

const CustomPagination = ({ data, currentIndex, onPress }) => {
return (

{data.map((_, index) => {
const isActive = currentIndex === index;
return (
<TouchableOpacity
key={index}
style={[styles.dot, isActive && styles.activeDot]}
onPress={() => onPress(index)}
/>
);
})}

);
};
const CampaignCarousel = () => {
const width = Dimensions.get('window').width;
const ref = useRef(null);
const progress = useSharedValue(0);
const [currentIndex, setCurrentIndex] = useState(0);

const onProgressChange = (_, absoluteProgress) => {
progress.value = absoluteProgress;
setCurrentIndex(Math.round(absoluteProgress));
};

const onPressPagination = index => {
ref.current?.scrollTo({ index, animated: true });
setCurrentIndex(index);
};
return (

<Carousel
ref={ref}
width={width}
height={103}
data={campaigns}
onProgressChange={onProgressChange}
mode="parallax"
renderItem={({ item }) => }
/>


);
};

export default CampaignCarousel;

const styles = StyleSheet.create({
activeDot: {
backgroundColor: 'black',
},
dot: {
backgroundColor: 'rgba(0,0,0,0.2)',
borderRadius: 5,
height: 10,
marginHorizontal: 5,
width: 10,
},
paginationContainer: {
flexDirection: 'row',
justifyContent: 'center',
marginTop: 10,
},
});

[BrodaNoel]

My friend, Pagination is not present in the version you are specifying.

Pagination was added on v4.0.0-alpha.11 (https://github.com/dohooo/react-native-reanimated-carousel/releases/tag/v4.0.0-alpha.11)

[wevak]

Installing latest version of React Native Reanimated Carousel did worked for me.
npm i [email protected]