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

Created on 26 Oct 2017  ·  4Comments  ·  Source: meliorence/react-native-snap-carousel

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.

Most helpful comment

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}.

All 4 comments

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?

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 :)

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}.

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

Was this page helpful?
0 / 5 - 0 ratings