Easing functions aren't working

[kyle-ssg]

Description

Expected behaviour

The easing functions to work.

Actual behaviour

The only easing function that appears to be working is Easing.linear. Easing.inOut(Easing.quad) and Easing.inOut(Easing.exp) crash the app, others like bezier don't animate as seen in the gif.

Easing only working for linear, easing doesn't animate for others like easing: Easing.bezier(0.25, 0.1, 0.25, 1)

error when I try to use easing: Easing.inOut(Easing.quad),

Snack or minimal code example

import React, {FunctionComponent, useCallback, useEffect, useRef, useState} from 'react'; // we need this to make JSX compile
import {StyleSheet, Text, Button, View} from 'react-native'

import Animated, {
    Clock,
    Easing,
    Value,
    block,
    cond,
    eq,
    set,
    startClock,
    not,
    interpolateColors,
    timing,
    useCode,
} from "react-native-reanimated";

import {
    useClock,
    usePanGestureHandler,
    useValue,
} from "react-native-redash/src";

type ComponentType = {}
const runTiming = (clock:Clock, configProps) => {
    const state = {
        finished: new Value(0),
        position: new Value(0),
        frameTime: new Value(0),
        time: new Value(0)
    }
    const config = {
        toValue: new Value(1),
        ...configProps
    }
    return block([
        timing(clock, state, config),
        cond(eq(state.finished,1), [
            set(state.finished,0),
            set(state.frameTime,0),
            set(state.time,0),
            set(config.toValue,not(state.position)),
        ]),
        state.position
    ])
}
const TheComponent: FunctionComponent<ComponentType> = ({}) => {
    const {gestureHandler, translation, state} = usePanGestureHandler()
    const [animation, setAnimation] = useState<number>(10);
    const clock = useClock();
    const value = useValue(0);
    const value2 = useValue(0);
    const value3= useValue(0);
    useCode(()=>[
        startClock(clock),
        set(value, runTiming(clock,  {
            duration: 1000,
            easing: Easing.linear
        }),)
    ], [])
    useCode(()=>[
        startClock(clock),
        set(value2, runTiming(clock,  {
            duration: 1000,
            easing: Easing.bezier(0.25, 0.1, 0.25, 1),
        }),)
    ], [])

    useCode(()=>[
        startClock(clock),
        set(value3, runTiming(clock,  {
            duration: 1000,
            easing: Easing.inOut(Easing.quad),
        }),)
    ], [])

    const backgroundColor= interpolateColors(value,{
        inputRange:[0,1],
        outputColorRange:["#BFEAF5","#BEECC4"]
    })
    const backgroundColor2= interpolateColors(value2,{
        inputRange:[0,1],
        outputColorRange:["#BFEAF5","#BEECC4"]
    })
    const backgroundColor3= interpolateColors(value3,{
        inputRange:[0,1],
        outputColorRange:["#BFEAF5","#BEECC4"]
    })

    return (
        <View style={styles.appContainer}>
            <Animated.View style={[styles.container, { backgroundColor }]}>
            </Animated.View>
            <Animated.View style={[styles.container, { backgroundColor:backgroundColor2 }]}>
            </Animated.View>
            <Animated.View style={[styles.container, { backgroundColor:backgroundColor3 }]}>
            </Animated.View>
        </View>
    )
}
const styles = StyleSheet.create({
    container: {flex: 1, justifyContent: 'center', marginTop:10},
    appContainer: {flex:1}
})
export default TheComponent

Package versions

• React: 16.13.1
• React Native: 0.63.1
• React Native Reanimated: 2.0.0-alpha.4

[terrysahaidak]

Easing has been renamed to EasingNode in Reanimated2. Please, use EasingNode instead.

[kyle-ssg]

Ah ok thanks yeah that works, bit confusing but I'm sure there's good reasoning!