the dots were not changing when using map to display data

Hi I am using your module and I wrote like this :

          <Swiper index={this.state.index} style={styles.swipe} autoplay={false} horizontal={true}
            dotColor="transparent"
            activeDotColor="transparent"
            onIndexChanged={(index) => {
              alert("hi")
              this.setState({
                index: index,
              })
            }}>
            {swiperList.map((res,i)=>{
              let durationMinutes = res.duration / 60
              let durationText
              if (durationMinutes < 1) {
                durationText = res.duration + ' sec'
              } else if (isNaN(durationMinutes)) {
                durationText = ''
              } else {
                durationText = durationMinutes + ' min'
              }
              return(
                <View style={styles.swiperView}>
                  <View style={styles.addRoutineMainCardViewMainMorning}>
                    <Thumbnail large source={{uri : 'https:'+res.backgroundImage.file.url , cache: 'force-cache'}} style={styles.routineCreatedCardlogoimage} />
                    <Thumbnail source={Images.createroutinetimeButton['morning']} style={styles.routineCreatedCardOverlayimage} />
                  </View>
                  <Text style={styles.swiperText}>{res.title}</Text>
                  <Text style={styles.swipertimetext}>{durationText}</Text>
                </View>
              )
            }
            )}
          </Swiper>

here when I swiper the onIndexChanged is not at all calling And I did not use lopp but my data is showing twice Can you tell me how to fix this…

[frankiewonghk]

I got the same issue and I solved it by the following code:

`class Slider extends Component{ componentWillMount(){ this.props.getSliderThunk(); }

render(){ 
    if(this.props.slider.length == 0){
        return(
        <View><Text>Loading...</Text></View>
        )
    }
    else{
        return(
            <View style={styles.container}>
                <Swiper style={styles.wrapper} loop={true}>
                { 
                    this.props.slider.map((item, key) => {
                        return (
                            <View key = { key } style = { styles.slide }>                             
                            <Image style={styles.slide_image} source = {{ uri: item.image }}/>
                            </View>
                        )
                    })
                }
                </Swiper>
            </View>
        );
    }
    
}

}`

[Tennen]

@bacancy-swaroopa loop is true by default, I think you are trying to render swiperList from http request, this is a bug, you cant change the number of children from <= 1 to > 1, otherwise onIndexChanged would never be triggered until next onLayout(). A simple way to solve this problem is to set a default array to swiperList, which length should be larger than 1. if this cant solve your problem, you may try the way in my fork.