React-native-snap-carousel: this._carousel.currentIndex is undefined

[mazing]

How can I store a state with the index of the currently active slide?

I have tried this._carousel.currentIndex, but I get the error undefined is not an object (evaluating 'this._carousel.currentIndex').

I am setting the ref with

<Carousel
  ref={carousel => { this._carousel = carousel; }}

[bd-arc]

Hi @mazing,

Does this happen with version 2.4.0 or with the FlatList version?

[bd-arc]

I've just tried the following and didn't face any issue:

<Carousel
  ref={(c) => { this._carousel = c; }}
/>

alert(this._carousel && this._carousel.currentIndex);

Are you positive that the <Carousel /> is mounted when you call this._carousel.currentIndex the first time?

[andreecosta]

Im getting undefined is not an objetct (evaluating 'this._carousel') when running a function with onSnapToItem.

<Carousel
    ref={(carousel) => { this._carousel = carousel; }}
    onSnapToItem={this.updateIndex}
>
</Carousel>

Function:

  updateIndex(){
    Store.updateIndex(this._carousel.currentIndex)
  }

[bd-arc]

@itswaze Did you make sure to bind this in your constructor? Something along those lines:

    constructor (props) {
        super(props);
        this.updateIndex = this.updateIndex.bind(this);
    }

[andreecosta]

Still didn't work...

[bd-arc]

@itswaze I tried that myself and didn't have any issue. Could you please share the entire source code for your component?

[andreecosta]

Sure :)

Here is the relevant code: https://paste.ofcode.org/saNEHcfuwE2DKyQg49YaWy

What I want, is that when I press the X to go back, the swiper on previous page should show the last image I saw on the carousel.
Maybe I'm doing something wrong?

For example:

The last image I viewed on the carousel before closing was this one: http://i.imgur.com/rsnzLdB.png
When I go back I want the swiper to show this image: http://i.imgur.com/4E0fXRl.png

[bd-arc]

@itswaze I totally get what you're trying to achieve, and I don't see anything wrong with your code...

Maybe the first call to updateIndex is triggered too soon because of firstItem? What if you guard against it this way?

updateIndex () {
    if (this._carousel) {
        Store.updateIndex(this._carousel.currentIndex);
    }
}

[andreecosta]

Still nothing :( I'll keep trying to find out why is not working... Since it works for you it's not a problem of this library, so you can close the issue :)

Thank you!

[bd-arc]

I haven't ruled out the possibility that it might come from the plugin, so I'll keep the issue opened for now ;-)

Can you try to import the relevant code step by step in the provided example? It might help figuring out what's going on.

[ali-sao]

I am facing the same issue , I tried all your suggestions with no luck

[bd-arc]

Hi @ali-sao,

If you can provide me with a simple example that reproduces the issue, I will gladly take a look at it. Since I can't reproduce it on my own, it might have something to do with how the data is handled, which is why I need a test case ;-)

Is the provided example working for you? Also, have you tried the flatlist branch?

[ali-sao]

Hey @bd-arc and thanks for replying back ,

While I was trying to copy-paste the code to you , and for some weird reason , the error disappeared. and the pagination is working perfectly now , thank you.

[bd-arc]

@ali-sao Good to know you've solved it, even though you and I would both appreciate to know how :-)

[ali-sao]

Indeed , I will dig deep today to know why and how so this thread will be guide full for anyone with the same problem .

Thanks again

[ReangeloJ]

Did you ever figure out what the issue was? I get the same problem.
My code is

_renderItem ({item, index}) {

    return (
        <TouchableOpacity onPress={() => this._carousel.snapToNext() }
        ><CircleList> </CircleList></TouchableOpacity>
    );
}

ref={(c) => { this._carousel = c; }}
data={this.state.data}
sliderWidth={sliderWidth}
itemWidth={sliderWidth / 2}
enableSnap={false}
itemHeight={itemHeight / 3}
windowSize={1}
renderItem={this._renderItem}

                />

[jwan3453]

@hesusdios , simply change the _renderItem to arrow function like _renderItem = ({item, index}) => {} will solve the problem, or renderItem={this._renderItem.bind(this)}.

[ReangeloJ]

Thanks I will try it out

[CarlosMayoralMX]

@hesusdios , simply change the _renderItem to arrow function like _renderItem = ({item, index}) => {} will solve the problem, or renderItem={this._renderItem.bind(this)}.

Actually after many tries this solution worked for me.Thanks

[venkataluri]

Hi,

App is crashing with message 'carouselRef .getPositionIndex is not a function' when clicking on pagination dots

`const CarouselPage = ({navigation, ...props}) => {
const [activePage, setActivePage] = useState(0);
useEffect( () => { console.log(' active page : ', activePage) }, [activePage] );

let carouselRef = useRef(); // createRef()

    return(
       <Carousel
          ref={(c) => {carouselRef = c}}
            sliderWidth={screenWidth}
            sliderHeight={screenWidth}
            itemWidth={screenWidth}
            data={entries}
            renderItem={_renderItem}
            onSnapToItem={(index) => { setActivePage(index) }}
        />

        <Pagination
          dotsLength={entries.length}
          activeDotIndex={activePage}
          containerStyle={{ backgroundColor: 'rgba(0, 0, 0.6, 0.5)' }}
          dotStyle={{
              width: 10,
              height: 10,
              borderRadius: 5,
              marginHorizontal: 8,
              backgroundColor: 'rgba(255, 255, 255, 0.92)'
          }}
          inactiveDotStyle={{
              // Define styles for inactive dots here
          }}
          inactiveDotOpacity={0.4}
          inactiveDotScale={0.6}
          tappableDots={true}
          tappableDots={ !!carouselRef }
          carouselRef={ carouselRef }
        />
    );

};
`
can anyone help me in fixing this issue