phil-r / react-native-looped-carousel

:carousel_horse: Looped carousel for React Native
MIT License
1.49k stars 306 forks source link

How to get current page? #110

Open quentinpaden opened 7 years ago

viktorsec commented 7 years ago

Hi, you can use getCurrentPage().

Example:

setCarouselRef = (ref) => {
    this.carousel = ref
}

getCurrentPage() {
  return this.carousel && this.carousel.getCurrentPage()
}

render() {
    return (
      <View style={{ flex: 1 }} onLayout={this._onLayoutDidChange}>
        <Carousel
          delay={2000}
          style={this.state.size}
          autoplay
          pageInfo
          onAnimateNextPage={(p) => console.log(p)}
          ref={this.setCarouselRef}
        >
          <View style={[{ backgroundColor: '#BADA55' }, this.state.size]}><Text>1</Text></View>
          <View style={[{ backgroundColor: 'red' }, this.state.size]}><Text>2</Text></View>
          <View style={[{ backgroundColor: 'blue' }, this.state.size]}><Text>3</Text></View>
        </Carousel>
      </View>
    );
  }
quentinpaden commented 7 years ago

Thank you so much, you are awesome!

quentinpaden commented 7 years ago

If you don't mind me asking, how would you put that method into a text component? It keeps telling me it's unidentified.