Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MapPanel buggy interpolation. HELP! #269

Closed
alisherakb opened this issue Feb 28, 2019 · 7 comments
Closed

MapPanel buggy interpolation. HELP! #269

alisherakb opened this issue Feb 28, 2019 · 7 comments

Comments

@alisherakb
Copy link

alisherakb commented Feb 28, 2019

In MapPanel interpolation inside Animated.View starts in reverse order on restart until you start to drag:

image 2019-02-28 21 30 05


Reproducing:
It may not appear instantly on this example. But if you try 10 restarts, 2-3 of them will be buggy(reverse interpolation) until you start to drag.
Making more complex animations(backgroundColor, Height, SVG paths) may decrease successful restart to 0, meaning that all your interpolations will be reversed.


Using:

animatedNativeDriver={true}

Solves the issue. But limits me on making more complex animations (backgroundColor, Height, SVG paths).


"react-native": "0.57.3"
"react-native-interactable": "^0.1.10"


Need your help guys, please!!!

@huuthinh245
Copy link

i' have issue when debug . I guess the deltaY reset to 0. Any solution pls

@huuthinh245
Copy link

did you solve it>?

@alisherakb
Copy link
Author

did you solve it>?

Nope. Still looking for a solution...

@rjruizes
Copy link

rjruizes commented Mar 22, 2019

#121 looks like the same issue, and it's from 2017

@rjruizes
Copy link

The problem is that sometimes animatedEvents are fired on init with y=0, instead of y=initialPosition.
Here's a hacky workaround:
Edit this file, modifying lines 31-39 to the below:

      this._animatedEvent = (event, gestureState) => Animated.event(
        [{
          nativeEvent: {
            x: this.props.animatedValueX,
            y: event.nativeEvent.y > 0 ? this.props.animatedValueY : null
          }
        }],
        { useNativeDriver: !!this.props.animatedNativeDriver }
      )(event, gestureState);

which checks the value of the incoming event and will only change animatedValueY if the event is not zero. For my case, I don't care about y=0.

@rjruizes
Copy link

I logged the coordinates sent by the native code (on this line) and I logged the nativeEvent coordinates received by the react-native code (my previous comment).

In successful cases, two events are sent and received, the first sets the InteractableView's center to 0,0, and the second sets the center to the requested initialPosition.

The bug occurs when two events are sent, but only one is received on the react-native side. That would be a bug with the react-native bridge.

@alisherakb
Copy link
Author

this._animatedEvent = (event, gestureState) => Animated.event(
[{
nativeEvent: {
x: this.props.animatedValueX,
y: event.nativeEvent.y > 0 ? this.props.animatedValueY : null
}
}],
{ useNativeDriver: !!this.props.animatedNativeDriver }
)(event, gestureState);

You saved my smooth project. Thank you a lot!

mahyar1386 added a commit to mahyar1386/react-native-interactable that referenced this issue Jun 25, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants