meliorence / meliorence/react-native-snap-carousel
Nested carousel issue: wrappedRef.scrollToOffset
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 10.5k
- Forks
- 2.3k
- PR merge metrics
- No merged PRs in 30d
Description
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>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the tap handler calling carousel.snapToNext(activeSlide) after navigation is introduced, then trace the Carousel ref through the wrappedRef.scrollToOffset error. Done means tapping a rendered card advances the carousel without the TypeError; the payload names no source files or tests to run.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100