Open Najaf-Rai opened 3 years ago
i have a tab screen there i,m showing few item of the list on tab screen... when user click one of item i pass the whole array and index number through props on next screen where i have set carousel.. its working pretty fine The only issue is i think in first item its not opening the index which i pas at start. here is my code
<Carousel
layout="default"
layoutCardOffset={20}
ref="isCarousel"
data={this.state.storiesList}
firstItem={this.state.sliderActiveSlide}
initialScrollIndex={this.state.sliderActiveSlide}
onSnapToItem={(index) => this.setState({ sliderActiveSlide: index })}
sliderWidth={SLIDER_WIDTH}
itemWidth={ITEM_WIDTH}
inactiveSlideShift={0}
useScrollView={true}
loop={true}
autoplay={true}
autoplayDelay={2000}
autoplayInterval={3000}
/>
Urgent help needed
@Najaf-Rai I have a similar issue, where it would stop working the length of carousel went past 7.
useScrollView
ended up being my fix, but I found another fix
Using initialScrollIndex
to match firstIndex
, like you had. I also added:
getItemLayout={(_data, index) => (
length: SLIDER_WIDTH,
offset: SLIDER_WIDTH * index,
index,
})}
As a prop, and that did the trick
@Najaf-Rai 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
I'm having this same issue
@Najaf-Rai I have a similar issue, where it would stop working the length of carousel went past 7.
useScrollView
ended up being my fix, but I found another fixUsing
initialScrollIndex
to matchfirstIndex
, like you had. I also added:getItemLayout={(_data, index) => ( length: SLIDER_WIDTH, offset: SLIDER_WIDTH * index, index, })}
As a prop, and that did the trick
I have the same problem, your solution is right👍
Is this a bug report, a feature request, or a question?
(Write your answer here.)
Have you followed the required steps before opening a bug report?
yes (Check the step you've followed - put an
x
character between the square brackets ([]
).)Have you made sure that it wasn't a React Native bug?
(Write your answer here.)
Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
(Write your answer here and specify the iOS/Android versions on which you've been able to reproduce the issue.)
Is the bug reproductible in a production environment (not a debug one)?
(Write your answer here.)
Environment
(Write your answer here.)
Expected Behavior
(Write what you thought would happen.)
Actual Behavior
(Write what happened. Add screencasts/screenshots!)
Reproducible Demo
(Paste the link to a Snack example in which the issue can be reproduced. Please follow the guidelines for providing a Minimal, Complete, and Verifiable example.)
Steps to Reproduce
(Write your steps so that anyone can reproduce the issue in the Snack demo you provided.)
1. 2. 3.