How do I move between the data in react-native-snap-carousel not working

Question

I am having a problem, I am creating fake data and I am not being able to scroll to the right or left or press the dots.The buttons of the dots are not working for me and the sliding is not working for me, what is wrong with the code? because i'm not finding the problem

This is my card in which I am calling pagination and carousel and assigning the parameters

import React from 'react'
import { View } from 'react-native'

import Carousel, { Pagination } from 'react-native-snap-carousel'
import CarouselCardItem, { SLIDER_WIDTH, ITEM_WIDTH } from './CarouselCardItem'

export const CarouselCard = () => {
  const isCarousel = React.useRef(null)
  const [index, setIndex] = React.useState(0)
  const data = [
    {
      title: "Hola",
      body: "Ut tincidunt tincidunt erat. Sed cursus turpis vitae tortor. asdafs asdafsas dasfasd fasd fas s afsad",
      imgUrl: "https://images.unsplash.com/photo-1638489440786-0ab170d0ae9c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
    },
    {
      title: "In turpis",
      body: "Aenean ut eros et nisl sagittis vestibulum. Donec posuere vulputate arcu. Proin faucibus arcu quis ante. Curabitur at lacus ac velit ornare lobortis. ",
      imgUrl: "https://images.unsplash.com/photo-1638497424199-e455a6265fe9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
    },
    {
      title: "Lorem Ipsum",
      body: "Phasellus ullamcorper ipsum rutrum nunc. Nullam quis ante. Etiam ultricies nisi vel augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.",
      imgUrl: "https://images.unsplash.com/photo-1638490611589-c5e9597735de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxN3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
    }
  ]
  console.log(index)
  return (
    <View>
      <Carousel
        layout="tinder"
        layoutCardOffset={9}
        ref={isCarousel}
        data={data}
        renderItem={CarouselCardItem}
        sliderWidth={SLIDER_WIDTH}
        itemWidth={ITEM_WIDTH}
        inactiveSlideShift={0}
        useScrollView={true}
      />
      <Pagination
        dotsLength={data.length}
        activeDotIndex={index}
        carouselRef={isCarousel}
        dotStyle={{
          width: 14,
          height: 14,
          borderRadius: 9,
          marginHorizontal: 0,
          backgroundColor: '#d72226',
        }}
        inactiveDotOpacity={1}
        inactiveDotScale={1}
        inactiveDotStyle={{
          borderColor: "#d72226",
          borderWidth: 1.5,
          backgroundColor: "#fff"
        }}
        tappableDots={true}
      />
    </View>
  )
}

This is the item I am rendering

import { LinearGradient } from 'expo-linear-gradient'
import React from 'react'
import { View, Text, StyleSheet, Dimensions, Image, ImageBackground } from "react-native"
import { TouchableOpacity } from 'react-native-gesture-handler'
import { moderateScale, scale, verticalScale } from '../../utils/scaleAttributes'

export const SLIDER_WIDTH = Dimensions.get('window').width
export const ITEM_WIDTH = SLIDER_WIDTH

const CarouselCardItem = ({ item, index }) => {
  return (
    <View style={styles.container} key={index}>
      <ImageBackground
        source={{ uri: item.imgUrl }}
        style={styles.image}
      >
        <Text style={styles.body}>{item.body}</Text>  
        <TouchableOpacity
          onPress={() => console.log("object")}
          style={styles.button_history}
        >
          <LinearGradient 
            colors={["#d72226", "#a8232a"]}
            style={styles.gradiant_button}
          >
            <Text style={styles.button_text}>Historial de ordenes</Text>
          </LinearGradient>
        </TouchableOpacity>
      </ImageBackground>
    </View>
  )
}

Answer 1

Looks like you need to add the onSnapToItem callback to the Carousel component. This is triggered when the user swipes to a new page at which point you should update the index

<Carousel
  layout="tinder"
  layoutCardOffset={9}
  ref={isCarousel}
  data={data}
  renderItem={CarouselCardItem}
  sliderWidth={SLIDER_WIDTH}
  itemWidth={ITEM_WIDTH}
  inactiveSlideShift={0}
  useScrollView={true}
  onSnapToItem={index => setIndex(index)}   <-- add this
/>