Initial color doesn't render

[ThasianX]

Description

Passing in color as an animated prop renders color as undefined to start. Once the derived value for color changes, then it renders the color properly

Snack or minimal code example

  const text= useDerivedValue(() => {
    return "Hello";
  });

  const color = useSharedValue("black");

  // First run this code without this hook. Then run it with the hook. 
  // useEffect(() => {
  //   color.value = "green";
  // }, []);

  const numberAnimatedProps = useAnimatedProps(() => {
    return {
      text: changeText.value,
      color: color.value,
    };
  });

  return (
      <AnimateableText
        animatedProps={numberAnimatedProps}
      />
  )

Workaround

  const color = useSharedValue("black");
  useAnimatedReaction(
    () => {
      return someState.value ? Colors.green : Colors.red;
    },
    (newColor) => {
      color.value = newColor;
    },
    []
  );

Package versions

• React Native Animateable Text: 0.6.0
• React Native Reanimated: 2.2.0

[JonnyBurger]

Looks not right to me that you pass the color as a prop. Color should be a style, and used alongside with useAnimatedStyle. could that be the problem?

[ThasianX]

Looks not right to me that you pass the color as a prop. Color should be a style, and used alongside with useAnimatedStyle. could that be the problem?

Oh that works perfectly. I thought animated style was only for Animated.View usage. Learned something new today!