Ad

How To Fix "incorrect Index For Active Page Indicator Style" In React Native Carousel Banner

- 1 answer

I used library react-native-banner-carousel downloaded from npm : https://www.npmjs.com/package/react-native-banner-carousel

Unfortunately I have an issue with initial run : incorrect active page indicator for example : image at index 0 , the indicator should be at index 0 , unfortunately the indicator at index 3, here is my code :

  <View style={ {flex: 1,paddingTop: 20 }}>
                        <Carousel autoplay={true} autoplayTimeout={1000} loop={true} index={0} pageSize={BannerWidth} activePageIndicatorStyle={{backgroundColor: '#fff' , direction: 'rtl'}} pageIndicatorContainerStyle={{direction: 'rtl' }} >
                        {this.state.carouselData.map((ad_info, index) => this.renderPage(ad_info, index))}
                          </Carousel>
                                       </View>

the render page function is :

renderPage(ad_info, index) {
  console.log("Ghadeer index", index , "::" , ad_info.ad_Title)
  var base64Icon = 'data:image/png;base64,'+ ad_info.ad_Banner;
      return (
          <TouchableOpacity transparent style={{width:BannerWidth,height:130, zIndex: 2}} transparent
                  onPress={() => this.openWebView(ad_info)}>
                  <Image
                  style={{width:BannerWidth , height: 130 , justifyContent: 'center', alignItems: 'center'}}
                       source={{uri: base64Icon}}
                  />
              </TouchableOpacity>
      );
  }

Expected Behavior : enter image description here

Current Behavior on first load : enter image description here

Ad

Answer

The issue was with downloading images from server . I fixed it by : initialize the carousel after finish downloading from server , below is my code :

{this.state.finishDownloadAdsImageFromServer ? (<View style={styles.carouselContainer}>
                        <Carousel
                                    autoplay
                                    autoplayTimeout={1000}
                                    loop
                                    index={0}
                                    pageSize={BannerWidth}
                                    activePageIndicatorStyle={{backgroundColor: '#fff' }}
                                >
                        {this.state.carouselData.map((ad_info, index) => this.renderPage(ad_info, index))}
                          </Carousel>
                                       </View>) :  <View/>}

Thanks,

Ad
source: stackoverflow.com
Ad