initialPage not working

[msageryd]

I think that the datasource cloning needs to move into componentWillReceiveProps so this.pageCount will be updated before the first scrollToPage-call.

But it seems that height and width are needed before cloning (why?). Width and height are achieved at onLayout() which I believe happens after receiveProps.

Here is the problem:
https://github.com/ldn0x7dc/react-native-view-pager/blob/master/library/ViewPager.js#L248

validPage() resets page to 0 because pageCount is 0 at this stage.

This problem affects Gallery as well:
ldn0x7dc/react-native-gallery#18

[msageryd]

Here is a simple workaround:

componentWillReceiveProps(nextProps) {
  this.pageCount = nextProps.pageDataArray.length;    
}

I still think that it would be better to do the datasource cloning in componentWillReceiveProps instead of doing it in render(). I tried to move it and it worked if I also removed the creation of a new dataSource in onLayout(). Why do you need a new datasource if layout changes?

[ksti]

@MichaelSWE this is the exactly the problem I came across. This is the PR to resolve it

[msageryd]

Great, thank you @ksti.
It would be great to pull a new version from npm instead of hacking in a fork. Hopefully your PR gets accepted. Otherwise I'll continue with a fork.

[mjebrini]

I still get this issue, to solve it ... i have done the following:

I added the initialListSize property to the ListView in the render method

<ListView
          style={{flex: 1}}
          ref='innerListView'
          initialListSize={initialListSize}
          scrollEnabled={false}
          horizontal={true}
          enableEmptySections={true}
          dataSource={dataSource}
          renderRow={this.renderRow.bind(this)}
          onLayout={this.onLayout.bind(this)}
        />

In the same render method i adjusted the render as following:

let dataSource = this.state.dataSource;
    let initialListSize = 20;
    if (this.state.width && this.state.height) {
      let list = this.props.pageDataArray;
      if (!list) {
        list = [];
      }
      dataSource = dataSource.cloneWithRows(list);
      this.pageCount = list.length;
      initialListSize  = list.length;
    }

This will make sure the size of list view is is always similar to the number of pages. and avoid render errors.

[gezichenshan]

@ksti good solution ! The same as yours @mjebrini .

[slorber]

I don't know if this is related to this issue, but on react-native-gallery when I set initialPage=13, it seems it actually displatys the 11th image. Up to the 11th image initialPage works fine, then it seems any page higher than 11 displays the 11th image(/page).

[budiga]

@slorber how did you solve the problem?I'm confused with this for serveral days! Any ideals?

[slorber]

@budiga unfortunatly I did not solve it yet but will certainly have to look for a solution soon. Please share if you find a solution (or alternative lib to use)

[budiga]

@slorber thank you for your reply.I'm new for the react native.I hope you can share your solution if you find it.Thanks again.

[ksti]

@slorber @budiga
ListView has a prop: initialListSize

you can try it? Maybe we need to export a prop listViewProps.

also you can move to @mjebrini 's answer #4 (comment)

[budiga]

@ksti ok, I will give it a try later.I find when I swipper over 12 images,the error will appears.

[budiga]

@ksti thank you. initialListSize solved my problem.@slorber you can try this:
in the ViewPager.js line 129,you can add a prop:initialListSize={this.props.pageDataArray.length}.
It may be work for you.

[gameboyVito]

Any updated?

[slorber]

I'm going to test that workaroud asap when i get back to my app. Will have to check if it's possible because i'm using image gallery, not this project directly

[gameboyVito]

I am also using the Gallery. And, I have tried if you set the initialListSize to the length of your assets, app will run out of memory when you are trying to display hundreds or thousands of images.

[gameboyVito]

I think the best solution is to replace the ListView with FlatList, and use the ScrollToIndex api to navigate to the exact item. However, it might be a huge code refactoring.

[slorber]

For my usecase it's max 30 images so it may work fine

@gameboyVito I tested this and it does not work for me, is it what you suggested?

I don't think initialListSize is forwarded to the ListView

          <Gallery
            style={{ flex: 1, backgroundColor: 'black' }}
            initialPage={initialPage}
            initialListSize={urls.length}
            images={urls}
          />

[gameboyVito]

If you take a look at the source code of Gallery, you will find out the initialListSize isn't exposed to the ListView of ViewPager. That's why you need to modify the source code:

in the ViewPager.js line 129,you can add a prop:initialListSize={this.props.pageDataArray.length}.
It may be work for you.

Like @budiga said.

[slorber]

Thanks it seems to work when modifying the sources.

I've made a PR #9

[chrusart]

If we move to FlatList, there is something similar wrong in setting initial pasition/page/item as well.

Check at:
facebook/react-native#15634

If we scroll to some item without animation that is outside initial windowSize it's not rendered.
The same is here if we don't use removeClippedSubviews for ListView in ViewPager, we got empty item, after touch, small scroll it appears.
And the if that works (number of pages < 12 or initialListSize set for ListView), we have this issue here. Internally we change the page by scrolling Scroller without animation (immediate parameter probably false) and then items/pages are not rendered of some reason by underlying react-native/native code.