indices mixing

[6axter82]

I have encountered an issue. in the onSnapToItemI do the following:

const { app, project, } = this.props.navigation.state.params;
...
<Carousel
...
loop={true}
loopClonesPerSide={10}
onSnapToItem={(index) => {
    console.log('current index of the Card is ', index);
    if (app[index].project._id != project._id) {
        console.log('blah');
    }
    // later usage of app[index] is not possible
    // when scrolling fast into the left direction, this sets index to negative value
}}
/>

I have three Cards and do 10 clones per side in order to catch up on the gaps at the edges (my previous issue described in #12). I get the print outs of the indices, and when I scroll fast than I get negative index, which is wrong as I want to check on app[index].

this is a print out of Chrom console.log(...)

@

I tried to play with loopClonesPerSide setting it to 3 and 5.

Setting it to 3 with carousel of 3 cards does not break the app, as the indices of newly added cards on the left side do not exceed 2,1,0;

In case of loopClonesPerSide={5} scrolling fast to the left edge before the new cards are added makes the index set to -2, and scrolling to the last card on the right side sets the index to 4. which is out of scope of the cards array.

As a work around maybe implement a new property for Carousel, which is move to next card at swipe and not further. Which is not a better solution as we want to scroll fast enough as we want and not go to the lets say 30's card one by one.

[bd-arc]

@6axter82 Regarding your issue, are you able to reproduce it in a production environment? As stated in this very important note, you unfortunately can't trust carousel's behavior in a debug environment on Android.

Note that there already is a prop that allows something along the lines of "slide by slide" scrolling: lockScrollWhileSnapping. It is kind of a hack because, ultimately, we've got no granular control over the underlying ScrollView.

Regarding the "jump" you're experiencing, it is linked to the fact that the scroll position is, indeed, repositioned when a clone or an edge has been reached. On iOS it works flawlessly, but on Android there sometimes is an ugly flicker. So far, I haven't been able to get to the root of the issue, even though I know that, again, it has to do with ScrollView's implementation. But Android is so random and buggy that this is a real nightmare to understand...

[bd-arc]

Well, forget about the app environment. I can see where the issue is coming from:

    _getDataIndex (index) {
        const { data, loopClonesPerSide } = this.props;
        const dataLength = data && data.length;

        if (!this._enableLoop() || !dataLength) {
            return index;
        }

        if (index >= dataLength + loopClonesPerSide) {
            return index - dataLength - loopClonesPerSide;
        } else if (index < loopClonesPerSide) {
            return index + dataLength - loopClonesPerSide;
        } else {
            return index - loopClonesPerSide;
        }
    }

Clearly, this will return negative values if loopClonesPerSide is bigger than data's length. I'm going to work on a fix right away!

[bd-arc]

@6axter82 This wasn't that easy, but this commit should fix the issue.

Can you try it and confirm that it works for you?

[6axter82]

Hey, I tried, it works nice!

[bd-arc]

Good to know. The fix has been published in version 3.3.4 ;-)