React-native-snap-carousel: Pagination 'carouselRef' warning when carouselRef is set

[wkwyatt]

Hi @archriss,

I have a snap-carousel component with pagination (GREAT repo by the way!👍🏽 ). And everything works except I get this annoying error that the Pagination carouselRef isn't set when tappableDots is true, when it actually is set..... and it works. So the warning error is the only issue.

[bd-arc]

Hi @wkwyatt,

That's because the carousel reference isn't available before the component has been fully initialized, and Pagination's init is usually much quicker than Carousel's one.

If you take a look at the example's source code, you'll see that I've used a simple trick to prevent this error:

    get example1 () {
        const { slider1Ref } = this.state;

        return (
            <View>
                <Carousel
                  ref={(c) => { if (!this.state.slider1Ref) { this.setState({ slider1Ref: c }); } }}
                />
                <Pagination
                  carouselRef={slider1Ref}
                  tappableDots={!!slider1Ref}
                />
            </View>
        );

Does this solves the issue for you?

[wkwyatt]

Thanks it does, as I wrote the post I came up with this solution but was unsure if there was a better way.

             <Pagination
                  carouselRef={slider1Ref || {} }
                  tappableDots
                />

But thank you for responding so quickly :)

[bd-arc]

You're welcome ;-) I would also like to find a better solution, but that's the best I was able to come up with for now...

By the way, tappableDots expects a boolean, which means you should write tappableDots={sliderRef || false}.

[wkwyatt]

Yea you are right! Just fixed it lol...thats what I get for responding as soon as I woke up.