From 63a6565afa737fa5e1b2ade39157fc75ae574afe Mon Sep 17 00:00:00 2001 From: Andrej Badin Date: Mon, 5 Feb 2018 19:42:45 +0100 Subject: [PATCH] Fix incorrect easing functions for CardStack (#3381) * Fix invalid easing functions for CardStack 1. `timing` function accepts `TimingAnimationConfig` which expect `easing` (or dont expect at all) function with following signature: `(value: number) => number` 2. under the hood, `TimingAnimation` falls back to `easeInOut` function, if `easing` is not specified `this._easing = config.easing !== undefined ? config.easing : easeInOut();` 3. by mistake passing `Easing.linear()` results in following `typeof Easing.linear(); // undefined` which makes statement in step 2 fall back to `easeInOut` This commit makes passing `easeInOut` function explicit and fixes existing issue and several Flow warnings * Do not memoize easing function, keep things simple --- src/views/CardStack/CardStack.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/views/CardStack/CardStack.js b/src/views/CardStack/CardStack.js index a1f0282..a6e586b 100644 --- a/src/views/CardStack/CardStack.js +++ b/src/views/CardStack/CardStack.js @@ -22,6 +22,8 @@ import TransitionConfigs from './TransitionConfigs'; const emptyFunction = () => {}; +const EaseInOut = Easing.inOut(Easing.ease); + /** * The max duration of the card animation in milliseconds after released gesture. * The actual duration should be always less then that because the rest distance @@ -160,7 +162,7 @@ class CardStack extends React.Component { Animated.timing(this.props.position, { toValue: resetToIndex, duration, - easing: Easing.linear(), + easing: EaseInOut, useNativeDriver: this.props.position.__isNative, }).start(); } @@ -176,7 +178,7 @@ class CardStack extends React.Component { Animated.timing(position, { toValue, duration, - easing: Easing.linear(), + easing: EaseInOut, useNativeDriver: position.__isNative, }).start(() => { this._immediateIndex = null;