kitten.sh / rn-llms-txt-gen
this repo has no description
fork atom
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_animations.html
at main 126 kB view raw
1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-0.79 docs-doc-page docs-doc-id-animations" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Animations · React Native</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true property=og:url content=https://reactnative.dev/docs/animations><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true property=og:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true name=twitter:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:site content=@reactnative><meta data-rh=true name=docusaurus_version content=0.79><meta data-rh=true name=docusaurus_tag content=docs-default-0.79><meta data-rh=true name=docsearch:version content=0.79><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-0.79><meta data-rh=true property=og:title content="Animations · React Native"><meta data-rh=true name=description content="Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface."><meta data-rh=true property=og:description content="Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/animations><link data-rh=true rel=alternate href=https://reactnative.dev/docs/animations hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/animations hreflang=x-default><link data-rh=true rel=preconnect href=https://8TDSE0OHGQ-dsn.algolia.net crossorigin=anonymous><link rel=alternate type=application/rss+xml href=/blog/rss.xml title="React Native RSS Feed"><link rel=alternate type=application/atom+xml href=/blog/atom.xml title="React Native Atom Feed"><link rel=alternate type=application/json href=/blog/feed.json title="React Native JSON Feed"><link rel=preconnect href=https://www.google-analytics.com><script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script><script async src=https://www.google-analytics.com/analytics.js></script><link rel=preconnect href=https://www.google-analytics.com><link rel=preconnect href=https://www.googletagmanager.com><script async src="https://www.googletagmanager.com/gtag/js?id=G-58L13S6BDP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-58L13S6BDP",{})</script><link rel=search type=application/opensearchdescription+xml title="React Native" href=/opensearch.xml><link rel=icon href=/img/pwa/manifest-icon-512.png><link rel=manifest href=/manifest.json><meta name=theme-color content=#20232a><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=#20232a><link rel=apple-touch-icon href=/img/pwa/manifest-icon-512.png><link rel=mask-icon href=/img/pwa/manifest-icon-512.png color=#06bcee><meta name=msapplication-TileImage href=/img/pwa/manifest-icon-512.png><meta name=msapplication-TileColor content=#20232a><script src=https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js defer></script><script src=https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd8ryO5qrZo8Exadq9qmt1wtm4_2FdZGEAKHDFEt_2BBlwwM4.js defer></script><script src=https://snack.expo.dev/embed.js defer></script><script src=https://platform.twitter.com/widgets.js async></script><link rel=stylesheet href=/assets/css/styles.883cb042.css><script src=/assets/js/runtime~main.8ac1e6f0.js defer></script><script src=/assets/js/main.341783f5.js defer></script><body class=navigation-with-keyboard><svg xmlns=http://www.w3.org/2000/svg style="display: none;"><defs> 2<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol> 3</defs></svg> 4<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id=__docusaurus><div role=region aria-label="Skip to main content"><a class=skipToContent_oPtH href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><div class="theme-announcement-bar announcementBar_zJRd" style=background-color:#20232a;color:#fff role=banner><div class="content_bSb_ announcementBarContent_t7IR">Join us for React Conf on Oct 7-8. <a target=_blank rel="noopener noreferrer" href=https://conf.react.dev>Learn more</a>.</div></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top navbar--dark"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--light_hHel"><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--dark_yETr"></div><b class="navbar__title text--truncate">React Native</b></a><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/docs/animations>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/animations>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/animations>0.79</a><li><a class=dropdown__link href=/docs/0.78/animations>0.78</a><li><a class=dropdown__link href=/docs/0.77/animations>0.77</a><li><a class=dropdown__link href=/docs/0.76/animations>0.76</a><li><a class=dropdown__link href=/docs/0.75/animations>0.75</a><li><a class=dropdown__link href=/docs/0.74/animations>0.74</a><li><a class=dropdown__link href=/docs/0.73/animations>0.73</a><li><a class=dropdown__link href=/docs/0.72/animations>0.72</a><li><a class=dropdown__link href=/docs/0.71/animations>0.71</a><li><a class=dropdown__link href=/docs/0.70/animations>0.70</a><li><a class=dropdown__link href=/versions>All versions</a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Development</a><ul class=dropdown__menu><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/getting-started>Guides</a><li><a class=dropdown__link href=/docs/components-and-apis>Components</a><li><a class=dropdown__link href=/docs/accessibilityinfo>APIs</a><li><a class=dropdown__link href=/architecture/overview>Architecture</a></ul></div><a class="navbar__item navbar__link" href=/contributing/overview>Contributing</a><a class="navbar__item navbar__link" href=/community/overview>Community</a><a class="navbar__item navbar__link" href=/showcase>Showcase</a><a class="navbar__item navbar__link" href=/blog>Blog</a><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="toggle_ki11 colorModeToggle_Hewu"><button class="clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m darkNavbarColorModeToggle_m8pZ" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ lightToggleIcon_lgto"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ darkToggleIcon_U96C"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ systemToggleIcon_E5c0"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_bzqh><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_MB5r"><div class=docsWrapper__sE8><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_iEvu" type=button></button><div class=docRoot_DfVB><aside class="theme-doc-sidebar-container docSidebarContainer_c7NB"><div class=sidebarViewport_KYo0><div class=sidebar_CUen><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_jmj1 menuWithAnnouncementBar_YufC"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/getting-started>The Basics</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/environment-setup>Environment setup</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/running-on-device>Workflow</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true href=/docs/style>UI & Interaction</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/style>Style</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/height-and-width>Height and Width</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/flexbox>Layout with Flexbox</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/images>Images</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/colors>Color Reference</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--active" tabindex=0>Interaction</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/handling-touches>Handling Touches</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/navigation>Navigating Between Screens</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/animations>Animations</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/gesture-responder-system>Gesture Responder System</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class=menu__link tabindex=0>Connectivity</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/network>Networking</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/security>Security</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class=menu__link tabindex=0>Inclusion</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/accessibility>Accessibility</a></ul></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/debugging>Debugging</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/testing-overview>Testing</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/performance>Performance</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/javascript-environment>JavaScript Runtime</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/the-new-architecture/what-is-codegen>Codegen</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/native-platform>Native Development</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/headless-js-android>Android and iOS guides</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/legacy/native-modules-intro>Legacy Architecture</a></div></ul></nav></div></div></aside><main class=docMainContainer_a9sJ><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_Qr34"><div class=docItemContainer_tjFy><article><div class="tocCollapsible_wXna theme-doc-toc-mobile tocMobile_Ojys"><button type=button class="clean-btn tocCollapsibleButton_iI2p">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Animations</h1></header><p>Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.</p> 5<p>React Native provides two complementary animation systems: <a href=/docs/animations#animated-api><code>Animated</code></a> for granular and interactive control of specific values, and <a href=/docs/animations#layoutanimation-api><code>LayoutAnimation</code></a> for animated global layout transactions.</p> 6<h2 class="anchor anchorWithStickyNavbar_JmGV" id=animated-api><code>Animated</code> API<a href=#animated-api class=hash-link aria-label="Direct link to animated-api" title="Direct link to animated-api">​</a></h2> 7<p>The <a href=/docs/animated><code>Animated</code></a> API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p> 8<p><code>Animated</code> exports six animatable component types: <code>View</code>, <code>Text</code>, <code>Image</code>, <code>ScrollView</code>, <code>FlatList</code> and <code>SectionList</code>, but you can also create your own using <code>Animated.createAnimatedComponent()</code>.</p> 9<p>For example, a container view that fades in when it is mounted may look like this:</p> 10<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">TypeScript<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">JavaScript</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb hidden><div class=snack-player data-snack-name=Example data-snack-description="Example usage" data-snack-files="%7B%22App.js%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseEffect%7D%20from%20'react'%3B%5Cnimport%20%7BAnimated%2C%20Text%2C%20View%2C%20useAnimatedValue%7D%20from%20'react-native'%3B%5Cn%5Cnconst%20FadeInView%20%3D%20props%20%3D%3E%20%7B%5Cn%20%20const%20fadeAnim%20%3D%20useAnimatedValue(0)%3B%20%2F%2F%20Initial%20value%20for%20opacity%3A%200%5Cn%5Cn%20%20useEffect(()%20%3D%3E%20%7B%5Cn%20%20%20%20Animated.timing(fadeAnim%2C%20%7B%5Cn%20%20%20%20%20%20toValue%3A%201%2C%5Cn%20%20%20%20%20%20duration%3A%2010000%2C%5Cn%20%20%20%20%20%20useNativeDriver%3A%20true%2C%5Cn%20%20%20%20%7D).start()%3B%5Cn%20%20%7D%2C%20%5BfadeAnim%5D)%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CAnimated.View%20%2F%2F%20Special%20animatable%20View%5Cn%20%20%20%20%20%20style%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20...props.style%2C%5Cn%20%20%20%20%20%20%20%20opacity%3A%20fadeAnim%2C%20%2F%2F%20Bind%20opacity%20to%20animated%20value%5Cn%20%20%20%20%20%20%7D%7D%3E%5Cn%20%20%20%20%20%20%7Bprops.children%7D%5Cn%20%20%20%20%3C%2FAnimated.View%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cn%2F%2F%20You%20can%20then%20use%20your%20%60FadeInView%60%20in%20place%20of%20a%20%60View%60%20in%20your%20components%3A%5Cnexport%20default%20()%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3CView%5Cn%20%20%20%20%20%20style%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%20%20%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20%20%20%7D%7D%3E%5Cn%20%20%20%20%20%20%3CFadeInView%5Cn%20%20%20%20%20%20%20%20style%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20%20%20width%3A%20250%2C%5Cn%20%20%20%20%20%20%20%20%20%20height%3A%2050%2C%5Cn%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20'powderblue'%2C%5Cn%20%20%20%20%20%20%20%20%7D%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%2028%2C%20textAlign%3A%20'center'%2C%20margin%3A%2010%7D%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20Fading%20in%5Cn%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%3C%2FFadeInView%3E%5Cn%20%20%20%20%3C%2FView%3E%5Cn%20%20)%3B%5Cn%7D%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div></div><div role=tabpanel class=tabItem_wHwb><div class=snack-player data-snack-name=Example data-snack-description="Example usage" data-snack-files="%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseEffect%7D%20from%20'react'%3B%5Cnimport%20%7BAnimated%2C%20Text%2C%20View%2C%20useAnimatedValue%7D%20from%20'react-native'%3B%5Cnimport%20type%20%7BPropsWithChildren%7D%20from%20'react'%3B%5Cnimport%20type%20%7BViewStyle%7D%20from%20'react-native'%3B%5Cn%5Cntype%20FadeInViewProps%20%3D%20PropsWithChildren%3C%7Bstyle%3A%20ViewStyle%7D%3E%3B%5Cn%5Cnconst%20FadeInView%3A%20React.FC%3CFadeInViewProps%3E%20%3D%20props%20%3D%3E%20%7B%5Cn%20%20const%20fadeAnim%20%3D%20useAnimatedValue(0)%3B%20%2F%2F%20Initial%20value%20for%20opacity%3A%200%5Cn%5Cn%20%20useEffect(()%20%3D%3E%20%7B%5Cn%20%20%20%20Animated.timing(fadeAnim%2C%20%7B%5Cn%20%20%20%20%20%20toValue%3A%201%2C%5Cn%20%20%20%20%20%20duration%3A%2010000%2C%5Cn%20%20%20%20%20%20useNativeDriver%3A%20true%2C%5Cn%20%20%20%20%7D).start()%3B%5Cn%20%20%7D%2C%20%5BfadeAnim%5D)%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CAnimated.View%20%2F%2F%20Special%20animatable%20View%5Cn%20%20%20%20%20%20style%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20...props.style%2C%5Cn%20%20%20%20%20%20%20%20opacity%3A%20fadeAnim%2C%20%2F%2F%20Bind%20opacity%20to%20animated%20value%5Cn%20%20%20%20%20%20%7D%7D%3E%5Cn%20%20%20%20%20%20%7Bprops.children%7D%5Cn%20%20%20%20%3C%2FAnimated.View%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cn%2F%2F%20You%20can%20then%20use%20your%20%60FadeInView%60%20in%20place%20of%20a%20%60View%60%20in%20your%20components%3A%5Cnexport%20default%20()%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3CView%5Cn%20%20%20%20%20%20style%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%20%20%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20%20%20%7D%7D%3E%5Cn%20%20%20%20%20%20%3CFadeInView%5Cn%20%20%20%20%20%20%20%20style%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20%20%20width%3A%20250%2C%5Cn%20%20%20%20%20%20%20%20%20%20height%3A%2050%2C%5Cn%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20'powderblue'%2C%5Cn%20%20%20%20%20%20%20%20%7D%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%2028%2C%20textAlign%3A%20'center'%2C%20margin%3A%2010%7D%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20Fading%20in%5Cn%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%3C%2FFadeInView%3E%5Cn%20%20%20%20%3C%2FView%3E%5Cn%20%20)%3B%5Cn%7D%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android,web data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div></div></div></div> 11<p>Let's break down what's happening here. In the <code>FadeInView</code> render method, a new <code>Animated.Value</code> called <code>fadeAnim</code> is initialized with <code>useRef</code>. The opacity property on the <code>View</code> is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.</p> 12<p>When the component mounts, the opacity is set to 0. Then, an easing animation is started on the <code>fadeAnim</code> animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.</p> 13<p>This is done in an optimized way that is faster than calling <code>setState</code> and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.</p> 14<h3 class="anchor anchorWithStickyNavbar_JmGV" id=configuring-animations>Configuring animations<a href=#configuring-animations class=hash-link aria-label="Direct link to Configuring animations" title="Direct link to Configuring animations">​</a></h3> 15<p>Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p> 16<p><code>Animated</code> provides several animation types, the most commonly used one being <a href=/docs/animated#timing><code>Animated.timing()</code></a>. It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.</p> 17<p>By default, <code>timing</code> will use an easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing an <code>easing</code> parameter. Custom <code>duration</code> or even a <code>delay</code> before the animation starts is also supported.</p> 18<p>For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:</p> 19<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token maybe-class-name">Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>timing</span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">state</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">xPosition</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> toValue</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>100</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> easing</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">Easing</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>back</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> duration</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>2000</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> useNativeDriver</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>true</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>start</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 20<p>Take a look at the <a href=/docs/animated#configuring-animations>Configuring animations</a> section of the <code>Animated</code> API reference to learn more about all the config parameters supported by the built-in animations.</p> 21<h3 class="anchor anchorWithStickyNavbar_JmGV" id=composing-animations>Composing animations<a href=#composing-animations class=hash-link aria-label="Direct link to Composing animations" title="Direct link to Composing animations">​</a></h3> 22<p>Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The <code>Animated</code> API provides several methods, such as <code>sequence()</code> and <code>delay()</code>, each of which take an array of animations to execute and automatically calls <code>start()</code>/<code>stop()</code> as needed.</p> 23<p>For example, the following animation coasts to a stop, then it springs back while twirling in parallel:</p> 24<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token maybe-class-name">Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>sequence</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// decay, then spring to start and twirl</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token maybe-class-name">Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>decay</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">position</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// coast to a stop</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> velocity</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">x</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> gestureState</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">vx</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> y</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> gestureState</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">vy</span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// velocity from gesture release</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> deceleration</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0.997</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> useNativeDriver</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>true</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token maybe-class-name">Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>parallel</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// after decay, in parallel:</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token maybe-class-name">Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>spring</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">position</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> toValue</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">x</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> y</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0</span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// return to start</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> useNativeDriver</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>true</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token maybe-class-name">Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>timing</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">twirl</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// and twirl</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> toValue</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>360</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> useNativeDriver</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>true</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>start</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// start the sequence group</span><br></span></code></pre></div></div> 25<p>If one animation is stopped or interrupted, then all other animations in the group are also stopped. <code>Animated.parallel</code> has a <code>stopTogether</code> option that can be set to <code>false</code> to disable this.</p> 26<p>You can find a full list of composition methods in the <a href=/docs/animated#composing-animations>Composing animations</a> section of the <code>Animated</code> API reference.</p> 27<h3 class="anchor anchorWithStickyNavbar_JmGV" id=combining-animated-values>Combining animated values<a href=#combining-animated-values class=hash-link aria-label="Direct link to Combining animated values" title="Direct link to Combining animated values">​</a></h3> 28<p>You can <a href=/docs/animated#combining-animated-values>combine two animated values</a> via addition, multiplication, division, or modulo to make a new animated value.</p> 29<p>There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):</p> 30<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> a </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>new</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access maybe-class-name" style=color:#79b6f2>Value</span><span class="token punctuation" style=color:#657b83>(</span><span class="token number" style=color:#5a9bcf>1</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> b </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token maybe-class-name">Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>divide</span><span class="token punctuation" style=color:#657b83>(</span><span class="token number" style=color:#5a9bcf>1</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> a</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token maybe-class-name">Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>spring</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">a</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> toValue</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>2</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> useNativeDriver</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>true</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>start</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 31<h3 class="anchor anchorWithStickyNavbar_JmGV" id=interpolation>Interpolation<a href=#interpolation class=hash-link aria-label="Direct link to Interpolation" title="Direct link to Interpolation">​</a></h3> 32<p>Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p> 33<p>A basic mapping to convert a 0-1 range to a 0-100 range would be:</p> 34<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">value</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>interpolate</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> inputRange</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token number" style=color:#5a9bcf>0</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>1</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> outputRange</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token number" style=color:#5a9bcf>0</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>100</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 35<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying <code>style</code> from the example above like so:</p> 36<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain"> style</span><span class="token operator" style=color:#fc929e>=</span><span class="token punctuation" style=color:#657b83>{</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> opacity</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">state</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">fadeAnim</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// Binds directly</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> transform</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> translateY</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">state</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">fadeAnim</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>interpolate</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> inputRange</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token number" style=color:#5a9bcf>0</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>1</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> outputRange</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token number" style=color:#5a9bcf>150</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// 0 : 150, 0.5 : 75, 1 : 0</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div> 37<p><a href=/docs/animated#interpolate><code>interpolate()</code></a> supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:</p> 38<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">value</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>interpolate</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> inputRange</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token operator" style=color:#fc929e>-</span><span class="token number" style=color:#5a9bcf>300</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>-</span><span class="token number" style=color:#5a9bcf>100</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>100</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>101</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> outputRange</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token number" style=color:#5a9bcf>300</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>1</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 39<p>Which would map like so:</p> 40<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token maybe-class-name">Input</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token maybe-class-name">Output</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token operator" style=color:#fc929e>--</span><span class="token operator" style=color:#fc929e>--</span><span class="token operator" style=color:#fc929e>--</span><span class="token operator" style=color:#fc929e>|</span><span class="token operator" style=color:#fc929e>--</span><span class="token operator" style=color:#fc929e>--</span><span class="token operator" style=color:#fc929e>--</span><span class="token operator" style=color:#fc929e>-</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token operator" style=color:#fc929e>-</span><span class="token number" style=color:#5a9bcf>400</span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>450</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token operator" style=color:#fc929e>-</span><span class="token number" style=color:#5a9bcf>300</span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>300</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token operator" style=color:#fc929e>-</span><span class="token number" style=color:#5a9bcf>200</span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>150</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token operator" style=color:#fc929e>-</span><span class="token number" style=color:#5a9bcf>100</span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token operator" style=color:#fc929e>-</span><span class="token number" style=color:#5a9bcf>50</span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0.5</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0</span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>1</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>50</span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0.5</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>100</span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>101</span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>200</span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0</span><br></span></code></pre></div></div> 41<p><code>interpolate()</code> also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:</p> 42<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">value</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>interpolate</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> inputRange</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token number" style=color:#5a9bcf>0</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>360</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> outputRange</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token string" style=color:#8dc891>'0deg'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'360deg'</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 43<p><code>interpolate()</code> also supports arbitrary easing functions, many of which are already implemented in the <a href=/docs/easing><code>Easing</code></a> module. <code>interpolate()</code> also has configurable behavior for extrapolating the <code>outputRange</code>. You can set the extrapolation by setting the <code>extrapolate</code>, <code>extrapolateLeft</code>, or <code>extrapolateRight</code> options. The default value is <code>extend</code> but you can use <code>clamp</code> to prevent the output value from exceeding <code>outputRange</code>.</p> 44<h3 class="anchor anchorWithStickyNavbar_JmGV" id=tracking-dynamic-values>Tracking dynamic values<a href=#tracking-dynamic-values class=hash-link aria-label="Direct link to Tracking dynamic values" title="Direct link to Tracking dynamic values">​</a></h3> 45<p>Animated values can also track other values by setting the <code>toValue</code> of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a <code>spring()</code> pinned on another animated value, or with <code>timing()</code> and a <code>duration</code> of 0 for rigid tracking. They can also be composed with interpolations:</p> 46<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token maybe-class-name">Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>spring</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">follower</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">toValue</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> leader</span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>start</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token maybe-class-name">Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>timing</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">opacity</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> toValue</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> pan</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">x</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>interpolate</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> inputRange</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token number" style=color:#5a9bcf>0</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>300</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> outputRange</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token number" style=color:#5a9bcf>1</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> useNativeDriver</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>true</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>start</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 47<p>The <code>leader</code> and <code>follower</code> animated values would be implemented using <code>Animated.ValueXY()</code>. <code>ValueXY</code> is a handy way to deal with 2D interactions, such as panning or dragging. It is a basic wrapper that contains two <code>Animated.Value</code> instances and some helper functions that call through to them, making <code>ValueXY</code> a drop-in replacement for <code>Value</code> in many cases. It allows us to track both x and y values in the example above.</p> 48<h3 class="anchor anchorWithStickyNavbar_JmGV" id=tracking-gestures>Tracking gestures<a href=#tracking-gestures class=hash-link aria-label="Direct link to Tracking gestures" title="Direct link to Tracking gestures">​</a></h3> 49<p>Gestures, like panning or scrolling, and other events can map directly to animated values using <a href=/docs/animated#event><code>Animated.event</code></a>. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.</p> 50<p>For example, when working with horizontal scrolling gestures, you would do the following in order to map <code>event.nativeEvent.contentOffset.x</code> to <code>scrollX</code> (an <code>Animated.Value</code>):</p> 51<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain"> onScroll</span><span class="token operator" style=color:#fc929e>=</span><span class="token punctuation" style=color:#657b83>{</span><span class="token maybe-class-name">Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>event</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// scrollX = e.nativeEvent.contentOffset.x</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">nativeEvent</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> contentOffset</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> x</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> scrollX</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div> 52<p>The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the <code>Animated.event</code> used in the <code>ScrollView</code></p> 53<h4 class="anchor anchorWithStickyNavbar_JmGV" id=scrollview-with-animated-event-example>ScrollView with Animated Event Example<a href=#scrollview-with-animated-event-example class=hash-link aria-label="Direct link to ScrollView with Animated Event Example" title="Direct link to ScrollView with Animated Event Example">​</a></h4> 54<div class=snack-player data-snack-name=Animated data-snack-description="Example usage" data-snack-files="%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%20from%20'react'%3B%5Cnimport%20%7B%5Cn%20%20ScrollView%2C%5Cn%20%20Text%2C%5Cn%20%20StyleSheet%2C%5Cn%20%20View%2C%5Cn%20%20ImageBackground%2C%5Cn%20%20Animated%2C%5Cn%20%20useWindowDimensions%2C%5Cn%20%20useAnimatedValue%2C%5Cn%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20images%20%3D%20new%20Array(6).fill(%5Cn%20%20'https%3A%2F%2Fimages.unsplash.com%2Fphoto-1556740749-887f6717d7e4'%2C%5Cn)%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20scrollX%20%3D%20useAnimatedValue(0)%3B%5Cn%5Cn%20%20const%20%7Bwidth%3A%20windowWidth%7D%20%3D%20useWindowDimensions()%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.scrollContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CScrollView%5Cn%20%20%20%20%20%20%20%20%20%20%20%20horizontal%3D%7Btrue%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20pagingEnabled%5Cn%20%20%20%20%20%20%20%20%20%20%20%20showsHorizontalScrollIndicator%3D%7Bfalse%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20onScroll%3D%7BAnimated.event(%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20nativeEvent%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20contentOffset%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x%3A%20scrollX%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%5D)%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20scrollEventThrottle%3D%7B1%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%7Bwidth%3A%20windowWidth%2C%20height%3A%20250%7D%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3D%7BimageIndex%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CImageBackground%20source%3D%7B%7Buri%3A%20image%7D%7D%20style%3D%7Bstyles.card%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.textContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.infoText%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B'Image%20-%20'%20%2B%20imageIndex%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FImageBackground%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D)%7D%5Cn%20%20%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.indicatorContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7Bimages.map((image%2C%20imageIndex)%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20const%20width%20%3D%20scrollX.interpolate(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20inputRange%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20-%201)%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20imageIndex%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20windowWidth%20*%20(imageIndex%20%2B%201)%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20outputRange%3A%20%5B8%2C%2016%2C%208%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20extrapolate%3A%20'clamp'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CAnimated.View%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20key%3D%7BimageIndex%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.normalDot%2C%20%7Bwidth%7D%5D%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D)%7D%5Cn%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%20%20%3C%2FSafeAreaProvider%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%20%20scrollContainer%3A%20%7B%5Cn%20%20%20%20height%3A%20300%2C%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%20%20card%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20marginVertical%3A%204%2C%5Cn%20%20%20%20marginHorizontal%3A%2016%2C%5Cn%20%20%20%20borderRadius%3A%205%2C%5Cn%20%20%20%20overflow%3A%20'hidden'%2C%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%20%20textContainer%3A%20%7B%5Cn%20%20%20%20backgroundColor%3A%20'rgba(0%2C0%2C0%2C%200.7)'%2C%5Cn%20%20%20%20paddingHorizontal%3A%2024%2C%5Cn%20%20%20%20paddingVertical%3A%208%2C%5Cn%20%20%20%20borderRadius%3A%205%2C%5Cn%20%20%7D%2C%5Cn%20%20infoText%3A%20%7B%5Cn%20%20%20%20color%3A%20'white'%2C%5Cn%20%20%20%20fontSize%3A%2016%2C%5Cn%20%20%20%20fontWeight%3A%20'bold'%2C%5Cn%20%20%7D%2C%5Cn%20%20normalDot%3A%20%7B%5Cn%20%20%20%20height%3A%208%2C%5Cn%20%20%20%20width%3A%208%2C%5Cn%20%20%20%20borderRadius%3A%204%2C%5Cn%20%20%20%20backgroundColor%3A%20'silver'%2C%5Cn%20%20%20%20marginHorizontal%3A%204%2C%5Cn%20%20%7D%2C%5Cn%20%20indicatorContainer%3A%20%7B%5Cn%20%20%20%20flexDirection%3A%20'row'%2C%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div> 55<p>When using <code>PanResponder</code>, you could use the following code to extract the x and y positions from <code>gestureState.dx</code> and <code>gestureState.dy</code>. We use a <code>null</code> in the first position of the array, as we are only interested in the second argument passed to the <code>PanResponder</code> handler, which is the <code>gestureState</code>.</p> 56<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">onPanResponderMove</span><span class="token operator" style=color:#fc929e>=</span><span class="token punctuation" style=color:#657b83>{</span><span class="token maybe-class-name">Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>event</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token keyword" style=color:#c5a5c5>null</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// ignore the native event</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// extract dx and dy from gestureState</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// like 'pan.x = gestureState.dx, pan.y = gestureState.dy'</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">dx</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> pan</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">x</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> dy</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> pan</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">y</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div> 57<h4 class="anchor anchorWithStickyNavbar_JmGV" id=panresponder-with-animated-event-example>PanResponder with Animated Event Example<a href=#panresponder-with-animated-event-example class=hash-link aria-label="Direct link to PanResponder with Animated Event Example" title="Direct link to PanResponder with Animated Event Example">​</a></h4> 58<div class=snack-player data-snack-name=Animated data-snack-description="Example usage" data-snack-files="%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseRef%7D%20from%20'react'%3B%5Cnimport%20%7BAnimated%2C%20View%2C%20StyleSheet%2C%20PanResponder%2C%20Text%7D%20from%20'react-native'%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20pan%20%3D%20useRef(new%20Animated.ValueXY()).current%3B%5Cn%20%20const%20panResponder%20%3D%20useRef(%5Cn%20%20%20%20PanResponder.create(%7B%5Cn%20%20%20%20%20%20onMoveShouldSetPanResponder%3A%20()%20%3D%3E%20true%2C%5Cn%20%20%20%20%20%20onPanResponderMove%3A%20Animated.event(%5Bnull%2C%20%7Bdx%3A%20pan.x%2C%20dy%3A%20pan.y%7D%5D)%2C%5Cn%20%20%20%20%20%20onPanResponderRelease%3A%20()%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20Animated.spring(pan%2C%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20toValue%3A%20%7Bx%3A%200%2C%20y%3A%200%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20useNativeDriver%3A%20true%2C%5Cn%20%20%20%20%20%20%20%20%7D).start()%3B%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%7D)%2C%5Cn%20%20).current%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.titleText%7D%3EDrag%20%26%20Release%20this%20box!%3C%2FText%3E%5Cn%20%20%20%20%20%20%3CAnimated.View%5Cn%20%20%20%20%20%20%20%20style%3D%7B%7B%5Cn%20%20%20%20%20%20%20%20%20%20transform%3A%20%5B%7BtranslateX%3A%20pan.x%7D%2C%20%7BtranslateY%3A%20pan.y%7D%5D%2C%5Cn%20%20%20%20%20%20%20%20%7D%7D%5Cn%20%20%20%20%20%20%20%20%7B...panResponder.panHandlers%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.box%7D%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FAnimated.View%3E%5Cn%20%20%20%20%3C%2FView%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%20%20titleText%3A%20%7B%5Cn%20%20%20%20fontSize%3A%2014%2C%5Cn%20%20%20%20lineHeight%3A%2024%2C%5Cn%20%20%20%20fontWeight%3A%20'bold'%2C%5Cn%20%20%7D%2C%5Cn%20%20box%3A%20%7B%5Cn%20%20%20%20height%3A%20150%2C%5Cn%20%20%20%20width%3A%20150%2C%5Cn%20%20%20%20backgroundColor%3A%20'blue'%2C%5Cn%20%20%20%20borderRadius%3A%205%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android,web data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div> 59<h3 class="anchor anchorWithStickyNavbar_JmGV" id=responding-to-the-current-animation-value>Responding to the current animation value<a href=#responding-to-the-current-animation-value class=hash-link aria-label="Direct link to Responding to the current animation value" title="Direct link to Responding to the current animation value">​</a></h3> 60<p>You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:</p> 61<ul> 62<li><code>spring.stopAnimation(callback)</code> will stop the animation and invoke <code>callback</code> with the final value. This is useful when making gesture transitions.</li> 63<li><code>spring.addListener(callback)</code> will invoke <code>callback</code> asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.</li> 64</ul> 65<p><code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p> 66<h3 class="anchor anchorWithStickyNavbar_JmGV" id=using-the-native-driver>Using the native driver<a href=#using-the-native-driver class=hash-link aria-label="Direct link to Using the native driver" title="Direct link to Using the native driver">​</a></h3> 67<p>The <code>Animated</code> API is designed to be serializable. By using the <a href=/blog/2017/02/14/using-native-driver-for-animated>native driver</a>, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p> 68<p>Using the native driver for normal animations can be accomplished by setting <code>useNativeDriver: true</code> in animation config when starting it. Animations without a <code>useNativeDriver</code> property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).</p> 69<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token maybe-class-name">Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>timing</span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">state</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">animatedValue</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> toValue</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>1</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> duration</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>500</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> useNativeDriver</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>true</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// &lt;-- Set this to true</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>start</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 70<p>Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.</p> 71<p>The native driver also works with <code>Animated.event</code>. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.</p> 72<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token operator" style=color:#fc929e>&lt;</span><span class="token maybe-class-name">Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access maybe-class-name">ScrollView</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// &lt;-- Use the Animated ScrollView wrapper</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> onScroll</span><span class="token operator" style=color:#fc929e>=</span><span class="token punctuation" style=color:#657b83>{</span><span class="token maybe-class-name">Animated</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>event</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> nativeEvent</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> contentOffset</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">y</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">state</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">animatedValue</span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">useNativeDriver</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>true</span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// &lt;-- Set this to true</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>}</span><span class="token operator" style=color:#fc929e>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">content</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>Animated.ScrollView</span><span class="token tag punctuation" style=color:#657b83>></span><br></span></code></pre></div></div> 73<p>You can see the native driver in action by running the <a href=https://github.com/facebook/react-native/blob/main/packages/rn-tester/ target=_blank rel="noopener noreferrer">RNTester app</a>, then loading the Native Animated Example. You can also take a look at the <a href=https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js target=_blank rel="noopener noreferrer">source code</a> to learn how these examples were produced.</p> 74<h4 class="anchor anchorWithStickyNavbar_JmGV" id=caveats>Caveats<a href=#caveats class=hash-link aria-label="Direct link to Caveats" title="Direct link to Caveats">​</a></h4> 75<p>Not everything you can do with <code>Animated</code> is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like <code>transform</code> and <code>opacity</code> will work, but Flexbox and position properties will not. When using <code>Animated.event</code>, it will only work with direct events and not bubbling events. This means it does not work with <code>PanResponder</code> but does work with things like <code>ScrollView#onScroll</code>.</p> 76<p>When an animation is running, it can prevent <code>VirtualizedList</code> components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use <code>isInteraction: false</code> in your animation's config to prevent this issue.</p> 77<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bear-in-mind>Bear in mind<a href=#bear-in-mind class=hash-link aria-label="Direct link to Bear in mind" title="Direct link to Bear in mind">​</a></h3> 78<p>While using transform styles such as <code>rotateY</code>, <code>rotateX</code>, and others ensure the transform style <code>perspective</code> is in place. At this time some animations may not render on Android without it. Example below.</p> 79<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>Animated.View</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> transform</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>[</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>scale</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript keyword" style=color:#c5a5c5>this</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>state</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>scale</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>rotateY</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript keyword" style=color:#c5a5c5>this</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>state</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>rotateY</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>perspective</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript number" style=color:#5a9bcf>1000</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript comment" style=color:#93a1a1>// without this line this Animation will not render on Android while working fine on iOS</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>]</span><span class="token tag script language-javascript punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e></span><span class="token tag punctuation" style=color:#657b83>/></span><br></span></code></pre></div></div> 80<h3 class="anchor anchorWithStickyNavbar_JmGV" id=additional-examples>Additional examples<a href=#additional-examples class=hash-link aria-label="Direct link to Additional examples" title="Direct link to Additional examples">​</a></h3> 81<p>The RNTester app has various examples of <code>Animated</code> in use:</p> 82<ul> 83<li><a href=https://github.com/facebook/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp target=_blank rel="noopener noreferrer">AnimatedGratuitousApp</a></li> 84<li><a href=https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js target=_blank rel="noopener noreferrer">NativeAnimationsExample</a></li> 85</ul> 86<h2 class="anchor anchorWithStickyNavbar_JmGV" id=layoutanimation-api><code>LayoutAnimation</code> API<a href=#layoutanimation-api class=hash-link aria-label="Direct link to layoutanimation-api" title="Direct link to layoutanimation-api">​</a></h2> 87<p><code>LayoutAnimation</code> allows you to globally configure <code>create</code> and <code>update</code> animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.</p> 88<p>Note that although <code>LayoutAnimation</code> is very powerful and can be quite useful, it provides much less control than <code>Animated</code> and other animation libraries, so you may need to use another approach if you can't get <code>LayoutAnimation</code> to do what you want.</p> 89<p>Note that in order to get this to work on <strong>Android</strong> you need to set the following flags via <code>UIManager</code>:</p> 90<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token maybe-class-name">UIManager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>setLayoutAnimationEnabledExperimental</span><span class="token punctuation" style=color:#657b83>(</span><span class="token boolean" style=color:#ff8b50>true</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 91<div class=snack-player data-snack-name=LayoutAnimations data-snack-description="Example usage" data-snack-files="%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%20from%20'react'%3B%5Cnimport%20%7B%5Cn%20%20NativeModules%2C%5Cn%20%20LayoutAnimation%2C%5Cn%20%20Text%2C%5Cn%20%20TouchableOpacity%2C%5Cn%20%20StyleSheet%2C%5Cn%20%20View%2C%5Cn%7D%20from%20'react-native'%3B%5Cn%5Cnconst%20%7BUIManager%7D%20%3D%20NativeModules%3B%5Cn%5CnUIManager.setLayoutAnimationEnabledExperimental%20%26%26%5Cn%20%20UIManager.setLayoutAnimationEnabledExperimental(true)%3B%5Cn%5Cnexport%20default%20class%20App%20extends%20React.Component%20%7B%5Cn%20%20state%20%3D%20%7B%5Cn%20%20%20%20w%3A%20100%2C%5Cn%20%20%20%20h%3A%20100%2C%5Cn%20%20%7D%3B%5Cn%5Cn%20%20_onPress%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20%2F%2F%20Animate%20the%20update%5Cn%20%20%20%20LayoutAnimation.spring()%3B%5Cn%20%20%20%20this.setState(%7Bw%3A%20this.state.w%20%2B%2015%2C%20h%3A%20this.state.h%20%2B%2015%7D)%3B%5Cn%20%20%7D%3B%5Cn%5Cn%20%20render()%20%7B%5Cn%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CView%5Cn%20%20%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.box%2C%20%7Bwidth%3A%20this.state.w%2C%20height%3A%20this.state.h%7D%5D%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%3CTouchableOpacity%20onPress%3D%7Bthis._onPress%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.button%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.buttonText%7D%3EPress%20me!%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20)%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%20%20box%3A%20%7B%5Cn%20%20%20%20width%3A%20200%2C%5Cn%20%20%20%20height%3A%20200%2C%5Cn%20%20%20%20backgroundColor%3A%20'red'%2C%5Cn%20%20%7D%2C%5Cn%20%20button%3A%20%7B%5Cn%20%20%20%20backgroundColor%3A%20'black'%2C%5Cn%20%20%20%20paddingHorizontal%3A%2020%2C%5Cn%20%20%20%20paddingVertical%3A%2015%2C%5Cn%20%20%20%20marginTop%3A%2015%2C%5Cn%20%20%7D%2C%5Cn%20%20buttonText%3A%20%7B%5Cn%20%20%20%20color%3A%20'%23fff'%2C%5Cn%20%20%20%20fontWeight%3A%20'bold'%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div> 92<p>This example uses a preset value, you can customize the animations as you need, see <a href=https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js target=_blank rel="noopener noreferrer">LayoutAnimation.js</a> for more information.</p> 93<h2 class="anchor anchorWithStickyNavbar_JmGV" id=additional-notes>Additional notes<a href=#additional-notes class=hash-link aria-label="Direct link to Additional notes" title="Direct link to Additional notes">​</a></h2> 94<h3 class="anchor anchorWithStickyNavbar_JmGV" id=requestanimationframe><code>requestAnimationFrame</code><a href=#requestanimationframe class=hash-link aria-label="Direct link to requestanimationframe" title="Direct link to requestanimationframe">​</a></h3> 95<p><code>requestAnimationFrame</code> is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.</p> 96<h3 class="anchor anchorWithStickyNavbar_JmGV" id=setnativeprops><code>setNativeProps</code><a href=#setnativeprops class=hash-link aria-label="Direct link to setnativeprops" title="Direct link to setnativeprops">​</a></h3> 97<p>As mentioned <a href=/docs/legacy/direct-manipulation>in the Direct Manipulation section</a>, <code>setNativeProps</code> allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to <code>setState</code> and re-render the component hierarchy.</p> 98<p>We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with <code>shouldComponentUpdate</code>.</p> 99<p>If you find your animations with dropping frames (performing below 60 frames per second), look into using <code>setNativeProps</code> or <code>shouldComponentUpdate</code> to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread <a href=/blog/2017/02/14/using-native-driver-for-animated>with the useNativeDriver option</a>. You may also want to defer any computationally intensive work until after animations are complete, using the <a href=/docs/interactionmanager>InteractionManager</a>. You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.</div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class=editButtons_t0bR><a href=https://github.com/facebook/react-native-website/edit/main/docs/animations.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for next release</a><a href=https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.79/animations.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for current release</a></div><div class=lastUpdated_VsjB><span class=theme-last-updated>Last updated<!-- --> on <b><time datetime=2025-04-14T14:14:17.000Z itemprop=dateModified>Apr 14, 2025</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/navigation><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Navigating Between Screens</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/gesture-responder-system><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Gesture Responder System</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#animated-api class="table-of-contents__link toc-highlight"><code>Animated</code> API</a><ul><li><a href=#configuring-animations class="table-of-contents__link toc-highlight">Configuring animations</a><li><a href=#composing-animations class="table-of-contents__link toc-highlight">Composing animations</a><li><a href=#combining-animated-values class="table-of-contents__link toc-highlight">Combining animated values</a><li><a href=#interpolation class="table-of-contents__link toc-highlight">Interpolation</a><li><a href=#tracking-dynamic-values class="table-of-contents__link toc-highlight">Tracking dynamic values</a><li><a href=#tracking-gestures class="table-of-contents__link toc-highlight">Tracking gestures</a><li><a href=#responding-to-the-current-animation-value class="table-of-contents__link toc-highlight">Responding to the current animation value</a><li><a href=#using-the-native-driver class="table-of-contents__link toc-highlight">Using the native driver</a><li><a href=#bear-in-mind class="table-of-contents__link toc-highlight">Bear in mind</a><li><a href=#additional-examples class="table-of-contents__link toc-highlight">Additional examples</a></ul><li><a href=#layoutanimation-api class="table-of-contents__link toc-highlight"><code>LayoutAnimation</code> API</a><li><a href=#additional-notes class="table-of-contents__link toc-highlight">Additional notes</a><ul><li><a href=#requestanimationframe class="table-of-contents__link toc-highlight"><code>requestAnimationFrame</code></a><li><a href=#setnativeprops class="table-of-contents__link toc-highlight"><code>setNativeProps</code></a></ul></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Develop</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Guides</a><li class=footer__item><a class=footer__link-item href=/docs/components-and-apis>Components</a><li class=footer__item><a class=footer__link-item href=/docs/accessibilityinfo>APIs</a><li class=footer__item><a class=footer__link-item href=/architecture/overview>Architecture</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Participate</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/showcase>Showcase</a><li class=footer__item><a class=footer__link-item href=/contributing/overview>Contributing</a><li class=footer__item><a class=footer__link-item href=/community/overview>Community</a><li class=footer__item><a href=https://reactnative.directory/ target=_blank rel="noopener noreferrer" class=footer__link-item>Directory<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://stackoverflow.com/questions/tagged/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>Stack Overflow<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Find us</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/blog>Blog</a><li class=footer__item><a href=https://x.com/reactnative target=_blank rel="noopener noreferrer" class=footer__link-item>X<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://bsky.app/profile/reactnative.dev target=_blank rel="noopener noreferrer" class=footer__link-item>Bluesky<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Explore More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://react.dev/ target=_blank rel="noopener noreferrer" class=footer__link-item>ReactJS<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/privacy/ target=_blank rel="noopener noreferrer" class=footer__link-item>Privacy Policy<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/terms/ target=_blank rel="noopener noreferrer" class=footer__link-item>Terms of Service<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=margin-bottom--sm><a href=https://opensource.fb.com/ rel="noopener noreferrer" class=footerLogoLink_tutC><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--light_hHel"><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--dark_yETr"></a></div><div class=footer__copyright>Copyright © 2025 Meta Platforms, Inc.</div></div></div></footer></div>