Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support dynamic content inside each page #139

Open
jamesqo opened this issue May 10, 2018 · 2 comments
Open

Support dynamic content inside each page #139

jamesqo opened this issue May 10, 2018 · 2 comments

Comments

@jamesqo
Copy link

jamesqo commented May 10, 2018

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

ohasy commented Jul 7, 2018

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 !

@hasnabbas
Copy link

hasnabbas commented Jan 4, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants