question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

snapToItem does not move the slider to a specific position when list length is more than 15 items.

See original GitHub issue

There is a slider that contains more than 200 images there is a circular slider from which we slide that image slider. so we need to call the snapToItem method to move the carousel in a specific position. but snapToItem does not move the carousel to a specific position.

if the slider has only 10 or 15 images then it works perfectly but if we have more than 15 images snapToItem method doesn’t work properly.

bug report

snapToItem does not move the slider to a specific position.

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

Environment

(Write your answer here.)

Expected Behavior

Need to move the slider to a specific position where I want. For example, I have 120 images in the slider then I call the snapToItem(119) then it moves to the slider to that 119 images.

(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.)

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:6

github_iconTop GitHub Comments

8reactions
026binitcommented, Jul 14, 2022

@yorickshan have you provided getItemLayout props.

<Carousel
    ref={carouselRef}
    data={data}
    renderItem={renderCarouselItem}
    sliderWidth={width}
    itemWidth={ITEM_WIDTH}
    getItemLayout={getCarouselItemLayout}
  />
const getCarouselItemLayout = (_: any, index: number) => ({
    length: ITEM_WIDTH,
    offset: ITEM_WIDTH * index,
    index,
  });
carouselRef.current.snapToItem(index);
1reaction
yorickshancommented, Jul 14, 2022

@yorickshan have you provided getItemLayout props.

<Carousel
    ref={carouselRef}
    data={data}
    renderItem={renderCarouselItem}
    sliderWidth={width}
    itemWidth={ITEM_WIDTH}
    getItemLayout={getCarouselItemLayout}
  />
const getCarouselItemLayout = (_: any, index: number) => ({
    length: ITEM_WIDTH,
    offset: ITEM_WIDTH * index,
    index,
  });
carouselRef.current.snapToItem(index);

fixed, nice work, thank you.

Read more comments on GitHub >

github_iconTop Results From Across the Web

react-native-snap-carousel, snapToItem does not move the ...
react-native-snap-carousel, snapToItem does not move the slider to a specific position when list length is more than 15 items.
Read more >
Building a Smooth Image Carousel with FlatList in React Native
Carousels consolidate items within a single horizontally rotating widget. Users can scroll through items by dragging across right or left to ...
Read more >
Old Versions - REAPER
MIDI: when recording new MIDI items, show all CC data in one lane; MIDI: update arrange view when changing CC lanes in MIDI...
Read more >
Compose Foundation - Android Developers
This is the higher level entry point of Compose, designed to provide components ... Experimental ability to animate Lazy lists item positions was...
Read more >
React Native scrollToIndex - Dynamic size item scroll inside ...
In this video tutorial you will learn about React Native scrollToIndex and how to scroll to an item inside a FlatList, ListView, ScrollView, ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found