Как исправить «неверный индекс для стиля индикатора активной страницы» в баннере реагировать на собственную карусель

Question

Я использовал библиотеку react-native-banner-carousel, скачанную с npm: https://www.npmjs.com/package/react-native-banner-carousel

К сожалению, у меня проблема с начальным запуском: неправильный индикатор активной страницы, например: изображение с индексом 0, индикатор должен быть с индексом 0, к сожалению, индикатор с индексом 3, вот мой код:

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

функция отображения страницы:

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

Ожидаемое поведение:

Текущее поведение при первой нагрузке:

Answer 1

Проблема была с загрузкой изображений с сервера. Я исправил это: инициализируйте карусель после завершения загрузки с сервера, ниже мой код:

{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/>}

Спасибо,