deanmcpherson / react-native-sortable-listview

Drag drop capable wrapper of ListView for React Native
MIT License
918 stars 235 forks source link

Why do we need InteractionManager? #127

Open vuongngo opened 6 years ago

vuongngo commented 6 years ago

Hi,

Thanks for great library. I'm having issue when InteractionManager didn't fire callback because of some long running interaction that I don't control (using third party library). I'm wondering which edge cases would happen if I remove InteractionManager? From the doc, PanResponder would block long-running JS for active gesture. Would it be better to setTimeout to release PanResponder rather than waiting for previous interaction to finish?

Regards,

nihgwu commented 6 years ago

If you are using react-navigation or other navigator library, and the screen contains sortable listview transform to front in modal mode, the layout measure onLayout would be wrong as it would happen during the transition or even before that, that would lead wrong layout measure

But it's true if you don't have this kind of use case or the screen transform in card mode, there won't be such a problem and InteractionManager is unnecessary

nihgwu commented 6 years ago

For your use case, it would be better to investigate the 3rd party library as long running and blocking interaction is always wrong

vuongngo commented 6 years ago

That makes sense when interaction is viewing by user. However, when I create an animation with timer in 3s, and move to other screen which use SortableListView, I have to wrap this with AfterInteraction component to prevent dragging as list is rendered but the element is not calculated. Any thought on this behaviour?

nihgwu commented 6 years ago

It’s really easy to tackle, you can simply pause the animation when navigating using lifecycle hooks

On 8 Dec 2017, at 03:45, Vuong Ngo notifications@github.com<mailto:notifications@github.com> wrote:

That makes sense when interaction is viewing by user. However, when I create an animation with timer in 3s, and move to other screen which use SortableListView, I have to wrap this with AfterInteraction component to prevent dragging as list is rendered but the element is not calculated. Any thought on this behaviour?

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/deanmcpherson/react-native-sortable-listview/issues/127#issuecomment-350073908, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ACeY8htBfgEbVXWpOQD2nHt1Nkgko-agks5s-EBLgaJpZM4Q5WVG.

elliotfleming commented 6 years ago

In case anyone else sees this, I was able to solve the same problem by adding isInteraction: false to my looping animations. That should be all that's needed but you can also explicitly stop the animation on unmount as well to be safe.

animate() {
  this.animation = Animated.spring(
    this.state.scale,
    {
      toValue: 1.5,
      isInteraction: false,
    },
  );
  this.animation.start(() => this.animate);
}

componentWillUnmount() {
  if (this.animation) this.animation.stop();
}