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?