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 doesn't change the current index "quick enough"

See original GitHub issue

Bug Report

This is a 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 ([]).)

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?

Only tested on Ios

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

No

Environment

Environment:

React Native: https://github.com/expo/react-native/archive/sdk-34.0.1.tar.gz React-native-snap-carousel: ^3.7.5 Target platform: iOS (12.0) -> EXPO

(Write your answer here.)

Expected Behavior

When programmatically snapToItem it will change the current index in the callback of the renderItem function with the correct value.

(Write what you thought would happen.)

See above.

When programmatically changing the snapToItem proving an index doesn’t change the currentIndex or doesn’t change the currentIndex quick enough in the carousel. So when the render function is being called I am receiving an old current Index which is crashing my existing code.

Reproducible Demo

  renderFiveHundredFilter = ({item, index}) => {
    console.log("CURRENT_INDEX", this._carousel.currentIndex);

     ^^ this._carousel.currentIndex won't change when an item is pressed. It will remain on 0

    return (
      <Text onPress={() => {
        this._carousel.snapToItem(index);
        this.onPrivilegesRangeChange("click", index)
      }
    } key={`abc_${index}`} style={{color: this._carousel.currentIndex === index ? "gold" : "white", fontFamily: Fonts.heavy, fontSize: Fonts.small}}>{item.name}</Text>
    )
  }

Steps to Reproduce

  1. Create a simple Carousel
  2. Change to a snap item programmatically using snapToItem callback function
  3. See if the currentIndex of the carousel is being received in the render function with the correct result.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:1
  • Comments:5

github_iconTop GitHub Comments

10reactions
kevinvugtscommented, Sep 25, 2019

When adding the following properties it started to work:

activeSlideOffset={2}
enableMomentum={true}

Can someone please explain why it works now? Someone else also appears to have this problem: https://github.com/archriss/react-native-snap-carousel/issues/541#issuecomment-514165668

3reactions
kevinvugtscommented, Oct 2, 2019

Is it working with Android?

On Android the whole snapToItem is not working.

Read more comments on GitHub >

github_iconTop Results From Across the Web

snapToItem doesn't change the current index "quick enough"
When programmatically changing the snapToItem proving an index doesn't change the currentIndex or doesn't change the currentIndex quick enough ...
Read more >
React Native snap to item with dynamic heights in FlatList
Let's say you have list of images with different heights and each time you scroll, you wan't the next item you scrolling to,...
Read more >
Compose Foundation
Please take a look at the existing issues in this library before you create ... Downloadable font resolution that does not change the...
Read more >
Customizing Qt Quick Controls
However, this will not work. You must implement both ScrollBar.qml and ScrollView.qml. Attached properties. It is common for a style to have certain...
Read more >
react-native-snap-carousel - npm
Note that it won't work if enableSnap has been set to false . ... snapToItem (index, animated = true), Snap to an item...
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