UseAnimatedStyle not animating the styles.

[nehatkkhan786]

Hey guys I have a build a chart component with which should animate the height and opacity of the bars. But its doesn’t animate it when I navigate to the screen. But when component hot reloaded or I change the bar value than it works fine.

i have attache the video with this thread, please do check the last part when I chnage the value than it animate the height.

RPReplay_Final1726222078.mov

attached the code of the bar also.

[nehatkkhan786]

Here is the image of the code I use for bar component.

[MatiPl01]

Hey @nehatkkhan786!

So, basically, you would like to animate the bars when you enter the screen from height and opacity set to 0 to their current day values, right?

In your current implementation they animate only on day shared value change. If your screen renders with the day.value set to let's say a number x and this value doesn't change to anything else after render, then your style will always use the x value without animating it. The withTiming function smoothly updates the value to the new one only if there is a difference between the prvious and the new value.

The easiest way to add the mount animation is to use a helper progress shared value like this:

// create a progress variable with initial value set to 0
const progress = useSharedValue(0);

// Animate the progress to 1 only when the component mounts
useEffect(() => {
  progress.value = withTiming(1);
}, [])

// and use this progress in your animated style later on
const rStyle = useAnimatedStyle(() => ({
  height: withTiming(maxHeight * day.value) * progress.value,
  opacity: withTiming(day.value) * progress.value
}))

[MatiPl01]

Alternatively, you can further simplify this code:

const animatedDayValue = useSharedValue(0); // set initially to 0

useEffect(() => {
  animatedDayValue.value = withTiming(day.value);
}, [day.value]) // if day is not a reanimated SharedValue

const rStyle = useAnimatedStyle(() => ({
  height: maxHeight * animatedDayValue.value,
  opacity: animatedDayValue.value
}))

or if day variable is a SharedValue, use this instead of the useEffect hook:

useAnimatedReaction(
  () => day.value,
  (value) => {
     animatedDayValue.value = withTiming(value);
  }
)