useAnimatedStyle not working with @expo/vector-icons

[carlos3g]

Description

I created a animated component of Ionicons icon set using Animated.createAnimatedComponent and tried to animate its translateY, but nothing happens

Expected behavior

The Animated Icon change position due to translateX changes from 0 to 100

Actual behavior & steps to reproduce

Nothing happens. The AnimatedIcon stays in the initial position

Snack or minimal code example

import { Ionicons } from '@expo/vector-icons';
import { FC } from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

const AnimatedIcon = Animated.createAnimatedComponent(Ionicons);

const Home: FC = () => {
  const teste = useSharedValue(0);

  const heartStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: teste.value }],
  }));

  return (
    <View style={styles.container}>
      <AnimatedIcon name="heart" size={40} style={heartStyle} />
      <TouchableOpacity
        style={styles.fab}
        onPress={() => (teste.value = 100)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  fab: {
    position: 'absolute',
    bottom: 16,
    right: 16,
    width: 56,
    aspectRatio: 1,
    borderRadius: 28,
    backgroundColor: 'black',
  },
});

export default Home;

Package versions

name	version
react-native-reanimated	2.3.1
NodeJS	16.13.2
expo	sdk 44

Affected platforms

• [x] Android
• [ ] iOS
• [ ] Web
• [x] have not tested on others

[xD3CODER]

Got same issue using animatedProps

[BeyramTaglietti]

Same issue on IOS too, it works only sometimes, wonder if there's a solution, I need to animate the fontSize.

Video shows:

• Upon first load the animation does not work
• When I change something in the code and trigger an update, it works

https://github.com/software-mansion/react-native-reanimated/assets/124635309/6182de0f-fcec-40e3-b2fd-6e90db91de83

const AnimatedIcon = Animated.createAnimatedComponent(MaterialIcons);

const animatedTrashIcon = useAnimatedStyle(() => ({
      fontSize: scaledSharedValue.value,
    }));

<AnimatedIcon
    name="delete"
    color="white"
    size={10}
    style={animatedTrashIcon}
    />

[MehediH]

hey @tomekzaw, sorry for pinging directly, do you have an update on this? I see that it was part of the Jan 2022 bug bash there's not been an update and this issue still persists

[tomekzaw]

Hey @MehediH, apparently there's no update on this issue.

As a workaround, have you tried wrapping Ionicon inside an Animated.View?

[MehediH]

@tomekzaw I have tried wrapping inside an Animated.View and it doesn't work because I need the Icon's fontSize to be animated, but we are not allowed to set fontSize as a style property on View

Currently I have:

import Animated from "react-native-reanimated";

export const AnimatedAntDesign = Animated.createAnimatedComponent(AntDesign);

const maskIconStyle = useAnimatedStyle(() => ({
    fontSize: iconSize.value
  }));

return (
   <AnimatedAntDesign
    style={[maskIconStyle]}
    name="heart"
   />
)

the above doesn't work, the size only changes on re-renders, but not on the initial render.

and I can't do something like this either:

return (
   <Animated.View style={[maskIconStyle]}
        <AnimatedAntDesign
           style=[[maskIconStyle]
           name="heart"
        />
    </Animated.View>
)

Thoughts? 👀

it's really important to be able to animate the icon size so it's a bummer that this isn't working. FYI I also tried with animatedProps (to set the size) but it doesn't work (something about setNativeProps not being defined). Thank you!

[exploIF]

@MehediH Hi, as a workaround you may try wrapping your SVG with Animated.View and applying style using scale property

[BeyramTaglietti]

@MehediH Hi, as a workaround you may try wrapping your SVG with Animated.View and applying style using scale property

Doing so works but the icon appears granulated because it's just doing a simple zoom in instead of increasing the svg's font size.

[exploIF]

@MehediH Hi, as a workaround you may try wrapping your SVG with Animated.View and applying style using scale property

Doing so works but the icon appears granulated because it's just doing a simple zoom in instead of increasing the svg's font size.

In that scenario you can try using bigger icon by default and in your animation scaling it in range 0-1

[firstChairCoder]

It does seem like the issue may be with the @expo/vector-icons package for some reason I've not figured out yet.. I had some errors animating the opacity and transform after using the Animated.createAnimatedComponent() method. I switched to the react-native-vector-icons package and that seems to work.