How to correctly update animation values and node based on props?

[nikitatsvirko-kandasoft]

I am creating Vertical Slider component, which allows user to drag 'toggle' and change 'value'.

I can say that it works perfectly, excepts one thing. I can't correctly pass an initial value to this component from props.
The slider is initialised with the 'initialValue' props, but then it's behaviour became too strange.

There is my code:

const withOffset = (value: Animated.Value<number>, state: Animated.Value<State>, offset: Animated.Value<number>) => {
    return block([
        cond(
            eq(state, State.END),
            [ set(offset, add(offset, value)), offset ],
            add(offset, value)
        )
    ]);
};

const onGestureEvent = (nativeEvent: any) => {
    const gestureEvent = Animated.event([ { nativeEvent } ], { useNativeDriver: true });
    return {
        onHandlerStateChange: gestureEvent,
        onGestureEvent: gestureEvent
    };
};

// copied from redash
function useConst<T>(initialValue: T | (() => T)): T {
    const ref = useRef<{ value: T }>();
    if (ref.current === undefined) {
        ref.current = {
            value:
            typeof initialValue === 'function' ?
                (initialValue as Function)()
                : initialValue
        };
    }
    return ref.current.value;
}

const VerticalSlider = ({ initialValue = 0, onDrag, onDragEnd }: Props) => {
    const state = useConst(() => new Animated.Value(State.UNDETERMINED));
    const translationY = useConst(() => new Animated.Value(0));
    const offsetY = useConst(() => new Animated.Value(0));
    const gestureHandler = onGestureEvent({ state, translationY });
    const y = diffClamp(
        withOffset(translationY, state, offsetY),
        -sliderHeight,
        0,
    );
    const translateY = add(y, buttonHeight / 2);
    const scaleY = interpolate(y, {
        inputRange: [ -sliderHeight, 0 ],
        outputRange: [ 0.0001, 1 ]
    });
    const callBackValue = round(multiply(divide(y, sliderHeight), -100));
    const prevValue = useConst(() => new Animated.Value(-1));

    useCode(() => [
        cond(
            eq(state, State.ACTIVE),
            block([
                cond(
                    neq(callBackValue, prevValue),
                    block([
                        set(prevValue, callBackValue),
                        call([ callBackValue ], ([ v ]) => onDrag && onDrag(v))
                    ]),
                )
            ])
        ),
        cond(
            eq(state, State.END),
            call([ callBackValue ], ([ v ]) => onDragEnd && onDragEnd(v))
        )
    ], [ state, callBackValue ]);

    useEffect(() => {
        set(translationY, add(translationY, multiply(divide(sliderHeight, 100), sub(callBackValue, initialValue))));
    }, [ initialValue ]);

    return (
        <View style={ styles.container }>
            <LinearGradient
                style={ styles.gradientStyle }
                colors={ [ '#FFDA16', '#ECC75E', '#FF9A3E', '#8062A7', '#205DB8', '#253057' ] }>
                <Animated.View
                    style={ [
                        styles.progressViewStyle,
                        {
                            transform: [
                                { translateY: -sliderHeight / 2 },
                                { scaleY: scaleY },
                                { translateY: sliderHeight / 2 }
                            ]
                        }
                    ] }
                />
            </LinearGradient>
            <PanGestureHandler { ...gestureHandler }>
                <Animated.Image
                    style={ [
                        styles.toggleStyle,
                        {
                            transform: [ { translateY: translateY } ]
                        }
                    ] }
                    source={ cursorImage }
                    resizeMode={ 'cover' }
                />
            </PanGestureHandler>
        </View>
    );
};

export default React.memo(VerticalSlider);

[jakub-gonet]

   useEffect(() => {
        set(translationY, add(translationY, multiply(divide(sliderHeight, 100), sub(callBackValue, initialValue))));
    }, [ initialValue ]);

set is meant to be used in the chain of the nodes attached to the styles or events. You can try using animValue.setValue() imperatively or using <Animated.Code> instead of useEffect.

[nikitatsvirko-kandasoft]

so, do you mean I can observe for initialValue prop in useCode hook and update translationY value by translationY.setValue(value)?

[jakub-gonet]

No, I mean there are two approaches to that. You can try using animated code (or useCode) and copy what you have inside useEffect right now.