javascript - React Native Reanimated Carousel ScrollTo event not working - Stack Overflow

admin管理员组

文章数量:1323348

I am using react native reanimated carousel. In the carousel I am rendering images and when I tap on the image it doesn't scroll to that image. Here is the code:

<Carousel
        ref={carouselRef}
                loop
                width={Dimensions.get("window").width}
                height={300 / 2}
                data={carTypes}
                mode="parallax"
                defaultIndex={1}
                
                style={{ alignSelf: "center",justifyContent: "center", alignContent: "center"}}
                scrollAnimationDuration={1000}
                onSnapToItem={(index) => setActiveSlide(index)}
                renderItem={({ item, index }) => (
                    <TouchableOpacity
                    **onPress={() => carouselRef.current.scrollTo(index)}**
                    activeOpacity={0.1}
                        style={{
                            backgroundColor: activeSlide !== index ? carouselActiveSlide(index) : "#3887EF",
                            borderWidth: 1,
                            justifyContent: 'center',
                            transform: [{ rotate: "32deg" }],
                            borderRadius: 32,
                            width: 50
                        }}
                    />

I tried to test if other event like .next() , .prev() and they work as expected but .scrollTo(index) doesn't work. Can you tell me what am I missing ?

I am using react native reanimated carousel. In the carousel I am rendering images and when I tap on the image it doesn't scroll to that image. Here is the code:

<Carousel
        ref={carouselRef}
                loop
                width={Dimensions.get("window").width}
                height={300 / 2}
                data={carTypes}
                mode="parallax"
                defaultIndex={1}
                
                style={{ alignSelf: "center",justifyContent: "center", alignContent: "center"}}
                scrollAnimationDuration={1000}
                onSnapToItem={(index) => setActiveSlide(index)}
                renderItem={({ item, index }) => (
                    <TouchableOpacity
                    **onPress={() => carouselRef.current.scrollTo(index)}**
                    activeOpacity={0.1}
                        style={{
                            backgroundColor: activeSlide !== index ? carouselActiveSlide(index) : "#3887EF",
                            borderWidth: 1,
                            justifyContent: 'center',
                            transform: [{ rotate: "32deg" }],
                            borderRadius: 32,
                            width: 50
                        }}
                    />

I tried to test if other event like .next() , .prev() and they work as expected but .scrollTo(index) doesn't work. Can you tell me what am I missing ?

• javascript
• css
• reactjs
• react-native
• carousel

Share Improve this question Follow edited May 1, 2023 at 15:52 Nika asked May 1, 2023 at 15:15 NikaNika 12344 silver badges1212 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

If you look closer at the doc, you have to pass an object in scollTo with the index in it : https://github./dohooo/react-native-reanimated-carousel/blob/main/docs/props.md#ref

Like this :

scrollTo({index: 1})

For me carouselRef.current.next() and carouselRef.current.prev() also worked fine for me. https://reanimated-carousel.dev/props#prev

     <Carousel
        ref={carouselRef}
        loop={loop}
        width={width}
        height={height}
        autoPlay={autoPlay}
        data={data}
        scrollAnimationDuration={scrollAnimationDuration}
        onSnapToItem={onSnapToItem}
        renderItem={renderItem}
        pagingEnabled={true}
        snapEnabled={false}
        onProgressChange={(_, absoluteProgress) =>
          (progressValue.value = absoluteProgress)
        }
      />
      {showArrow && (
        <Box
          height={'full'}
          width={'full'}
          position={'absolute'}
          top={'0'}
          left={'0'}
          flexDir={'row'}
          justifyContent={'space-between'}>
          <Pressable
            _pressed={{
              opacity: 0.5,
            }}
            onPress={() => (carouselRef.current as any)?.prev()}
            justifyContent={'center'}
            alignItems={'center'}
            px={'2'}
            height={'full'}
            bgColor={'#00000040'}>
            {leftIcon}
          </Pressable>
          <Pressable
            _pressed={{
              opacity: 0.5,
            }}
            onPress={() => (carouselRef.current as any)?.next()}
            justifyContent={'center'}
            alignItems={'center'}
            px={'2'}
            height={'full'}
            bgColor={'#00000040'}>
            {rightIcon}
          </Pressable>
        </Box>
      )}

本文标签： javascriptReact Native Reanimated Carousel ScrollTo event not workingStack Overflow