Skip to content

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

@anhvu100

Description

@anhvu100

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,
]);

};

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions