zbtang/React-Native-ViewPager

How to dynamically add child view in IndicatorViewPager?

adityasonel opened this issue · 2 comments

I am trying to add dynamically child views like this,

constructor(props){
        super(props);

        this.state = {
            pageCount: 3
         }
    }

    _renderDotIndicator() {
        return <PagerDotIndicator 
                    pageCount = {this.state.pageCount}
                    dotStyle = {styles.dotStyle}
                    selectedDotStyle = {styles.selectedDotStyle} />;
    }

_renderChildView() {
        for (let index = 0; index < this.state.pageCount; index++) {
            return(
                <View>
                    <Image
                        style = {{width: undefined, height: 220}}
                        source = {require('../../res/image/ic_temp.png')} />
                </View>
            )
        }
    }

    render(){
        return(
            <View style = {styles.container} >
                
                <IndicatorViewPager
                    style={{ height: 220, overflow: 'hidden', borderTopRightRadius: 8, borderTopLeftRadius: 8 }}
                    indicator={this._renderDotIndicator()}>

                    {
                        this._renderChildView()
                    }

                </IndicatorViewPager>
                
                <View>
                    <Text style = {styles.title} >Flat 50% off on the Wallets</Text>
                    <Text style = {styles.description} >Hello Shikhar Bansal. These Leather made and hand weeved wallets from Hongkong are specially discounted for you to just 6500 Rs! Hurry up and avial the offer</Text>
                </View>
            
            </View>
        )
    }

But this method only showing single image?

@adityasonel Did you find a solution to the problem? Thank you very much in advance

The for loop always returns the first child.

Create a list of child elements separately and then return that list after the for loop.