Support animating Fontawesome color

[yosikal]

Currently I didn't find any way to animate the colors of Fontawesome icon. Trying to call
Animated.createAnimatedComponent(Fontawesome) generates an error.

[robmadole]

This project uses react-native-svg under the hood. Have you tried searching for animation guidance for that project?

[Strate]

@robmadole animating inner components of react-native-svg is possible, but need to use Animated-version of svg components. For example, instead of Path use createAnimatedComponent(Path). For now it is not possible with react-native-fontawesome use animated version of svg components, as it is hardcoded.

Possible solution would be to pass svgObjectMap as prop to FontAwesomeIcon component.

[jvfalco1]

Anything about this?

[jvfalco1]

@mlwilkerson @robmadole

[klandell]

Since this has been years without update. A hacky way to do this is by updating the color state on the JS thread. It should be used sparingly since this is not performant, but is "good enough" for simple action animations. Just posting here in case it helps someone else. Or tag me if someone has a better idea!

export function IconWithColorAnimation(props: Omit<FontAwesomeIconProps, "color"> & { color: DerivedValue<string> }) {
  const { color: animatedColor } = props;

  const [color, setColor] = useState(animatedColor.value);
  useAnimatedReaction(
    () => animatedColor.value,
    (result, previous) => {
      if (result !== previous) runOnJS(setColor)(result);
    },
  );

  return <FontAwesomeIcon {...props} color={color} />;
}