How to use color interpolation on an Icon using ReAnimated?

Question

In order to animate something you need to make it an animated component. A would become an <Animated.View>. I want to do this for a hero icon. I have . Giving it the Animated. prefix doesn't work because reanimated doesn't have this built in. Does anyone know what I can do to make this icon ease into the new color? I would prefer a solution that still uses reanimated because it's linked up with many other animations.

Have you tried `Animated.createAnimatedComponent`? – PhantomSpooks Dec 11 '22 at 18:53 — PhantomSpooks, Dec 11 '22 at 18:53

score 1 · Answer 1 · answered Dec 11 '22 at 21:15

If you use Animated.createAnimatedComponent along with the useAnimatedProps you can animate color changes (demo):

import React, { useRef } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import Ionicons from '@expo/vector-icons/Ionicons';
import Animated, {
  interpolate,
  interpolateColor,
  useSharedValue,
  withTiming,
  useAnimatedProps,
} from 'react-native-reanimated';
import { colorGenerator } from '@phantom-factotum/colorutils';

const CheckMark = Animated.createAnimatedComponent(Ionicons);
const getRandomColor = ()=>colorGenerator(1, { generatorType: 'random' })[0]

export default function App() {
  const anim = useSharedValue(0);
  // keep track of current and next color
  const targetColor = useRef('#ad08ed');
  const currentColor = useRef('#acc880');
  const changeColor = () => {
    targetColor.current = getRandomColor();
    anim.value = withTiming(1, {duration:500}, () => {
      //  when animation completes update currentColor
      currentColor.current = targetColor.current;
      anim.value = withTiming(0)
    });
  };
  // animated the icon color prop
  const animatedProps = useAnimatedProps(() => {
    let color = interpolateColor(
      anim.value,
      [0, 1],
      [currentColor.current, targetColor.current]
    );
    return { color };
  });
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={changeColor} style={styles.pressable}>
        <CheckMark
          name="md-checkmark-circle"
          size={200}
          animatedProps={animatedProps}
        />
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
 pressable:{
   justifyContent:'center',
   alignItems:'center',
 }
});

Yes it worked. However if you try it on a hero icon it won't work because it's a stateless function component. I'll just use a different icon library. Thank you. — Cole, Dec 11 '22 at 22:42
Sorry I didnt realize hero icon was the library name; I thought it was the icon name — PhantomSpooks, Dec 11 '22 at 22:43
Well I converted HeroIcons to a class component so that it could be converted to an animated component but animating its props doesnt work https://snack.expo.dev/4tjRfks4ts — PhantomSpooks, Dec 12 '22 at 07:43
wait so it works for ios but it doesnt work for the web. Well HeroIcon is animating but the checkmark isnt — PhantomSpooks, Dec 12 '22 at 07:49
After reloading the app its working for both the checkmark and the hero icon — PhantomSpooks, Dec 12 '22 at 07:52
class component now accepts iconType and name https://snack.expo.dev/5gNa97SAN — PhantomSpooks, Dec 12 '22 at 20:01

How to use color interpolation on an Icon using ReAnimated?

1 Answers1