React-native-snap-carousel: Custom renderDots components do not trigger snapToItem on press when tappableDots is enabled

[harrysolovay]

Is this a bug report or a feature request?

Bug report

Have you read the guidelines regarding bug report?

Yes.

Have you read the documentation in its entirety?

Yes.

Have you made sure that your issue hasn't already been reported/solved?

Yes.

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

I've only tested it on iOS.

Is the bug reproductible in a production environment (not a debug one)?

I'm unsure.

Have you been able to reproduce the bug in the provided example?

Yes.

Environment

Environment:
React: 16.2.0
React native: 0.52.0
react-native-snap-carousel: 3.6.0

Target Platform:
iOS (11.2)

Steps to Reproduce

(Write your steps here:)

1. create a Carousel, with its ref callback assigning to this.carouselRef
2. create a Pagination, with tappableDots, carouselRef, and a custom renderDots:

  <Pagination
    containerStyle={{
      flexDirection : 'row',
      height : 50,
      paddingTop : 0,
      paddingBottom : 0
    }}
    renderDots={ activeIndex => (
      IONICON_NAMES.map((ioniconName, i) => (
        <View
          style={{ flex : 1, alignItems : 'center' }}
          key={ i }
        >
          <Ionicons
            name={ ioniconName }
            color={ i === activeIndex ? '#4a90e2' : '#000' }
            size={ 30 }
          />
        </View>
      ))
    )}
    activeDotIndex={ this.state.activeTab }
    dotsLength={ 3 }
    tappableDots={ !!this.carouselRef }
    carouselRef={ this.carouselRef }
  />

Expected Behavior

Before implementing a custom renderDot component, tapping on a given dot would trigger the correct snapToItem method call. With the custom renderer, tapping on a given tab (custom dot) does not result in the same behavior.

Actual Behavior

There is no error message. From renderDot's 3 available parameters (activeIndex, total, context), none contains the snapToItem method. If they did, I'd be able to pass this method to the dot components. I originally thought that react-native-snap-carousel would, behind the scenes, wrap the custom dot components with onPress callbacks. But it appears that using dotRenderer overrides the tappableDots behavior altogether.

Reproducible Demo

Here's the Snack 🥇

[harrysolovay]

Just updated the original post with the Snack demo :) THANK YOU!

[bd-arc]

Hey @harrysolovay,

I haven't made it clear in the doc, but when you use the renderDots prop, dots' onPress logic is lost and you need to provide yours. I admit that this can be pretty confusing and I'll fix this in the next release.

For now, I've updated your Snack example and brought in the logic of the PaginationDot component ;-)

You can find it here: https://snack.expo.io/SkG6Agluz

[harrysolovay]

Worked like a charm. Thank you @bd-arc !!!

[bd-arc]

@harrysolovay You've edited your message, so your question doesn't appear anymore, but here is my answer anyway ;-)

You should definitely use another plugin to create tabs; in fact, I recommend react-native-tab-view which I've used in production with great success.

For more info about why I'd rather go with other plugins for fullscreen carousels, see this. And if you decide on using the tab plugin, take a look at #258 ;-)

[harrysolovay]

I actually emailed that to you directly (but kept the issue string as the subject––never posted it here)... sorry if that was confusing. Thank you for recommending me react-native-tab-view. You've been so so so helpful!!!

[bd-arc]

@harrysolovay Happy to help! And, indeed, you're right: I got confused :-)