machadogj / react-native-carousel-control

React Native Carousel control with support for iOS and Android
MIT License
247 stars 55 forks source link

Carousel can slide to position #2 even if there is only one item #22

Closed tezqa closed 7 years ago

tezqa commented 7 years ago

To reproduce this issue: Add only one item to the carousel and try to slide to the right: an invisible item is selected.

A quick fix:

// Render
const { items} = this.state;
<Carousel ref="carousel"
                  onPageChange={this.onItemChange.bind(this)}>
        {items.map((item, index) => {
            return (
              <CarouselItem
                data={item}
                key={'item' + index}/>
            );
          })}
</Carousel>

// Class function
onItemChange(index) {
    const { items } = this.state;
    if (items && index >= items.length) {
      this.refs.carousel.goToPage(index - 1);
    }
  }
janyk commented 7 years ago

@tezqa this.refs.carousel.goToPage is an undefined function for me, am I correct in my understanding that this is made accessible to us by the react-native-carousel-control component, or is there more I have to do here?

machadogj commented 7 years ago

@janyk make sure you have the "ref" property like this:

<Carousel ref="carousel"
machadogj commented 7 years ago

@tezqa thank you very for reporting it, and the workaround! Looks like we should add that validation to the goToPage method (https://github.com/machadogj/react-native-carousel-control/blob/master/index.js#L91).

Let me know if you are up for a PR, or else I'll try to tackle this later on. Thanks!

machadogj commented 7 years ago

Hi @tezqa sorry for the huge delay, but this should be fixed in version 1.1.2. Let me know if you get a chance to test in your side. Thanks for reporting it!