--- title: How React Native Reanimated Updates the Styles — a Deep Dive description: A deep dive into how React Native Reanimated classifies and updates props during animations. Props fall into three categories: Non-layout (UI) props like... canonical: https://daily.dev/posts/how-react-native-reanimated-updates-the-styles-a-deep-dive-jecpnvoaz twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How React Native Reanimated Updates the Styles — a Deep Dive | daily.dev og:description: A deep dive into how React Native Reanimated classifies and updates props during animations. Props fall into three categories: Non-layout (UI) props like... og:url: https://daily.dev/posts/how-react-native-reanimated-updates-the-styles-a-deep-dive-jecpnvoaz og:image: https://api.daily.dev/og/posts/jeCPNvoaZ.png og:image:alt: How React Native Reanimated Updates the Styles — a Deep Dive og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How React Native Reanimated Updates the Styles — a Deep Dive **[Software Mansion](https://daily.dev/sources/swmansion)** · 6 min read · 0 upvotes · 0 comments ## Summary A deep dive into how React Native Reanimated classifies and updates props during animations. Props fall into three categories: Non-layout (UI) props like opacity and transform, Layout (Native) props that trigger reflow, and JS props handled on the JavaScript thread. The classification exists primarily for optimization — UI props bypass layout recalculation and update directly on the component, while Native props go through the Shadow Tree. The post explains the custom props allowlist, the addWhitelistedUIProps and addWhitelistedNativeProps functions, and notes that Reanimated 4 unifies Non-layout and Layout props to both pass through the Shadow Tree due to view measurement and touch detection issues. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [React Native solves some real problems](https://daily.dev/posts/react-native-solves-some-real-problems-bagnpeani) · Bytes by ui.dev · 2 upvotes · 0 comments - [How to Create Fluid Animations with React Native Reanimated v4](https://daily.dev/posts/how-to-create-fluid-animations-with-react-native-reanimated-v4-eydbvxf9p) · freeCodeCamp · 4 upvotes · 0 comments --- Tags: [#performance](https://daily.dev/tags/performance), [#react-native](https://daily.dev/tags/react-native) [View this post on daily.dev](https://daily.dev/posts/how-react-native-reanimated-updates-the-styles-a-deep-dive-jecpnvoaz) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How React Native Reanimated Updates the Styles — a Deep Dive","url":"https://daily.dev/posts/how-react-native-reanimated-updates-the-styles-a-deep-dive-jecpnvoaz","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-react-native-reanimated-updates-the-styles-a-deep-dive-jecpnvoaz"},"datePublished":"2026-08-02T07:15:25.004Z","dateModified":"2026-08-02T07:38:32.208Z","description":"A deep dive into how React Native Reanimated classifies and updates props during animations. Props fall into three categories: Non-layout (UI) props like...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2af69381101dd39905882701a9464d4c?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2af69381101dd39905882701a9464d4c?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Software Mansion","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Software Mansion","logo":"https://media.daily.dev/image/upload/s--sOx0vaVZ--/f_auto,q_auto/v1785654908/logos/swmansion?_a=BAMAMicg0","url":"https://daily.dev/sources/swmansion"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-react-native-reanimated-updates-the-styles-a-deep-dive-jecpnvoaz","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"performance,react-native","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Software Mansion","item":"https://daily.dev/sources/swmansion"},{"@type":"ListItem","position":3,"name":"How React Native Reanimated Updates the Styles — a Deep Dive"}]} ```