React-native-snap-carousel: "Cannot read property 'stopTracking' of undefined " how to solve

[thepinyo]

[bd-arc]

Hi @thepinyo, could you please provide a bit more context and could you describe a way to reproduce the issue?

[bd-arc]

Closing as no further feedback was provided.

[fdwcomune]

Hi, I also got this issue recently. In my case it happened when changing the number of carousel items. When the active item index before the change is greater than the highest possible index after the change the error is thrown.

It has to to with the animated value assigned to the old active item which isn't available anymore. Specifically on:

    if (activeItem !== newActiveItem) {

            Animated[animationFunc](

                    this.state.interpolators[activeItem],

                    { ...animationOptions, toValue: 0 }

            ).start();

            this.setState({ activeItem: newActiveItem });

            Animated[animationFunc](

                    this.state.interpolators[newActiveItem],

                    { ...animationOptions, toValue: 1 }

            ).start();

    }

I got a (not so great) workaround for the issue :

1) Conditionally execute the animation on the old active item only when it is defined:

    if (activeItem !== newActiveItem) {
            if (this.state.interpolators[activeItem]) {
                    Animated[animationFunc](

                            this.state.interpolators[activeItem],

                            { ...animationOptions, toValue: 0 }

                    ).start();
            }
            this.setState({ activeItem: newActiveItem });

            Animated[animationFunc](

                    this.state.interpolators[newActiveItem],

                    { ...animationOptions, toValue: 1 }

            ).start();

    }

2) Manually reset the active item index when the carousel items change. The 'animated' arg needs to be false to avoid buggy behaviour.

    componentWillReceiveProps(nextProps) {

            if (this.props.numberOfCarouselItems !== nextProps.numberOfCarouselItems) {

                    this.carousel.snapToItem(0, false);

            }

    }

[bd-arc]

Hi @fdwcomune and thanks for the detailed info.

Note that many currently opened issues seem to be related to component's state management, meaning that we apparently need to improve it. I'll take a closer look at this matter shortly.

[MaxFrolov]

Hey guys, had the same issue - when trying to remove the item from items, hope that soon it will be fixed.

[arnsa]

https://github.com/archriss/react-native-snap-carousel/pull/67 this PR fixes the issue.

[bd-arc]

Hi guys,

I'm currently working on fixing the issue. @fdwcomune @Venumteam Would you mind sharing some code in order to help me reproduce the bug? So far, I haven't been able to do so.

FYI I won't merge #67 for now since the fix is, in my opinion, a bit hacky. Moreover, it will work only if a single item was removed. I'm trying to find another solution, but I might be mistaken since I haven't reproduced the bug yet. Thoughts are very welcome ;-)

[bd-arc]

Linked to #66

[kylanhurt]

Make sure that you use the <Animated._____> part of that tag. I've gotten similar issues for trying to animate a <View> instead of <Animated.View>

[bd-arc]

Hi guys! Version 2.3.0 should solve this issue.

Let me know if you still have problem with this.