Items are jumping on initial load

Is this a bug report, a feature request, or a question?

Bug Report

Have you followed the required steps before opening a bug report?

(Check the step you’ve followed - put an x character between the square brackets ([]).)

• I have read the guidelines regarding bug report.
• I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
• I have searched for existing issues and made sure that the problem hasn’t already been reported.
• I am using the latest plugin version.
• I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn’t a React Native bug?

Yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

iOS. Untested on Android.

Is the bug reproductible in a production environment (not a debug one)?

Yes

Environment

(Write your answer here.)

Expected Behavior

On load, the items are expected to load such that if an item is at index 0, it is the only one visible. Even if the item hasn’t loaded yet, it should still be the index displayed on screen.

(Write what you thought would happen.)

Actual Behavior

Currently, on initial load, item at index 0 is not the first element that a user sees. Currently, a user will see item at index 4, and then it jumps back to index 0.

(Write what happened. Add screencasts/screenshots!)

Reproducible Demo

A video of the bug here: https://imgur.com/K4K4WhJ

The code I’m using looks like this:

<Carousel
                                   sliderWidth={screenWidth}
                                   sliderHeight={125}
                                   itemWidth={screenWidth * .4}
                                   data={categories[category]['items']}
                                   renderItem={(thing) => this.renderItem({thing, category})}
                                   inactiveSlideScale={1}
                                   inactiveSlideOpacity={1}
                                   hasParallaxImages={false}
                                   loop={true}
                                   loopClonesPerSide={2}
                                   onSnapToItem={(i) => this.updateIndex(i, category)}
                                   enableSnap={false}
                                   enableMomentum={true}
                                   activeAnimationType="spring"

                               />

renderItem is a simply button:

renderItem({ thing, category }){
     let { item, index } = thing
     let itemLink = () =>  this.props.navigation.navigate({
         routeName: 'Item', 
         params: { item: item.id, itemData: item, category },
         key: item.id
     })
     return(
         <TouchableOpacity key={item.id} onPress={itemLink} key={item.id} style={{ borderRadius: 10, width: screenWidth * .4, marginHorizontal: 5 }}>
         <Transition shared='itemImage'>
             <Image source={{ uri: item.image }} style={{ borderRadius: 10, height: 125, width: screenWidth * .4 }} />
         </Transition>
         <Text style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>{item.name}</Text>
     </TouchableOpacity>
     )
 }

Steps to Reproduce

This is on the initial mounting/loading of the component. To reproduce, if you use the above code and replace my logic for the image source with your own, you should be able to see how it behaves.

[pratik72]

Facing same issue. After first time load, user slide 2 or 3 index and suddenly it set 0 index like init load. But still waiting for solution. 😞

[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