How to Get Current index on every slide movement.

[Nitesh]

How to Get Current index on every slide movement. I have used below method but sometime it's crashing automatically.

swiperRef.current.getActiveIndex();

TypeError: null is not an object (evaluating 'swiperRef.current.getActiveIndex')

On each slide I want to get the index number.

Also not able to run the example code using Xcode Getting below error "Library not found for -lDoubleConversion"

Please help me to resolve this.

[Ruslan Baybekov]

We have two ways to get activeIndex:

1. on swiper index changed

import React from 'react';
import { View } from 'react-native';
import Swiper from 'react-native-web-swiper';

export default () => (
  <Swiper onIndexChanged={newIndex => console.log(newIndex)/* or set to state */}>
    <View /> {/* Slide 1 */}
    <View /> {/* Slide 2 */}
    <View /> {/* Slide 3 */}
  </Swiper>
);

2. by ref

import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import Swiper from 'react-native-web-swiper';

export default () => {
  const swiperRef = useRef(null);

  return (
    <>
      <Swiper ref={swiperRef}> {/* Now swiper instance stored in swiperRef.current */}
        <View /> {/* Slide 1 */}
        <View /> {/* Slide 2 */}
        <View /> {/* Slide 3 */}
      </Swiper>
      {/* Before getting active index make sure that swiperRef.current already has been stored in swiperRef.current */}
      <Button title="Get swiper index" onPress={() => swiperRef.current && console.log(swiperRef.current.getActiveIndex())} />
    </>
  );
};

3. About ios:

"Library not found for -lDoubleConversion"

It's not a Swiper issue in any case. Did you install required pods for your RN app? See docs.

[Nitesh]

Thank you for your quick reply.

1. It's working perfectly fine.
2. Yes I have used that in same way you suggested not able to understand this line {/* Before getting active index make sure that swiperRef.current already has been stored in swiperRef.current */}
3. Yes I have install the the required things in my RN app.

Also I have few more question can we change the Next Button , Previous button and Dot buttons style in terms of height and width, color n all.

<Swiper
                        ref={swiperRef}
                        controlsProps={{
                            dotProps: styles.dotStyles,
                            nextTitle: '>',
                            prevTitle: '<',
                            nextTitleStyle: styles.buttonStyles,
                            prevTitleStyle: styles.buttonStyles,
                        }}
                        onIndexChanged={newIndex => console.log(newIndex)/* or set to state */}
                    >

 buttonStyles: {
        color: '#ffffff',
        fontSize: 24,
        fontWeight: '500',
        width: 20,
        height: 40
    }, 
 dotStyles: {
        width: 20,
        height: 20,
        // borderRadius: 20 / 2,
        backgroundColor: '#ffffff',
    }

But it's not changing any width, height of the component. Also on selection I want to change the dot color.

Thank you in Advance.

[Ruslan Baybekov]

I have no time for checking styles, @reactrondev please join this task

2. Yes I have used that in same way you suggested not able to understand this line {/* Before getting active index make sure that swiperRef.current already has been stored in swiperRef.current */}

swiperRef.current is null initially, before first render. It will be assigned after <Swiper ref={swiperRef}> will be parsed. So swiperRef.current.getActiveIndex() may cause error if called before first render. And you must check swiperRef.current is not null before call getActiveIndex():

swiperRef.current && swiperRef.current.getActiveIndex()
// getActiveIndex will be called ONLY IF swiperRef.current have some value (swiper instance ref)

3. Yes I have install the the required things in my RN app.

Anyway DoubleConversion is standard RN native dep and it not relevant to swiper. Did you switch your XCode project to workspace instead of pure project after pods have been installed?

[D.H. Luong]

Fixed in #57