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

After upgrading to Expo SDK 41 which uses reanimated 2, the animatedLine just jump from the top to bottom instead of slowly moving #280

Open
anhvu100 opened this issue May 28, 2021 · 0 comments

Comments

@anhvu100
Copy link

anhvu100 commented May 28, 2021

Describe the bug
Run a basic sample with Reanimated 2 in Expo SDK 41, the animatedLine is shown at top and bottom only. Nothing is shown in the intermediated position.

To Reproduce
Steps to reproduce the behavior:

  1. Create a simple app with Expo SDK 40 and the animatedLine works fine
  2. Upgrade to Expo SDK 41, which uses reanimated 2. The animatedLine is shown at the top and bottom only.

Expected behavior
The animatedLine should move down slowly the top to bottom and then move up.

This issue happen on both iOS and Android.

The workaround is creating a custom RunTimingFn function and use EasingNode:

const myRunTimingFn = (clock, value, destination, duration) => {
const timingState = {
finished: new Value(0),
position: new Value(value),
time: new Value(0),
frameTime: new Value(0),
};

const timingConfig = {
    duration,
    toValue: new Value(destination),
    easing: EasingNode.inOut(EasingNode.ease),
};

return block([
    startClock(clock),
    timing(clock, timingState, timingConfig),
    cond(timingState.finished, [
        set(timingState.finished, 0),
        set(timingState.time, 0),
        set(timingState.frameTime, 0),
        set(timingState.position, cond(eq(timingState.position, destination), destination, value)),
        set(timingConfig.toValue, cond(eq(timingState.position, destination), value, destination)),
    ]),
    timingState.position,
]);

};

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

1 participant