RenderIndicator as shown example returning error

[MrEdinLaw]

I tried this:

              <ImageViewer
                    renderIndicator={(currentIndex, allSize) => currentIndex + "-" + allSize}
                    imageUrls={ALI.getAuctionMainImages()}
                    style={styles.auctionImageViewerPortrait}
                    onChange={(index) => this.onMove(index)}
                    index={this.state.imageViewerIndex}
                    backgroundColor={"white"} // TODO Link background color to styles
                />

and this line keeps giving me an error: renderIndicator={(currentIndex, allSize) => currentIndex + "-" + allSize}

The error is: Invariant Violation: Text strings must be rendered within a component.

[MrEdinLaw]

I tried it now with this line:

renderIndicator={(currentIndex, allSize) => <Text>{currentIndex} / {allSize}</Text>}

I don't get the error anymore but it does not render/show.

[aajahid]

@MrEdinLaw - I just had a similar issue. But then I applied zIndex style to my indicator component. I believe when you pass your custom component - you need to handle the zIndex of it aswell. Ex -

renderIndicator = {
  (currentIndex, allSize) => {
    return (
             <View style={{position: "absolute", zIndex: 9999}}>
               <Text style={{fontSize: 50, color: "#000"}}>{currentIndex} / {allSize}</Text>
             </View>);
    }
}