Nested carousel issue: wrappedRef.scrollToOffset

[faisalhok]

Newbie here:

I am using the Carousel inside a flat list to render some cards. I would like to tap on one of the cards to go to the next one. I assigned a reference to the carousel and using the following code on the card that is being rendered:

<TouchableWithoutFeedback onPress={() => carousel.snapToNext(activeSlide)}>

This works just fine.

Then I extended my project and made it a two page app that is based on react-navigation-stack. Now, the carousel works fine with swiping but the tapping on a card to go to the next one using the above function doesn't work anymore. I get the following TypeError:

"wrappedRef.scrollToOffset is not a function" "wrappedRef.scrollToOffset(options)" "wrappedRef.scrollToOffset is undefined"

Some suggestions or solutions would be highly appreciated. Thank you in advance.

My Carousel setting

        <Carousel
          ref={c => { carousel = c; }}
          layout={"default"}
          data={Data}
          sliderWidth={windowWidth}
          itemWidth={carouselWidth}
          renderItem={itemToRender}
          onSnapToItem={
            index => setActiveSlide(index)
          }
        />

Rendering the cards in TopNews

 <TouchableWithoutFeedback onPress={() => carousel.snapToNext(activeSlide)}>
    <View style={styles.card}>
      <ImageBackground source={{ uri: item.pic }}>
        <View style={styles.titlePanel}>
          <LinearGradient colors={['transparent', 'rgba(0,0,0,0.9)']} style={styles.linerStyle} />
          <TouchableWithoutFeedback onPress={() => navigation.navigate('NewsDetails', item)}>
            <Text style={styles.newstitle}>{item.title}</Text>
          </TouchableWithoutFeedback>
        </View>
      </ImageBackground>
    </View>
  </TouchableWithoutFeedback>

[faisalhok]

Friendly ping. Anyone please?

[filipef101]

can be fixed with useScrollView true

[faisalhok]

Thank you, this worked like a charm!

[leonboripgs]

I set useScrollView as true and the scrollToOffset issue fixed. But I got another error. wrappedRef.scrollTo is not a function.

[igorribeiro21]

@leonboripgs Here it worked by changing the ref:

ref={carousel => (this._carousel = carousel)}

[andrey-grach]

How can I do this without useScrollView={true}. I don't want to use ScrollView because it's laggy.

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2