Add hook on componentDidMount to `scrollToIndex`

[bobmulder]

Fix for #9, proposed at #10

[zachgibson]

Awesome! Thanks man. 👍

[bobmulder]

👍

[bobmulder]

@zachgibson are you able to push a new release?

[zachgibson]

Yeah I published to npm already.

[gabgagnon]

Damn, i'm having a hard time with this. Can you give me an example to make it work? I have the same visual problem than the #9. Here is my code :

class PrlxSwiper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {scrollToIndex:1,prlxSwiperRef:null};
  }
  myCustomAnimatedValue = new Animated.Value(0);
  render() {
    console.log("PrxSwiper");
    return (
    <ParallaxSwiper
      ref ={(psref) => {if(this.state.prlxSwiperRef == null){this.setState({prlxSwiperRef:psref});}}}
      scrollToIndex = {this.state.scrollToIndex}
      speed={0.60}
      animatedValue={this.myCustomAnimatedValue}
      dividerWidth={8}
      dividerColor='rgb(0, 132, 153)'
      backgroundColor="red"
      showsHorizontalScrollIndicator={false}
      showProgressBar={false}
      onMomentumScrollEnd={(index)=>{
        if(this.state.scrollToIndex != index){
          this.setState({scrollToIndex:index});
        }
      }}
    >
      {Stacks.map((stack, index) => (
        this.StackPageRendering(stack.key, index)))}
    </ParallaxSwiper>
    );
  }

Im a beginner in React-Native so yeah... thanks you!

[zachgibson]

@gabgagnon What are you trying to do?

[gabgagnon]

I am trying to make the initial index of the parralax Swiper at index 1 instead of 0, but it result to a glitchy view where I only see half of the image. I tried it with the example of the project and the same bug happen. If you can show me an example with the initial scrollToIndex at 1, it would be fantastic!!

[gabgagnon]

@zachgibson So, I found a quick solution. :)

I added

componentDidUpdate() {
    const { scrollToIndex } = this.props;
    if (scrollToIndex) {
      setTimeout(() => {
        this.scrollToIndex(scrollToIndex, true);
      });
    }
  }

inside ParallaxSwiper.js. I know that this is not the best for some people because it demande a double-rendering when the application starts and the Swiper will always go to the current Index but in my case, it solved the problem. Thanks again for your wonderfull swiper. :)