meliorence / react-native-snap-carousel

Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.
BSD 3-Clause "New" or "Revised" License
10.37k stars 2.29k forks source link

first item is not opening the index which i pass #863

Open Najaf-Rai opened 3 years ago

Najaf-Rai commented 3 years ago

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.

Najaf-Rai commented 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

mikeislearning commented 3 years ago

@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

dohooo commented 3 years ago

@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

cactisolutions commented 3 years ago

I'm having this same issue

DebbieL commented 9 months ago

@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

I have the same problem, your solution is right👍