Support dynamic content inside each page
Opened this issue · 2 comments
Hi @zbtang! I really like this library you've put together, I'm using it in an app I'm writing for my company. There is a big issue that is preventing us from using it however: each page inside the IndicatorViewPager
cannot have dynamic content. Since we just pass a raw View
for each page instead of a Component
, we can't update it at will if the state of our app changes later.
I believe this can be fixed if we just change this function: https://github.com/zbtang/React-Native-ViewPager/blob/master/viewpager/ViewPager.js#L136-L157. If the passed object is not a View
, instead of issuing a warning we can just wrap it in a View
and proceed as normal.
Hey there mate, hope you didn't gave up on it. heres the solution.
Inside your component make a function like this
renderViewPagerChildren = () => {
let viewPagerItems = [];
for (var i = 0; i < this.state.SliderList.length; i++) {
viewPagerItems.push(
<View
key={i}
style={{
width: width,
height: width * 0.5,
backgroundColor: “grey”
}}
>
<Image
style={homePageStyle.viewPagerItemImageStyle}
source={{ uri: this.state.SliderList[i].image }}
/>
</View>);
}
return (viewPagerItems)
}
and in the render method of that component where you need this ViewPager you just need to call this method in side IndicatorViewpager so it can populate its children, like this
{this.state.SliderList && this.state.SliderList.length > 0 && // just conditioning jsx
<IndicatorViewPager
style={styles.viewPageIndicatorTop}
indicator={this._renderDotIndicator()}
removeClippedSubviews={false}
horizontalScroll={true}
>
{this.renderViewPagerChildren()}
</IndicatorViewPager>
}
Hope, It helps !
@yashojha19 I am doing something similar to your code but i have over 100 screen, which is causing out of memory exception. Any idea about it?