Creating Performant React Native Animations

Catalin describes animation as a detail that can make an app feel familiar and help users complete actions smoothly. Micro-interactions give immediate feedback, while larger UI animations can coordinate movement, such as staggering list items as they appear or animating them out when removed.

The guests warn that excessive motion distracts users, and long, uninterruptible animations make them wait. Catalin advises against spring animations for opacity because they can overshoot its zero-to-one range; timing curves such as ease-in or ease-out are a better fit. For spring motion, he suggests adjusting mass to match the feel of the element.

Animations can keep users informed while work such as network requests or filtering happens in the background, but heavy work and complex motion can make animations stutter, especially on lower-end devices. The guests suggest simplifying motion when needed, including a fade or short slide, and supporting Reduce Motion. Łukasz Wąsik describes adding a Reduce Motion setting to React Native Paper's theme and scaling animation duration to zero when it is enabled.

For complex, detailed motion, Catalin suggests playing back a Lottie or Rive animation rather than recreating every moving piece in React Native. For animated text values, Łukasz Wąsik describes using an animated text library or a TextInput workaround with Reanimated animated props. He also mentions setNativeProps as a way to send props directly to native components.

Catalin recommends learning interpolation and deriving multiple animated styles from one value. For example, a value that runs from zero to one can drive scale and map to a translation range such as 100 to 200. This can make animation code easier to maintain; Catalin's Animate React Native site offers reusable examples and source code for learning techniques such as carousel motion.