zbtang/React-Native-ViewPager

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.

ohasy commented

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?