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:
- Create a simple app with Expo SDK 40 and the animatedLine works fine
- 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,
]);
};
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:
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),
};
};