--- title: Controlling and Customizing Animations in Reanimated 2 description: Reanimated 2 offers multiple ways to control and customize animations in React Native apps. Shared Value animated transitions can be triggered by wrapping... canonical: https://daily.dev/posts/controlling-and-customizing-animations-in-reanimated-2-nqd4ptsjq twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Controlling and Customizing Animations in Reanimated 2 | daily.dev og:description: Reanimated 2 offers multiple ways to control and customize animations in React Native apps. Shared Value animated transitions can be triggered by wrapping... og:url: https://daily.dev/posts/controlling-and-customizing-animations-in-reanimated-2-nqd4ptsjq og:image: https://api.daily.dev/og/posts/NqD4pTSjQ.png og:image:alt: Controlling and Customizing Animations in Reanimated 2 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. # Controlling and Customizing Animations in Reanimated 2 **[Software Mansion](https://daily.dev/sources/swmansion)** · 12 min read · 0 upvotes · 0 comments ## Summary Reanimated 2 offers multiple ways to control and customize animations in React Native apps. Shared Value animated transitions can be triggered by wrapping target values with helpers like withTiming, withSpring, or withDecay. Animations can also be defined directly inside the useAnimatedStyle hook, keeping style and transition logic colocated. All animations are fully interruptible — new transitions start from the current position without waiting for previous ones to finish. Animation modifiers (delay, sequence, repeat) allow chaining and composing animations, demonstrated through a wobble effect example. Unlike React Native's Animated API with Native Driver, Reanimated 2 supports animating all native properties including layout properties (width, flex) without touching the JS thread, though complex layout changes can still be expensive per frame. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [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 - [The real cost of React Native animations: Benchmarking every approach](https://daily.dev/posts/the-real-cost-of-react-native-animations-benchmarking-every-approach-ervf5p50g) · Expo Blog · 0 upvotes · 0 comments - [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 --- Tags: [#javascript](https://daily.dev/tags/javascript), [#mobile](https://daily.dev/tags/mobile), [#react-native](https://daily.dev/tags/react-native) [View this post on daily.dev](https://daily.dev/posts/controlling-and-customizing-animations-in-reanimated-2-nqd4ptsjq) ```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":"Controlling and Customizing Animations in Reanimated 2","url":"https://daily.dev/posts/controlling-and-customizing-animations-in-reanimated-2-nqd4ptsjq","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/controlling-and-customizing-animations-in-reanimated-2-nqd4ptsjq"},"datePublished":"2026-08-02T07:15:58.274Z","dateModified":"2026-08-02T07:41:57.974Z","description":"Reanimated 2 offers multiple ways to control and customize animations in React Native apps. Shared Value animated transitions can be triggered by wrapping...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/00ac4e27ef3e2c50c2ed8da8918f46ea?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/00ac4e27ef3e2c50c2ed8da8918f46ea?_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/controlling-and-customizing-animations-in-reanimated-2-nqd4ptsjq","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,mobile,react-native","timeRequired":"PT12M"} {"@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":"Controlling and Customizing Animations in Reanimated 2"}]} ```