React-native-animatable: Animate Color of an Icon

[ssomnoremac]

Bit of an extreme case but would be useful to be able to do this but I can't wrap an Icon like so and make it work

MyIcon = Animatable.createAnimatableComponent(Icon);

but even if I could how could you animate the <Icon color=... attribute? instead of the style like the docs mention? Also, I have to wrap it like so to make it work so I can't access the child styles anyway.

const ApplyCheckWhite = (
        <Icon
            name="ios-checkmark-circle-outline"
            size={85}
            color="rgba(255,255,255,1)"
            style={Styles.checkWhite} />
    )
    ...
            <Animatable.View ref={(row) => this.whiteChecks[i] = row}>
                { ApplyCheckWhite }
            </Animatable.View>

[oblador]

Assuming you're using the react-native-vector-icons library, you actually can use the style prop for animating color.

[ssomnoremac]

right you are! I didn't realize you could use the style prop to color icons instead of the color prop. Thanks!

[ssomnoremac]

But @oblador, shouldn't this work though? I'm trying to get a check mark to animate bounceIn while also changing colors but this

const myIcon = Animatable.createAnimatableComponent(Icon);

on Android at least, is not working. RN 29. The component just doesn't show.

[oblador]

How do you use the myIcon in render()?

[duhaime]

@ssomnoremac I too wanted to animate the color of an Icon from react-vector-icons (thank you twice @oblador!), and did so like this:

// Animations.js
module.exports = {
  glow: {
    0: {
      scale: 1,
      color: 'rgba(0,0,0,0.6)'
    },
    0.5: {
      scale: 1.05,
      color: 'rgba(255, 87, 34, 0.5)'
    },
    1: {
      scale: 1,
      color: 'rgba(0,0,0,0.6)'
    }
  }
}

// App.js
import Animations from './Animations';
import * as Animatable from 'react-native-animatable';

[...]

componentWillMount() {
    Animatable.initializeRegistryWithDefinitions({
      glow: Animations.glow
    });
  }

// ComponentWithAnimatedIcon.js
import * as Animatable from 'react-native-animatable';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
const AnimatedIcon = Animatable.createAnimatableComponent(Icon)

[...]

// inside render
<AnimatedIcon name={'ghost'} size={35} animation='glow' iterationCount='infinite' />