Custom renderDots components do not trigger snapToItem on press when tappableDots is enabled

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 🥇

[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

[marcus-o-fintron]

@bd-arc