InitialPage not working, and there is no setPage method on Gallery to set initial page by hand.

[jaggerwang]

Enviroment

iOS RN 0.32

Code

/**
 * Zai Qiu Chang App
 * https://www.zaiqiuchang.com/
 */

import React, {Component} from 'react';
import {StyleSheet, View, Text, Dimensions} from 'react-native';
import {Actions} from 'react-native-router-flux';
import Image from 'react-native-transformable-image';
import Gallery from 'react-native-gallery';

import {COLOR} from '../../config';
import * as components from '../';
import * as helpers from '../helpers';

export default class Album extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    let {sceneKey, setSceneState} = this.props;
    let {imageUris, currentIndex=0} = this.props;
    setSceneState(sceneKey, {imageUris, currentIndex});
  }

  render() {
    let {sceneKey, loading, processing, error, sceneState, setSceneState} = this.props;
    let {hideNavBar, removeImage} = this.props;
    let {imageUris, currentIndex} = sceneState[sceneKey];
    return (
      <components.LayoutFull
        sceneKey={sceneKey}
        loading={loading}
        processing={processing}
        error={error}
        hideStatusBar={hideNavBar}
      >
        <Gallery
          style={styles.gallery}
          images={imageUris.map(value => helpers.imageUri(value, 'huge'))}
          initialPage={currentIndex}
          pageMargin={5}
          onPageSelected={index => setSceneState(sceneKey, {currentIndex: index})}
          onSingleTapConfirmed={() => Actions.refresh({hideNavBar: !hideNavBar})}
          onGalleryStateChanged={(idle) => {
            if (!idle) {
              Actions.refresh({hideNavBar: true});
            }
          }}
        />
      </components.LayoutFull>
    );
  }
}

let {width, height} = Dimensions.get('window');

const styles = StyleSheet.create({
  gallery: {
    flex: 1,
    backgroundColor: 'black',
  },
  image: {
    width: width,
    height: height,
  }
});

[msageryd]

I have the same problem. Tried to debug this.. Not sure of how to solve it though.

The problem is in react-native-view-pager. initialPage is set correctly at first, but when the page is validated in scrollToPage() via this.validPage() it gets reset to 0 because at that stage there are no pages (this.pageCount == 0). validPage protects against this and resets currentPage to 0.

The pageCount is initialized at render(), which is too late when one wants to set initialPage. I'd like to move dataSource cloning and pageCount updating to componentWillReceiveProps(). But there seems to be need for width and height before dataSource cloning. These are not achieved until onLayout, which is before WillReceiveProps. I'm not sure why height and width are needed before cloning the datasource..

As a workaround for now I have actually remarked the call to validPage(). I'll have to make sure that initialPage < number of pages, as there is no protection for this now.

Not-very-nice-workaround, remark row 248: https://github.com/ldn0x7dc/react-native-view-pager/blob/master/library/ViewPager.js#L248

[msageryd]

Here is a little better work around: https://github.com/ldn0x7dc/react-native-view-pager/issues/4