Carousel items not moving

[ryanchapel-hero]

Hoping you can point out if I'm doing something incorrectly in the carousel - my items are not moving when I initiate ref.current.next(), ref.current.prev(), or when using ref.current.scrollTo({ count: 1 }):

import { useState } from 'react'
import { useRef } from 'react'
import Animated from 'react-native-reanimated'
import type { ICarouselInstance } from 'react-native-reanimated-carousel'
import Carousel from 'react-native-reanimated-carousel'
import { Button, Stack, Theme, XStack } from 'tamagui'

import TaggedContentCard from '../../molecules/TaggedContentCard/TaggedContentCard'
import type { Link } from '../../types/Link'

const cardContent = [
  {
    mediaType: 'image',
    content: {
      url: '/path/to/page',
      image: {
        url: 'https://picsum.photos/1280/720',
        altText: 'This is the image alt text',
        description: 'This is the image description',
      },
      title: '1 Arcu feugiat sit ut in dolor at.',
      authoredDate: 'March 12, 2024',
      duration: '7 minutes',
      videoID: 6332071188112,
    },
  },
  // ... removed extra items for brevity
]

export function CardCarousel({ data = cardContent }) {
  const [activeIndex, setActiveIndex] = useState(0)
  const ref = useRef<ICarouselInstance>(null)
  const indicatorWidth = 100 / data.length

  const handleCarouselMove = (index: number) => {
    setActiveIndex(index)
    ref.current?.scrollTo({ index: index })
  }

  const baseOptions = {
    vertical: false,
    width: 285,
    height: 380,
  } as const

  return (
      <Stack f={1}>
        <Stack f={1}>

          <Carousel
            {...baseOptions}
            data-cmp="ReanimatedCarousel"
            loop={false}
            ref={ref}
            style={{ width: '100%' }}
            autoPlay
            data={data}
            pagingEnabled
            onSnapToItem={(index) => handleCarouselMove(index)}
            renderItem={({ index }) => (
              <Stack key={index} mr="$4">
                <TaggedContentCard
                  mediaType={data[index].mediaType}
                  content={data[index].content}
                />
              </Stack>
            )}
          />
        </Stack>

        <XStack p="$10">
          {/* carousel progress indicator */}
          <Stack bg="lightgray" h={2} w="80vw" pos="relative">
            <Stack
              animateOnly={['transform']}
              bg="darkgray"
              w={indicatorWidth.toString() + '%'}
              h="100%"
              pos="absolute"
              top="0"
              left={(indicatorWidth * activeIndex).toString() + '%'}
            />
          </Stack>

          {/* prev / next buttons */}
          <XStack>
            <Button
              unstyled
              bg="transparent"
              p="0"
              bw="0"
              onPress={() => {
                ref.current?.prev()
              }}
            >
              <Icon
                color={activeIndex === 0 ? '$surfaceDisabled' : '$textCtaInvert'}
                name={'arrow-left' as IconName}
                height="$3"
                width="$3"
              />
            </Button>
            <Button
              unstyled
              bg="transparent"
              p="0"
              bw="0"
              onPress={() => {
                ref.current?.next()
              }}
            >
              <Icon
                color={activeIndex === data.length - 1 ? '$surfaceDisabled' : '$textCtaInvert'}
                name={'arrow-right' as IconName}
                height="$3"
                width="$3"
              />
            </Button>
          </XStack>
        </XStack>
      </Stack>
  )
}

Describe the bug
The carousel items do not move at all.

To Reproduce
Steps to reproduce the behavior:
Watch my gif - the progress indicator at the bottom moves when I click 'Next' (the right arrow) and will move by itself if autoplay={true}, but the carousel items themselves don't move

Expected behavior
The carousel items should move to the left when clicking the right arrow or when autoplay={true}

Screenshots

Versions (please complete the following information):
"react": "^18.2.0",
"react-native": "0.72.6",
"react-native-gesture-handler": "^2.15.0",
"react-native-reanimated": "^3.8.0",
"react-native-reanimated-carousel": "^3.5.1"

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[dosubot]

Based on the code snippet you've provided, it seems like you're correctly using the scrollTo method provided by the react-native-reanimated-carousel library. However, as I mentioned in the context, the actual implementation of the scrollTo, next, and prev methods are not visible in the provided code. These methods should be manipulating the scroll position of the carousel items for them to move.

The issue you're experiencing might be related to some open issues in the react-native-reanimated-carousel repository. For instance, scrollTo, next, prev animation problem and the carousel is un working seem to describe similar problems. The suggested solution in the latter issue is that the carousel works without the debugger. You might want to try this to see if it resolves your issue.

As for the scrollTo method, it doesn't directly manipulate the scroll position of the carousel items. Instead, it relies on the carouselController object, which is created using the useCarouselController hook. This controller likely manages the scroll behavior through a combination of Reanimated's animated values (handlerOffset) and gestures, orchestrating the scroll animations and interactions in a more declarative and reactive manner.

To resolve this issue, ensure that your next, prev, and scrollTo methods in the useCarouselController hook (or wherever they are implemented) are correctly updating the scroll position. This can be done by:

1. Directly manipulating the scroll position of the scrollable component (e.g., using scrollTo method on a ScrollView or similar).
2. Updating a state variable or Animated.Value that the scrollable component uses to determine its scroll position, and ensuring this change triggers a re-render or update of the scroll position.

Without the implementation details of the useCarouselController hook and how the ScrollViewGesture component handles the translation prop, it's challenging to provide a precise solution. However, reviewing and ensuring that the scroll position is being correctly manipulated in response to next, prev, and scrollTo method calls is a critical step towards resolving the issue.

I hope this helps! If you have any more details about your implementation or if there's anything else you'd like to know, feel free to ask.

Sources

• scrollTo, next, prev animation problem
• the carousel is un working
• [FEATURE REQUEST] Forward ref for explicit scrolling/pagination
• Hi
• src/components/Carousel.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.

If you want to continue the conversation, start your reply with @dosu-bot.

[ryanchapel-hero]

@dosu-bot thanks - you're a cool bot, but that didn't end up helping.

[dosubot]

@ryanchapel-hero I'm sorry to hear that the previous response didn't fully address your issue. I understand that troubleshooting these kinds of problems can be frustrating. If you could provide more specific details about your implementation, such as the useCarouselController hook or any other relevant code, I'd be happy to take a closer look and provide more targeted assistance. Additionally, if there are any error messages or console logs related to the carousel behavior, sharing those could also help in diagnosing the issue more accurately.

Feel free to provide any additional information, and I'll do my best to assist you further.

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.

If you want to continue the conversation, start your reply with @dosu-bot.

[ryanchapel-hero]

This was a duplicate of #509