[Need Help] Is it possible to trigger the re-render of a Virtualized component onTransitionEnd()?

[ajaypillay]

Hi, I'm looking for some help or guidance in how I should go about triggering a re-render of a Virtualized component onTransitionEnd() instead of onChangeIndex(). Currently I have set overscanSlideBefore and overscanSlideAfter to 1 each because there is quite an amount of DOM rendering currently being done within each swipeable view. What happens is that there are freezes (which I combat with an animated transition). Here's what it looks like with animations:

https://user-images.githubusercontent.com/917752/103029393-afb0ad80-4594-11eb-9f93-3043aa92e286.mp4

And here's what it looks like without an animation:

https://user-images.githubusercontent.com/917752/103029397-b0e1da80-4594-11eb-98f0-fe53eee866b9.mp4

I trimmed down what's being rendered to show what's happening and you can see the very apparent jumps in the second video due to the re-rendering, which is being triggered onChangeIndex() instead of onTransitionEnd().

  <VirtualizeSwipeableViews
    enableMouseEvents
    index={this.state.swipeIndex}
    axis={"y"}
    disabled={drag}
    springConfig={{
      duration: "0.4s",
      easeFunction: "cubic-bezier(0.37, 0, 0.63, 1)",
      delay: "0.0s"}}
    onChangeIndex={(index, indexLatest, meta) => {
      this.setSwipeIndex(index);
    }}
    slideCount={this.state.data_array.length}
    overscanSlideBefore={1}
    overscanSlideAfter={1}
    slideRenderer={(params) => {
      const { index, key } = params;
      return(<DataComponent key={key} />);
    }}
/>

Is there any way to force slideRenderer to render the next/prev slide only AFTER the transition has ended, so these freezes don't occur?