search

software-mansion / react-native-reanimated

React Native's Animated library reimplemented
https://docs.swmansion.com/react-native-reanimated/
MIT License
9.05k stars 1.31k forks source link

useAnimatedStyle doesn't work on SVG icons until forcing a hot reload #5677

Open stevengoldberg opened 9 months ago

stevengoldberg commented 9 months ago

Description

When applying useAnimatedStyle to an SVG icon, the animated style will have no effect. When some change forces the component to hot reload, it will start working as expected.

This occurs in the iOS simulator, Android simulator, and on an iPhone in dev and release modes. This issue was introduced somewhere between version 3.3.0 and 3.6.2.

See the snack for a minimal repro.

Steps to reproduce

  1. Import an SVG icon from e.g. @expo/vector-icons
  2. Make an animated version of the SVG component with createAnimatedComponent
  3. Apply an animated style based on a sharedValue
  4. Toggle the animated style in e.g. the onPress function of a pressable — the animated style will not be applied
  5. Make some trivial change to the component, causing a hot reload, e.g. add a console.log — the animated style will now function as expected
  6. Fully reload the app — the animated style is no longer applied.

Snack or a link to a repository

https://snack.expo.dev/@yungchomsky/quiet-blue-pretzel?platform=ios

Reanimated version

3.6.2, 3.7.0

React Native version

0.73.4

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

iPhone 14 Pro

Acknowledgements

Yes

stevengoldberg commented 9 months ago

Just found https://github.com/software-mansion/react-native-reanimated/issues/2869, which seems to be the same thing. Strangely though I believe this was working with expo SDK49, and is now broken with SDK50.

MehediH commented 7 months ago

Any update on this? We are experiencing the same issue, would love a fix.