useAnimatedStyle: Link Shared Values to Component Styles

Why it exists

To bridge the gap between JavaScript logic and native UI updates for animation. Standard React state changes cause re-renders, which are too slow for smooth 60fps animations. useAnimatedStyle allows style properties to react directly to data changes on the UI thread, bypassing the React render cycle for maximum performance.

The mental model

Think of useAnimatedStyle as a reactive style factory. You provide a recipe (a function) that describes how styles should look based on one or more shared values. Reanimated watches those shared values and, whenever they change, it automatically re-runs your recipe and applies the new styles directly to the native view.

How it works

The hook takes a function, called an "updater," as its argument. This function returns a style object. Inside this function, you access the .value property of any shared values you're tracking. Reanimated detects these dependencies and subscribes to them. When a shared value is updated (e.g., by a gesture handler), Reanimated executes the updater on the UI thread and passes the resulting style object to the associated Animated component.

When to use it

Use this hook whenever a component's style needs to change dynamically in response to user interaction, sensor data, or any other frequently changing value. It's perfect for properties like transform, opacity, backgroundColor, and width. For optimal performance, only include the properties that actually change inside useAnimatedStyle and keep static styles in a StyleSheet.create object, merging them in the style prop.

When not to use it

Don't use it for static styles that never change; StyleSheet.create is more efficient. Avoid using it to animate non-style properties like a <TextInput>'s text value; use useAnimatedProps for that. Critically, do not mutate shared values inside the updater function, as this is an undefined behavior that often leads to infinite loops. Also, remember that removing an animated style from a component does not reset the style properties; you must explicitly set them to undefined in the style object.

One canonical example

To make a view fade in or out, define a shared value opacitySV that holds 0 or 1. Then, create the animated style: const animatedStyles = useAnimatedStyle(() => { return { opacity: opacitySV.value }; });. Finally, apply this to an Animated.View: <Animated.View style={[styles.box, animatedStyles]} />. When you update opacitySV.value, the view's opacity will change automatically without a component re-render.