How React Native Reanimated Updates Styles: A Deep Dive
Article Summary
Patrycja Kalinska from Software Mansion reveals why React Native Reanimated classifies props into three categories. The reason? Performance optimization that most developers overlook.
React Native Reanimated handles props differently based on whether they trigger layout recalculations. This deep dive explains the distinction between UI props (non-layout), Native props (layout), and JS props, and why understanding this matters for animation performance.
Key Takeaways
- UI props like opacity update directly without layout recalculation
- Transform with position absolute outperforms left/right for animations
- Custom props require addWhitelistedUIProps or addWhitelistedNativeProps functions
- Reanimated 4 changed handling: UI and Native props now both use ShadowTree
- JS props like SVG path delegate back to JavaScript thread
Choosing the right prop type can dramatically speed up React Native animations by avoiding unnecessary layout recalculations.
About This Article
React Native developers had to handle color values inconsistently. Colors like 'black', '#000', and 'rgb(0,0,0)' needed conversion to numbers before the native layer could use them, but other props like opacity didn't require this step.
Patrycja Kalinska's team at Software Mansion built a custom props allowlist dictionary with UI and Native props. They added the addWhitelistedUIProps function to pull validAttributes from components, so everything works together without extra setup.
Developers can now animate custom components like react-native-svg's Circle by calling Animated.addWhitelistedNativeProps({r: true}). This removes the need for complex prop configuration while keeping rendering and animation working correctly across different prop types.