diff --git a/docs/docs/animations.md b/docs/docs/animations.md index 6b3e35f2a546..aa1b29597ca6 100644 --- a/docs/docs/animations.md +++ b/docs/docs/animations.md @@ -297,6 +297,73 @@ Below we present the end result: ![](/react-native-reanimated/docs/animations/wobble.gif) +**A note about `useAnimatedStyle` and `map` components** + +When using a map that returns an `Animated.View` with a `useAnimatedStyle` style, the animated style will only be applied to the last item in the map. Furether, because hooks cannot be used in callbacks, you can't nest the `useAnimatedStyle` directly in the map either. You're best to split out the returned `Animated.View` into its own functional component. + +For example, this would only apply styles to the last element: + +```js +import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated'; + +function WobbleExample(props) { + const rotation = useSharedValue(0); + + const animatedStyle = useAnimatedStyle(() => { + return { + transform: [{ rotateZ: `${rotation.value}deg` }], + }; + }); + + return ( + <> + {[0, 1, 2].map(i => ( + + ))} +