Icon size won't animate

Hello,

as described in the title I can’t animate the icon’s size.

I create an AnimatedIcon, then I try to animate it with interpolate on the selected variable which is a boolean. If the initial selected value is 1 then the Icon is bigger (40) but transition between 1 and 0 is not animated and the reverse transition (1 to 0) never animates, icon stays small (30).

var size = selected.interpolate({ inputRange: [0, 1], outputRange: [30, 40], });

I tried animating the size prop as well as the fontSize style prop. Any idea on how to do this ?

NB: animating color the same way works very well.

[oblador]

@mdramos Does my example work for you? Did you try using style={{ fontSize: xx}}?

[oblador]

It works, I’m guessing you’ve forgotten to call start() on your animation. Try this simple example:

this.state = {
    size: new Animated.Value(20)
};

<TouchableOpacity onPress={() => Animated.spring(this.state.size, { toValue: 40 }).start()}>
    <AnimatedIcon name="heart" style={{ fontSize: this.state.size }} />
</TouchableOpacity>