React-native-swiper: the dots were not changing when using map to display data

[bacancy-swaroopa]

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..

[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.

[bacancy-swaroopa]

Hi
The swiper list arrray is of length 2
and the dots were not displaying corectly when I swipe

[kevindavee]

I got the same problem too. The dots were not moving while i'm swiping the pages. I also map the page from an array.

Please help. Thanks

[kevindavee]

renderSlides() {
        if(this.state.fetching) {
            this.fetchData()
        }

        const {slides} = this.state

        return(
            <Swiper style={[styles.wrapper]} showsButtons={false} loop={false}>
                {slides.map((slide, index) => {
                    return(
                        <View style={styles.slide1}>
                            <Text style={styles.titleText}>{slide.title}</Text>
                            <Text style={styles.descriptionText}>{slide.content}</Text>
                            <Image source={{ uri: slide.image }} style={{ width: IMAGE_WIDTH, height: IMAGE_HEIGHT }}/>
                        </View>
                    )
                })}
            </Swiper> 
        )
    }

    render() {
        return(
            <View style={{flex:1}}>    
                 {this.renderSlides()} 
            </View>
        )
    }

The above is my code

[controversialUser]

i had the same issue and solved it after seeing this post https://github.com/leecade/react-native-swiper/issues/635

[kevindavee]

I already solve my code issue. I remove the style tag from swiper and it works. I hope @bacancy-swaroopa can try and get the expected result as well.

Thanks !

[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>
        );
    }

}

}`

[demogar]

@frankiewonghk thanks man, this gave me an idea.

[andresihombing]

@frankiewonghk thanks bro, this is solve to me