question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animate on callback

See original GitHub issue

I am playing around with this package and I came with an issue that animations do not get started on callback.

I think I am doing this wrong entirely, but here’s the idea of what I am trying to achieve and I am seeking for help or ideas how to solve this.

I have n number of points along y axis. I get them by measuring views with .measure function provided by react-native. When my draggable box gets dragged to some dropzone I want it to snap to the center of that dropzone.

code for my y translation

  this._transY = cond(
     eq(this.state, State.ACTIVE),
     [
       set(this.transY, addY),
       set(this.prevDragY, this.dragY),
       this.transY
     ],
     [
       cond(eq(this.state, State.END), call([addX, absY], this.onDrop)),
       set(this.prevDragY, 0),
       this.transY
     ]
   );

my onDrop callback

 onDrop([x, y]) {
    let id = null;
   // just identifying on which dropzone draggable was dropped
    for(let i = 0; i < this.props.dropzones.length; i++) {
      let item = this.props.dropzones[i];
      if( y < item.yPage+item.height && y > item.yPage) {
        id = i;
        break;
      }
    }

   if(id !== null) {
    console.log(this.props.dropzones[id]);
  // this if gets called
  // I identify my dropzone correctly and I have correct coordinates for it here
  // but this block never gets executed and my draggable never animates
    this._transY = block(
    [
      debug('active', this._transY), 
       //these sets might not be correct, please don't mind them
      set(this.transY, add(this.transY, sub(this.props.dropzones[id].yPage, add(this.prevDragY, this.dragY)))),
      set(this.prevDragY, add(this.transY, sub(this.props.dropzones[id].yPage, add(this.prevDragY, this.dragY)))),
      this.transY,
    ]);
   }
  }

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
Kida007commented, Apr 8, 2019

Thanks for the quick reply .

Actually this.modal was undefined , cause runSpring was already defined out of the class ( my bad).

Your suggestion above worked , prior to this : I was not using the declarative power of the react-native-reanimated. so thanks again.

and also you are right about Interpolation , That is the correct way.

0reactions
nstfkccommented, Apr 8, 2019

@Kida007 No problem, my pleasure.

Read more comments on GitHub >

github_iconTop Results From Across the Web

.animate() | jQuery API Documentation
Animate all paragraphs and execute a callback function when the animation is complete. The first argument is an object of CSS properties, the...
Read more >
jquery - animate's callback function (complete) executed at start?
I get both alerts before the animation starts!? I want the complete function to start after the animation has ended. Any thoughts?
Read more >
withAnimation completion callback with animatable modifiers
A custom AnimatableModifier implementation allows us to get a callback once an animation of a specific property completes. This is in most cases ......
Read more >
Window.requestAnimationFrame() - Web APIs | MDN
The function to call when it's time to update your animation for the next repaint. The callback function is passed one single argument,...
Read more >
#12: Callback Functions | CSS-Tricks - CSS-Tricks
They are typically an additional parameter that we pass to the method. In the case of animation, we pass a function as the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found