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

Fix transitions aborting on repeated style values #257

Open
wants to merge 18 commits into
base: master
Choose a base branch
from

Conversation

solidfox
Copy link

@solidfox solidfox commented Mar 6, 2019

Before this fix the following could happen:

  1. Button receives props
    {
    otherProp: valA
    style: {translateY: 50}
    }
  2. Transition starts to translate button to 50.
  3. While transition is happening Button receives the following props
    {
    otherProp: valB
    style: {translateY: 50}
    }
  4. Transition is aborted and Button "jerks" to the target state of the transition.

This update makes react-native-animatable ignore repeated style props and only start transitions when new values are received.

Before this fix the following could happen:

1. Button receives props 
{
  otherProp: valA
  style: {translateY: 50}
}
2. Transition starts to translate button to 50.
3. While transition is happening Button receives the following props
{
  otherProp: valB
  style: {translateY: 50}
}
4. Transition is aborted and Button "jerks" to the target state of the transition.

This update makes react-native-animatable ignore repeated style props and only start transitions when new values are received.
Copy link
Author

@solidfox solidfox left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pleased Travis who complained for good reasons

@solidfox
Copy link
Author

solidfox commented Mar 7, 2019

I'm not fully content with this fix. While it's sensible to only start transitions for changed styles transitions will still jerk if new style props are received while a transition is running. E.g:

  1. translation 50 prop received
  2. starts transition
  3. translation 90 prop received
  4. aborts previous transition and starts transition from 50 to 90, causing the element to jerk to 50

This does not happen with a normal Animation.Value which would just update the running transition to animate to 90 from whatever position it's currently in.

Copy and paste error in needsInterpolation check
@solidfox
Copy link
Author

solidfox commented Mar 7, 2019

Fixed the above for animations not using interpolation. Still exists in those that do.

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

Successfully merging this pull request may close these issues.

None yet

6 participants