React-native-snap-carousel: snapToItem isn't snapping to the last item on android

[bernardakl]

Cannot snap to the last item of the carousel using snapToItem(lastItemIndex, animated = ...)
on android, working fine on IOS; Note that when I call the method snapToItem() on any index except the last one it works fine.
react-native-snap-carousel version 3.2.3

[bd-arc]

Hi @bernardakl,

I see that you've opened and closed this issue numerous times. Did you figure out what was the matter?

[bernardakl]

Hey,
Yeah figured it out at last,
In my application, I was adding a new item manually each time a button was pressed using a redux status.
The problem was that on android, the new item wasn't rendered fast enough, and the snapToItem function was running before the new item was rendered.
I fixed it by adding a delay of 100 ms before running the snapToItem function each time the new item was added as the following:
setTimeout(
() => {
this._carousel.snapToItem((this.props.containers.length) - 1, true);
},
100
);
this.props.containers contains the array of objects used to render the carousel items so
(this.props.containers.length) - 1 is the index of the last item of the carousel.

[bd-arc]

Thanks for the feedback!

This is pretty strange though; Android never fails to amaze as a source of surprising bugs.

[bernardakl]

Most welcome.
Yeah totally strange!

[Jhonsem]

same issue

[lefoy]

I'm also having this issue and I'm not using a dynamic list, when I call snapToItem for the last item it snap to the second last item in the list.

Edit: I tried using a 1 second delay before snapping but it didn't solve my issue

[bd-arc]

@lefoy Would you mind sharing a Snack example that reproduces the issue?

[lefoy]

@bd-arc it would take some time to make an isolated example to demonstrate the issue but I will do my best to give you as much information as possible.

I'm displaying a list of pictures using a ListView (think of a picture gallery) and when the user tap on one of the pictures, I open a new view using react-native-navigation and I display the pictures using this plugin. What I'm trying to do is to display the pictures in the carousel and start at the position of the picture the user tapped on. When I tap the picture in the gallery, I pass the index of the picture to the new view and I use this index with the firstItem prop. If I log the index after the component initialization, the value is correct, but the carousel doesn't display the right index.

At first I thought it was only the last item that was not working properly because I only had 6 items in my gallery.

From my tests, the first 5 items works like they should, but when the index is greater than 5, it will always display the 5th item.

I also tried to remove the firstItem prop and use the snapToItem method with a delay after the component mount, but I get the same results.

After the carousel is rendered, I can swipe to any slides without problem, it's only an issue of starting the carousel at the right position.

This is only an issue on Android, it's working great using the same code on iOS.

Let me know if I should make a new issue to track this, after some tests I'm not sure I'm having the same issue as OP.

Thank you in advance for your help, have a good day

[bd-arc]

@lefoy Ah, I see. This is an unfortunate FlatList bug that has been referenced in #63, #235, #261 and #288.

Take a look at this comment to learn more about the exact matter and to find out potential workarounds.

[lefoy]

@bd-arc Thank you! I will take a look at it.
Have a good day

[prestonbrown-me]

I am having this same issue. I'm trying to append a new card to a list given in the Carousel data prop. It is able to take me to the last item before the append to the list, but I always have to swipe one more time to get to the new element. Is it something wrong with my implementation?

    addCardHandler = () => {
        let tempCard = new Map<string, string>();
        for(let index in this.state.categories) {
            tempCard.set(this.state.categories[index], '');
        }
        this.setState((previousState: ContentFields, currentProps) => {
            return {
                data: [...previousState.data, tempCard]
            }
        },
        () => {
            this._carousel?.snapToItem(this.state.data.length-1);
        })
    }

[prestonbrown-me]

I edited one of the example snacks. This works on web, but not iOS.