SharedValue is an type of object, and sometimes a number about react-native-reanimated

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[szydlovsky]

Hey @Michota would you be able to provide a minimal reproduction that contains the problem? Your example is quite complicated. Also, looking at the code I can tell at least one thing that is not completely fine: dislikeButtonOffset won't be a reactive shared value, because you create it depending on other shared value. I'd suggest using useDerivedValue in such situation.

[Michota]

Can you tell me why does this work? For some reason derivedValue as an object does not work, but it does work as two values.

    const dislikeButtonOffset = useSharedValue({
      x: dislikeButtonStartPosition.value.x,
      y: dislikeButtonStartPosition.value.y,
    });
    const curtainOffset = useSharedValue(0);
    const curtainWidth = useSharedValue(0);

    const dislikeButtonOffsetX = useDerivedValue(() => dislikeButtonOffset.value.x);
    const dislikeButtonOffsetY = useDerivedValue(() => dislikeButtonOffset.value.y);

    const dislikeButtonSize = useSharedValue(DISLIKE_BUTTON_SIZE);

    const dislikeButtonAnimatedStyles = useAnimatedStyle(() => {
      return {
        backgroundColor: "yellow",
        position: "absolute",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 100,
        width: dislikeButtonSize.value,
        height: dislikeButtonSize.value,
        transform: [
          { translateX: dislikeButtonOffsetX.value },
          { translateY: dislikeButtonOffsetY.value },    

But this does not?

 const dislikeButtonOffset = useSharedValue({
      x: dislikeButtonStartPosition.value.x,
      y: dislikeButtonStartPosition.value.y,
    });
    const curtainOffset = useSharedValue(0);
    const curtainWidth = useSharedValue(0);

    const dislikeButtonOffsetTwo = useDerivedValue(() => dislikeButtonOffset.value);

    const dislikeButtonSize = useSharedValue(DISLIKE_BUTTON_SIZE);

    const dislikeButtonAnimatedStyles = useAnimatedStyle(() => {
      return {
        backgroundColor: "yellow",
        position: "absolute",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 100,
        width: dislikeButtonSize.value,
        height: dislikeButtonSize.value,
        transform: [
          { translateX: dislikeButtonOffsetTwo.value.x },
          { translateY: dislikeButtonOffsetTwo.value.y },

[Michota]

Btw. changing dislikeButtonOffset to derived value will allow me to change its values in different functions, like this one?
Currently I am animating this in following way:

    const curtainShrinkRight = useCallback(() => {
      runOnUI(() => {
        isDislikeButtonHidden.value = false;

        dislikeButtonOffset.value = {
          x: withTiming(dislikeButtonStartPosition.value.x, {
            duration: 0,
          }),
          y: withTiming(dislikeButtonStartPosition.value.y, {
            duration: 0,
          }),
        };
      })();

      curtainOffset.value = withTiming(0, {
        duration: DISLIKE_CURTAIN_TIME.shrink,
      });

      curtainWidth.value = withTiming(0, {
        duration: DISLIKE_CURTAIN_TIME.shrink,
      });
    }, [
      curtainOffset,
      curtainWidth,
      dislikeButtonOffset,
      isDislikeButtonHidden,
      dislikeButtonStartPosition.value.x,
      dislikeButtonStartPosition.value.y,
    ]);

// some skipped code...

    useEffect(() => {
      if (isExpanded === false) {
        curtainShrinkRight();
      }
    }, [isExpanded, curtainShrinkRight]);

How do i modify it? Using modify() does not work, maybe I dont understand something...

[Michota]

May this be related to fact, that animations are being run in UI thread?

    const curtainExpandRight = useCallback(() => {
      curtainWidth.value = withTiming(screenDimensions.width / 2, {
        duration: DISLIKE_CURTAIN_TIME.expand,
      });

      curtainOffset.value = withDelay(
        DISLIKE_CURTAIN_TIME.expand,
        withTiming(
          0,
          {
            duration: DISLIKE_CURTAIN_TIME.expand,
          },
          () => {
            runOnJS(onCurtainExpand)();
            isDislikeButtonHidden.value = true;
          }
        )
      );
    }, [curtainOffset, curtainWidth, screenDimensions.width, onCurtainExpand, isDislikeButtonHidden]);

    const curtainShrinkRight = useCallback(() => {
      runOnUI(() => {
        isDislikeButtonHidden.value = false;

        dislikeButtonOffset.value = {
          x: withTiming(dislikeButtonStartPosition.x, {
            duration: 0,
          }),
          y: withTiming(dislikeButtonStartPosition.y, {
            duration: 0,
          }),
        };
      })();
      

[tjzel]

Hi @Michota. I ran your first code snippet in the following way:

import React from 'react';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

const DISLIKE_BUTTON_START_POSITION = {x: 0, y: 0};

const windowDimensions = {height: 100};

const DISLIKE_BUTTON_SIZE = 100;

export default function App() {
  const isDislikeButtonHidden = useSharedValue(false);
  const dislikeButtonStartPosition = useSharedValue({
    x: DISLIKE_BUTTON_START_POSITION.x,
    y: windowDimensions.height - 100,
  });
  const dislikeButtonOffset = useSharedValue({
    x: dislikeButtonStartPosition.value.x,
    y: dislikeButtonStartPosition.value.y,
  });

  const dislikeButtonSize = useSharedValue(DISLIKE_BUTTON_SIZE);

  console.log(dislikeButtonOffset.value.x, dislikeButtonOffset.value.y); // THERE THEY ARE LOGGED AS NUMBER

  const dislikeButtonAnimatedStyles = useAnimatedStyle(() => {
    console.log(dislikeButtonOffset.value.x, dislikeButtonOffset.value.y); // THERE THEY ARE LOGGED AS OBJECT

    return {
      backgroundColor: 'red',
      position: 'absolute',
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: 100,
      width: dislikeButtonSize.value,
      height: dislikeButtonSize.value,
      transform: [
        {translateX: dislikeButtonOffset.value.x},
        {translateY: dislikeButtonOffset.value.y},
        {scale: withSpring(isDislikeButtonHidden.value ? 0 : 1)},
      ],
    };
  });

  return <Animated.View style={dislikeButtonAnimatedStyles} />;
}

And everything works fine. From what you posted it seems like you have misassigned an animation somewhere to a shared value. If you want us to help you, I'm afraid you'd need to submit a complete component code (or a reproducible example) instead of little bits of it.