Strange behaviour when loop is enabled and data is dynamic!

[preko96]

Bug report (iOS)

criteria :
data is dynamic (like I got an initial length of 1, but the length gonna be change to 5 after 1 sec), and the loop is on.

behaviour:
after the number of rendered images changes, the carousel (gonna scrollTo) gonna render the last image, then the first again. (like it's not sure what to do).

possible workaround:
adding a key={data.length} to the Carousel, but of course that gonna destroy, and remount the component what is heavy and cause flickering.

<Carousel
   loop
   data={urls}
   renderItem={this._renderItem}
   slideStyle={{ width: viewportWidth }}
   sliderWidth={viewportWidth}
   itemWidth={viewportWidth}
   inactiveSlideOpacity={1}
   inactiveSlideScale={1}
   onSnapToItem={this.onSnapToItem}
   activeSlideAlignment="center"
/>

Environment:
React: 16.7
React native: 0.57.4
react-native-snap-carousel: 3.7.5

Target Platform:
iOS (12.1)

[bd-arc]

Can you please provide a Snack example in which the issue can be reproduced?

[galihlprakoso]

I experience same issue. i have same implementation as @preko96 . when i try to debug the carousel, the first index is not 0 but 2. when the slider started, it works fine in first cycle, but after the end of the cycle suddenly it back to index 1 not 0. (i have 4 contents length).

[kanthi0802]

Even i'm facing this issue. When the data is dynamic the view simply jumps to an index other than 0.

[SaraChicaD]

The issue I'm getting with dynamic data is that I'm trying to always have a set of 3 items, swap out the first and last, but then Carousel never recognizes that there are more than 3 items in the array.

Does anyone have an example of how they solved this or got around it?

So I have this: data = [first, second, third] and I have logic that's constantly updating all three images, but the Carousel will only ever let me swipe to the 3 items.

[FaiChou]

Same problem when the swiper data is changed, example:

const MOCK = [
  'https://images.unsplash.com/photo-1575574829566-658edcaffb58?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjY0MjQwfQ',
  'https://images.unsplash.com/photo-1574729418529-d1a8cc214ef6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjY0MjQwfQ',
  'https://images.unsplash.com/photo-1575497247974-4cd4e44aa65a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjY0MjQwfQ',
  'https://images.unsplash.com/photo-1576470137415-9b4f7edcebfd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjY0MjQwfQ',
  'https://images.unsplash.com/photo-1574964557843-c6aae0c12946?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjY0MjQwfQ'
]

class Demo extends React.Component {
  state = { banners: [] }
  componentDidMount() {
    setTimeout(() => this.setState({ banners: MOCK }), 1000)
  }
  render() {
    const { banners } = this.state
    return (
      <Swiper
        loop
        autoplay
        data={banners}
        renderItem={({ item }) => <Image source={{ uri: item }} />}
      />
    )
  }
}

[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