No Animation When Index Is Controlled By Parent

[helsonxiao]

Animation works

<Modal visible={true} transparent={true}>
  <ImageViewer imageUrls={images} />
</Modal>

Animation doesn't work

<Modal visible={true} transparent={true}>
  <ImageViewer imageUrls={images} index={index} onChange={onChange} />
</Modal>

Workaround

  public componentDidUpdate(prevProps: Props, prevState: State) {
    if (prevProps.index !== this.props.index) {
      this.loadImage(this.props.index || 0);

      this.jumpToCurrentImage({ animated: true });
    }
  }

  public jumpToCurrentImage(params?: IJumpParams) {
    const _params = {
      animated: false,
      ...params,
    };

    this.positionXNumber =
      this.width *
      (this.state.currentShowIndex || 0) *
      (I18nManager.isRTL ? 1 : -1);
    this.standardPositionX = this.positionXNumber;
    if (!_params.animated) {
      this.positionX.setValue(this.positionXNumber);
      return;
    }
    Animated.timing(this.positionX, {
      toValue: this.positionXNumber,
      easing: Easing.linear,
      duration: this.props.pageAnimateTime,
      useNativeDriver: !!this.props.useNativeDriver,
    }).start();
  }

[helsonxiao]

If this workaround is acceptable, I will pull a request in this weekend.

[karanjhinga]

Any update on this issue ?

[co2nut]

hi,

I had the same issue too.

But when I change my onChange not to modify the index then it solved the issue.

[bneigher]

looking forward to this PR!

[helsonxiao]

This repo is not active for some time.

How to fix it?

1. Copy all source codes into your project with my workaround(must be a project using typescript)
2. Fork this repo and republish your own version