active dot not working when item is dynamic

[keung7252]

Which OS ? Iphone

Version

Which versions are you using:

• react-native-slick v? 1.0.2
• react-native v0.?.? 0.58.1

Expected behaviour

active dot must change when I change the page

Actual behaviour

active dot keep in first

<Slick height={'100%'} showsPagination={true} loop={true} activeDotStyle={{backgroundColor: '#000000', width: 13, height: 13, borderRadius: 13/2, overflow: 'hidden'}} dot={ <View style={{backgroundColor: '#bfbfbf', width: 13, height: 13, borderRadius: 13/2, overflow: 'hidden', marginLeft: 5, marginRight: 5}} /> } paginationStyle={{ top: -500, }} showsButtons={false}> { this.state.news.map((item)=> { return ( <View style={{width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center'}}> <Image source={{uri: item.img_en}} style={{ width: 371, height: 576}} resizeMode={'contain'} /> </View> ) }) } </Slick>

[bberrio22]

I have the same issue with the slick, the dots are not changing when the slide changes.

VERSION

• "react-native-slick": "^1.0.2",
• Using expo SDK 35 and React native 0.59

<Slick style={Platform.OS === 'android' ? styles.slickAndroidStyle : styles.slickIosStyle}
                  autoplay={true}
                  loop={true}
                  index={this.state.index}
                  onTouchEnd={this._onMomentumScrollEnd.bind(this)}
                  autoplayTimeout={5}>
                  {this.state.sliderImages !== undefined &&
                    this.state.sliderImages.map((element, id) => {
                      return (
                          <Image style={styles.slickImageStyle} source={{ uri: element }} key={id} />

                      );
                    })
                  }
                </Slick>

[bberrio22]

I solved the issue like this, you need to render the Slick when you get results, I suppose that that way the Slick will know how many items you have. @keung7252

   {this.state.sliderImages !== undefined && this.state.sliderImages.length > 0 &&
                <Slick style={Platform.OS === 'android' ? styles.slickAndroidStyle : styles.slickIosStyle}
                autoplay={true}
                autoplayTimeout={5}
                total={this.state.sliderImages.length}>
                    {this.state.sliderImages.map((element, id) => {
                      return (
                        <Image style={styles.slickImageStyle} source={{ uri: element }} key={id} />
                      );
                    })
                  }
                </Slick>
              }