.cache/fetch/reactnative.dev/docs_animated.html at main · kitten.sh/rn-llms-txt-gen

this repo has no description
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_animated.html
at main 101 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-animated" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Animated · 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/animated><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="Animated · React Native"><meta data-rh=true name=description content="The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, configurable transforms in between, and start/stop methods to control time-based animation execution."><meta data-rh=true property=og:description content="The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, configurable transforms in between, and start/stop methods to control time-based animation execution."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/animated><link data-rh=true rel=alternate href=https://reactnative.dev/docs/animated hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/animated 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/animated>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/animated>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/animated>0.79</a><li><a class=dropdown__link href=/docs/0.78/animated>0.78</a><li><a class=dropdown__link href=/docs/0.77/animated>0.77</a><li><a class=dropdown__link href=/docs/0.76/animated>0.76</a><li><a class=dropdown__link href=/docs/0.75/animated>0.75</a><li><a class=dropdown__link href=/docs/0.74/animated>0.74</a><li><a class=dropdown__link href=/docs/0.73/animated>0.73</a><li><a class=dropdown__link href=/docs/0.72/animated>0.72</a><li><a class=dropdown__link href=/docs/0.71/animated>0.71</a><li><a class=dropdown__link href=/docs/0.70/animated>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 class=dropdown__link href=/docs/getting-started>Guides</a><li><a class=dropdown__link href=/docs/components-and-apis>Components</a><li><a aria-current=page class="dropdown__link dropdown__link--active" 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"><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/accessibilityinfo>APIs</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/accessibilityinfo>AccessibilityInfo</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/alert>Alert</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/animated>Animated</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/animatedvalue>Animated.Value</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/animatedvaluexy>Animated.ValueXY</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/appearance>Appearance</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/appregistry>AppRegistry</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/appstate>AppState</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/devsettings>DevSettings</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/dimensions>Dimensions</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/easing>Easing</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/interactionmanager>InteractionManager</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/keyboard>Keyboard</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/layoutanimation>LayoutAnimation</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/linking>Linking</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/panresponder>PanResponder</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/pixelratio>PixelRatio</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/platform>Platform</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/platformcolor>PlatformColor</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/roottag>RootTag</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/share>Share</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/stylesheet>StyleSheet</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/systrace>Systrace</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/transforms>Transforms</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/vibration>Vibration</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--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/usecolorscheme>Hooks</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/usecolorscheme>useColorScheme</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/usewindowdimensions>useWindowDimensions</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 menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/backhandler>Android APIs</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/backhandler>BackHandler</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/permissionsandroid>PermissionsAndroid</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/toastandroid>ToastAndroid</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 menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/actionsheetios>iOS APIs</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/actionsheetios>ActionSheetIOS</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/dynamiccolorios>DynamicColorIOS</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/settings>Settings</a></ul></ul></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>Animated</h1></header><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and painless to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, configurable transforms in between, and <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
  5<p>The core workflow for creating an animation is to create an <code>Animated.Value</code>, hook it up to one or more style attributes of an animated component, and then drive updates via animations using <code>Animated.timing()</code>.</p>
  6<blockquote>
  7<p>Don't modify the animated value directly. You can use the <a href=https://reactjs.org/docs/hooks-reference.html#useref target=_blank rel="noopener noreferrer"><code>useRef</code> Hook</a> to return a mutable ref object. This ref object's <code>current</code> property is initialized as the given argument and persists throughout the component lifecycle.</p>
  8</blockquote>
  9<h2 class="anchor anchorWithStickyNavbar_JmGV" id=example>Example<a href=#example class=hash-link aria-label="Direct link to Example" title="Direct link to Example"></a></h2>
 10<p>The following example contains a <code>View</code> which will fade in and fade out based on the animated value <code>fadeAnim</code></p>
 11<div class=snack-player data-snack-name="Animated 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%20from%20'react'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cnimport%20%7B%5Cn%20%20Animated%2C%5Cn%20%20Text%2C%5Cn%20%20View%2C%5Cn%20%20StyleSheet%2C%5Cn%20%20Button%2C%5Cn%20%20useAnimatedValue%2C%5Cn%7D%20from%20'react-native'%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%2F%2F%20fadeAnim%20will%20be%20used%20as%20the%20value%20for%20opacity.%20Initial%20Value%3A%200%5Cn%20%20const%20fadeAnim%20%3D%20useAnimatedValue(0)%3B%5Cn%5Cn%20%20const%20fadeIn%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%201%20in%205%20seconds%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%205000%2C%5Cn%20%20%20%20%20%20useNativeDriver%3A%20true%2C%5Cn%20%20%20%20%7D).start()%3B%5Cn%20%20%7D%3B%5Cn%5Cn%20%20const%20fadeOut%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%200%20in%203%20seconds%5Cn%20%20%20%20Animated.timing(fadeAnim%2C%20%7B%5Cn%20%20%20%20%20%20toValue%3A%200%2C%5Cn%20%20%20%20%20%20duration%3A%203000%2C%5Cn%20%20%20%20%20%20useNativeDriver%3A%20true%2C%5Cn%20%20%20%20%7D).start()%3B%5Cn%20%20%7D%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%3CAnimated.View%5Cn%20%20%20%20%20%20%20%20%20%20style%3D%7B%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20styles.fadingContainer%2C%5Cn%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%2F%2F%20Bind%20opacity%20to%20animated%20value%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%20fadeAnim%2C%5Cn%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%5D%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.fadingText%7D%3EFading%20View!%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FAnimated.View%3E%5Cn%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonRow%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%5C%22Fade%20In%20View%5C%22%20onPress%3D%7BfadeIn%7D%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%5C%22Fade%20Out%20View%5C%22%20onPress%3D%7BfadeOut%7D%20%2F%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%20fadingContainer%3A%20%7B%5Cn%20%20%20%20padding%3A%2020%2C%5Cn%20%20%20%20backgroundColor%3A%20'powderblue'%2C%5Cn%20%20%7D%2C%5Cn%20%20fadingText%3A%20%7B%5Cn%20%20%20%20fontSize%3A%2028%2C%5Cn%20%20%7D%2C%5Cn%20%20buttonRow%3A%20%7B%5Cn%20%20%20%20flexBasis%3A%20100%2C%5Cn%20%20%20%20justifyContent%3A%20'space-evenly'%2C%5Cn%20%20%20%20marginVertical%3A%2016%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>
 12<p>Refer to the <a href=/docs/animations#animated-api>Animations</a> guide to see additional examples of <code>Animated</code> in action.</p>
 13<h2 class="anchor anchorWithStickyNavbar_JmGV" id=overview>Overview<a href=#overview class=hash-link aria-label="Direct link to Overview" title="Direct link to Overview"></a></h2>
 14<p>There are two value types you can use with <code>Animated</code>:</p>
 15<ul>
 16<li><a href=/docs/animated#value><code>Animated.Value()</code></a> for single values</li>
 17<li><a href=/docs/animated#valuexy><code>Animated.ValueXY()</code></a> for vectors</li>
 18</ul>
 19<p><code>Animated.Value</code> can bind to style properties or other props, and can be interpolated as well. A single <code>Animated.Value</code> can drive any number of properties.</p>
 20<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>
 21<p><code>Animated</code> provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:</p>
 22<ul>
 23<li><a href=/docs/animated#decay><code>Animated.decay()</code></a> starts with an initial velocity and gradually slows to a stop.</li>
 24<li><a href=/docs/animated#spring><code>Animated.spring()</code></a> provides a basic spring physics model.</li>
 25<li><a href=/docs/animated#timing><code>Animated.timing()</code></a> animates a value over time using <a href=/docs/easing>easing functions</a>.</li>
 26</ul>
 27<p>In most cases, you will be using <code>timing()</code>. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.</p>
 28<h3 class="anchor anchorWithStickyNavbar_JmGV" id=working-with-animations>Working with animations<a href=#working-with-animations class=hash-link aria-label="Direct link to Working with animations" title="Direct link to Working with animations"></a></h3>
 29<p>Animations are started by calling <code>start()</code> on your animation. <code>start()</code> takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with <code>{finished: true}</code>. If the animation is done because <code>stop()</code> was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive <code>{finished: false}</code>.</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 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 punctuation" style=color:#657b83>{</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">finished</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 arrow 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">  </span><span class="token comment" style=color:#93a1a1>/* completion callback */</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>
 31<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>
 32<p>By using the native driver, 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>
 33<p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your animation configuration. See the <a href=/docs/animations#using-the-native-driver>Animations</a> guide to learn more.</p>
 34<h3 class="anchor anchorWithStickyNavbar_JmGV" id=animatable-components>Animatable components<a href=#animatable-components class=hash-link aria-label="Direct link to Animatable components" title="Direct link to Animatable components"></a></h3>
 35<p>Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the React render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
 36<ul>
 37<li><a href=/docs/animated#createanimatedcomponent><code>createAnimatedComponent()</code></a> can be used to make a component animatable.</li>
 38</ul>
 39<p><code>Animated</code> exports the following animatable components using the above wrapper:</p>
 40<ul>
 41<li><code>Animated.Image</code></li>
 42<li><code>Animated.ScrollView</code></li>
 43<li><code>Animated.Text</code></li>
 44<li><code>Animated.View</code></li>
 45<li><code>Animated.FlatList</code></li>
 46<li><code>Animated.SectionList</code></li>
 47</ul>
 48<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>
 49<p>Animations can also be combined in complex ways using composition functions:</p>
 50<ul>
 51<li><a href=/docs/animated#delay><code>Animated.delay()</code></a> starts an animation after a given delay.</li>
 52<li><a href=/docs/animated#parallel><code>Animated.parallel()</code></a> starts a number of animations at the same time.</li>
 53<li><a href=/docs/animated#sequence><code>Animated.sequence()</code></a> starts the animations in order, waiting for each to complete before starting the next.</li>
 54<li><a href=/docs/animated#stagger><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
 55</ul>
 56<p>Animations can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href=/docs/animations#tracking-dynamic-values>Tracking dynamic values</a> in the Animations guide.</p>
 57<p>By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.</p>
 58<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>
 59<p>You can combine two animated values via addition, subtraction, multiplication, division, or modulo to make a new animated value:</p>
 60<ul>
 61<li><a href=/docs/animated#add><code>Animated.add()</code></a></li>
 62<li><a href=/docs/animated#subtract><code>Animated.subtract()</code></a></li>
 63<li><a href=/docs/animated#divide><code>Animated.divide()</code></a></li>
 64<li><a href=/docs/animated#modulo><code>Animated.modulo()</code></a></li>
 65<li><a href=/docs/animated#multiply><code>Animated.multiply()</code></a></li>
 66</ul>
 67<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>
 68<p>The <code>interpolate()</code> function allows input ranges to map to different output ranges. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. It uses linear interpolation by default but also supports easing functions.</p>
 69<ul>
 70<li><a href=/docs/animatedvalue#interpolate><code>interpolate()</code></a></li>
 71</ul>
 72<p>Read more about interpolation in the <a href=/docs/animations#interpolation>Animation</a> guide.</p>
 73<h3 class="anchor anchorWithStickyNavbar_JmGV" id=handling-gestures-and-other-events>Handling gestures and other events<a href=#handling-gestures-and-other-events class=hash-link aria-label="Direct link to Handling gestures and other events" title="Direct link to Handling gestures and other events"></a></h3>
 74<p>Gestures, like panning or scrolling, and other events can map directly to animated values using <code>Animated.event()</code>. 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>
 75<ul>
 76<li><a href=/docs/animated#event><code>Animated.event()</code></a></li>
 77</ul>
 78<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>
 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 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>
 80<hr>
 81<h1>Reference</h1>
 82<h2 class="anchor anchorWithStickyNavbar_JmGV" id=methods>Methods<a href=#methods class=hash-link aria-label="Direct link to Methods" title="Direct link to Methods"></a></h2>
 83<p>When the given value is a ValueXY instead of a Value, each config option may be a vector of the form <code>{x: ..., y: ...}</code> instead of a scalar.</p>
 84<h3 class="anchor anchorWithStickyNavbar_JmGV" id=decay><code>decay()</code><a href=#decay class=hash-link aria-label="Direct link to decay" title="Direct link to decay"></a></h3>
 85<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>decay</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">value</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> config</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">CompositeAnimation</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
 86<p>Animates a value from an initial velocity to zero based on a decay coefficient.</p>
 87<p>Config is an object that may have the following options:</p>
 88<ul>
 89<li><code>velocity</code>: Initial velocity. Required.</li>
 90<li><code>deceleration</code>: Rate of decay. Default 0.997.</li>
 91<li><code>isInteraction</code>: Whether or not this animation creates an "interaction handle" on the <code>InteractionManager</code>. Default true.</li>
 92<li><code>useNativeDriver</code>: Uses the native driver when true. Required.</li>
 93</ul>
 94<hr>
 95<h3 class="anchor anchorWithStickyNavbar_JmGV" id=timing><code>timing()</code><a href=#timing class=hash-link aria-label="Direct link to timing" title="Direct link to timing"></a></h3>
 96<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>timing</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">value</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> config</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">CompositeAnimation</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
 97<p>Animates a value along a timed easing curve. The <a href=/docs/easing><code>Easing</code></a> module has tons of predefined curves, or you can use your own function.</p>
 98<p>Config is an object that may have the following options:</p>
 99<ul>
100<li><code>duration</code>: Length of animation (milliseconds). Default 500.</li>
101<li><code>easing</code>: Easing function to define curve. Default is <code>Easing.inOut(Easing.ease)</code>.</li>
102<li><code>delay</code>: Start the animation after delay (milliseconds). Default 0.</li>
103<li><code>isInteraction</code>: Whether or not this animation creates an "interaction handle" on the <code>InteractionManager</code>. Default true.</li>
104<li><code>useNativeDriver</code>: Uses the native driver when true. Required.</li>
105</ul>
106<hr>
107<h3 class="anchor anchorWithStickyNavbar_JmGV" id=spring><code>spring()</code><a href=#spring class=hash-link aria-label="Direct link to spring" title="Direct link to spring"></a></h3>
108<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>spring</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">value</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> config</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">CompositeAnimation</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
109<p>Animates a value according to an analytical spring model based on <a href=https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator target=_blank rel="noopener noreferrer">damped harmonic oscillation</a>. Tracks velocity state to create fluid motions as the <code>toValue</code> updates, and can be chained together.</p>
110<p>Config is an object that may have the following options.</p>
111<p>Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:</p>
112<p>The friction/tension or bounciness/speed options match the spring model in <a href=https://github.com/facebook/pop target=_blank rel="noopener noreferrer"><code>Facebook Pop</code></a>, <a href=https://github.com/facebookarchive/rebound target=_blank rel="noopener noreferrer">Rebound</a>, and <a href=https://origami.design/ target=_blank rel="noopener noreferrer">Origami</a>.</p>
113<ul>
114<li><code>friction</code>: Controls "bounciness"/overshoot. Default 7.</li>
115<li><code>tension</code>: Controls speed. Default 40.</li>
116<li><code>speed</code>: Controls speed of the animation. Default 12.</li>
117<li><code>bounciness</code>: Controls bounciness. Default 8.</li>
118</ul>
119<p>Specifying stiffness/damping/mass as parameters makes <code>Animated.spring</code> use an analytical spring model based on the motion equations of a <a href=https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator target=_blank rel="noopener noreferrer">damped harmonic oscillator</a>. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation.</p>
120<ul>
121<li><code>stiffness</code>: The spring stiffness coefficient. Default 100.</li>
122<li><code>damping</code>: Defines how the spring’s motion should be damped due to the forces of friction. Default 10.</li>
123<li><code>mass</code>: The mass of the object attached to the end of the spring. Default 1.</li>
124</ul>
125<p>Other configuration options are as follows:</p>
126<ul>
127<li><code>velocity</code>: The initial velocity of the object attached to the spring. Default 0 (object is at rest).</li>
128<li><code>overshootClamping</code>: Boolean indicating whether the spring should be clamped and not bounce. Default false.</li>
129<li><code>restDisplacementThreshold</code>: The threshold of displacement from rest below which the spring should be considered at rest. Default 0.001.</li>
130<li><code>restSpeedThreshold</code>: The speed at which the spring should be considered at rest in pixels per second. Default 0.001.</li>
131<li><code>delay</code>: Start the animation after delay (milliseconds). Default 0.</li>
132<li><code>isInteraction</code>: Whether or not this animation creates an "interaction handle" on the <code>InteractionManager</code>. Default true.</li>
133<li><code>useNativeDriver</code>: Uses the native driver when true. Required.</li>
134</ul>
135<hr>
136<h3 class="anchor anchorWithStickyNavbar_JmGV" id=add><code>add()</code><a href=#add class=hash-link aria-label="Direct link to add" title="Direct link to add"></a></h3>
137<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>add</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">a</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 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 operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">AnimatedAddition</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
138<p>Creates a new Animated value composed from two Animated values added together.</p>
139<hr>
140<h3 class="anchor anchorWithStickyNavbar_JmGV" id=subtract><code>subtract()</code><a href=#subtract class=hash-link aria-label="Direct link to subtract" title="Direct link to subtract"></a></h3>
141<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>subtract</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">a</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 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 operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">AnimatedSubtraction</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
142<p>Creates a new Animated value composed by subtracting the second Animated value from the first Animated value.</p>
143<hr>
144<h3 class="anchor anchorWithStickyNavbar_JmGV" id=divide><code>divide()</code><a href=#divide class=hash-link aria-label="Direct link to divide" title="Direct link to divide"></a></h3>
145<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>divide</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">a</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 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 operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">AnimatedDivision</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
146<p>Creates a new Animated value composed by dividing the first Animated value by the second Animated value.</p>
147<hr>
148<h3 class="anchor anchorWithStickyNavbar_JmGV" id=multiply><code>multiply()</code><a href=#multiply class=hash-link aria-label="Direct link to multiply" title="Direct link to multiply"></a></h3>
149<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>multiply</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">a</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 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 operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">AnimatedMultiplication</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
150<p>Creates a new Animated value composed from two Animated values multiplied together.</p>
151<hr>
152<h3 class="anchor anchorWithStickyNavbar_JmGV" id=modulo><code>modulo()</code><a href=#modulo class=hash-link aria-label="Direct link to modulo" title="Direct link to modulo"></a></h3>
153<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>modulo</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">a</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 plain"> modulus</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">AnimatedModulo</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
154<p>Creates a new Animated value that is the (non-negative) modulo of the provided Animated value</p>
155<hr>
156<h3 class="anchor anchorWithStickyNavbar_JmGV" id=diffclamp><code>diffClamp()</code><a href=#diffclamp class=hash-link aria-label="Direct link to diffclamp" title="Direct link to diffclamp"></a></h3>
157<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>diffClamp</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">a</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 plain"> min</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> max</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">AnimatedDiffClamp</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
158<p>Create a new Animated value that is limited between 2 values. It uses the difference between the last value so even if the value is far from the bounds it will start changing when the value starts getting closer again. (<code>value = clamp(value + diff, min, max)</code>).</p>
159<p>This is useful with scroll events, for example, to show the navbar when scrolling up and to hide it when scrolling down.</p>
160<hr>
161<h3 class="anchor anchorWithStickyNavbar_JmGV" id=delay><code>delay()</code><a href=#delay class=hash-link aria-label="Direct link to delay" title="Direct link to delay"></a></h3>
162<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>delay</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">time</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">CompositeAnimation</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
163<p>Starts an animation after the given delay.</p>
164<hr>
165<h3 class="anchor anchorWithStickyNavbar_JmGV" id=sequence><code>sequence()</code><a href=#sequence class=hash-link aria-label="Direct link to sequence" title="Direct link to sequence"></a></h3>
166<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>sequence</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">animations</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">CompositeAnimation</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 operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">CompositeAnimation</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
167<p>Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started.</p>
168<hr>
169<h3 class="anchor anchorWithStickyNavbar_JmGV" id=parallel><code>parallel()</code><a href=#parallel class=hash-link aria-label="Direct link to parallel" title="Direct link to parallel"></a></h3>
170<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>parallel</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">  animations</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">CompositeAnimation</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">  config</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">ParallelConfig</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 operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">CompositeAnimation</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
171<p>Starts an array of animations all at the same time. By default, if one of the animations is stopped, they will all be stopped. You can override this with the <code>stopTogether</code> flag.</p>
172<hr>
173<h3 class="anchor anchorWithStickyNavbar_JmGV" id=stagger><code>stagger()</code><a href=#stagger class=hash-link aria-label="Direct link to stagger" title="Direct link to stagger"></a></h3>
174<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>stagger</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">  time</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</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">  animations</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">CompositeAnimation</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 operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">CompositeAnimation</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
175<p>Array of animations may run in parallel (overlap), but are started in sequence with successive delays. Nice for doing trailing effects.</p>
176<hr>
177<h3 class="anchor anchorWithStickyNavbar_JmGV" id=loop><code>loop()</code><a href=#loop class=hash-link aria-label="Direct link to loop" title="Direct link to loop"></a></h3>
178<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>loop</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">  animation</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">CompositeAnimation</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">  config</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">LoopAnimationConfig</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 operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">CompositeAnimation</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
179<p>Loops a given animation continuously, so that each time it reaches the end, it resets and begins again from the start. Will loop without blocking the JS thread if the child animation is set to <code>useNativeDriver: true</code>. In addition, loops can prevent <code>VirtualizedList</code>-based components from rendering more rows while the animation is running. You can pass <code>isInteraction: false</code> in the child animation config to fix this.</p>
180<p>Config is an object that may have the following options:</p>
181<ul>
182<li><code>iterations</code>: Number of times the animation should loop. Default <code>-1</code> (infinite).</li>
183</ul>
184<hr>
185<h3 class="anchor anchorWithStickyNavbar_JmGV" id=event><code>event()</code><a href=#event class=hash-link aria-label="Direct link to event" title="Direct link to event"></a></h3>
186<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>static</span><span class="token plain"> </span><span class="token function" 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">  argMapping</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">Mapping</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">  config</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">EventConfig</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 operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token spread operator" style=color:#fc929e>...</span><span class="token plain">args</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>any</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 arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>void</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
187<p>Takes an array of mappings and extracts values from each arg accordingly, then calls <code>setValue</code> on the mapped outputs. e.g.</p>
188<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 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">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">x</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">_scrollX</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 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 function-variable function" style=color:#79b6f2>listener</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">event</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">ScrollEvent</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token console class-name" style=color:#fac863>console</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>log</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">event</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>// Optional async listener</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 spread operator" style=color:#fc929e>...</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">onPanResponderMove</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>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 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>// raw event arg ignored</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"> </span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">_panX</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><span class="token comment" style=color:#93a1a1>// gestureState arg</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 function-variable function" style=color:#79b6f2>listener</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">      event</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">GestureResponderEvent</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">      gestureState</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">PanResponderGestureState</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><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token console class-name" style=color:#fac863>console</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>log</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">event</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> gestureState</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"> </span><span class="token comment" style=color:#93a1a1>// Optional async listener</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>
189<p>Config is an object that may have the following options:</p>
190<ul>
191<li><code>listener</code>: Optional async listener.</li>
192<li><code>useNativeDriver</code>: Uses the native driver when true. Required.</li>
193</ul>
194<hr>
195<h3 class="anchor anchorWithStickyNavbar_JmGV" id=forkevent><code>forkEvent()</code><a href=#forkevent class=hash-link aria-label="Direct link to forkevent" title="Direct link to forkevent"></a></h3>
196<div class="language-jsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>jsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-jsx 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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>forkEvent</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">event</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">AnimatedEvent</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>listener</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token known-class-name class-name" style=color:#fac863>Function</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">AnimatedEvent</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
197<p>Advanced imperative API for snooping on animated events that are passed in through props. It permits to add a new javascript listener to an existing <code>AnimatedEvent</code>. If <code>animatedEvent</code> is a javascript listener, it will merge the 2 listeners into a single one, and if <code>animatedEvent</code> is null/undefined, it will assign the javascript listener directly. Use values directly where possible.</p>
198<hr>
199<h3 class="anchor anchorWithStickyNavbar_JmGV" id=unforkevent><code>unforkEvent()</code><a href=#unforkevent class=hash-link aria-label="Direct link to unforkevent" title="Direct link to unforkevent"></a></h3>
200<div class="language-jsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>jsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-jsx 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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>unforkEvent</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">event</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">AnimatedEvent</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>listener</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token known-class-name class-name" style=color:#fac863>Function</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
201<hr>
202<h3 class="anchor anchorWithStickyNavbar_JmGV" id=start><code>start()</code><a href=#start class=hash-link aria-label="Direct link to start" title="Direct link to start"></a></h3>
203<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>start</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">callback</span><span class="token operator" style=color:#fc929e>?</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">result</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">finished</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>boolean</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 arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>void</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
204<p>Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done or when the animation is done because stop() was called on it before it could finish.</p>
205<p><strong>Parameters:</strong></p>
206<table><thead><tr><th>Name<th>Type<th>Required<th>Description<tbody><tr><td>callback<td><code>(result: {finished: boolean}) => void</code><td>No<td>Function that will be called after the animation finished running normally or when the animation is done because stop() was called on it before it could finish</table>
207<p>Start example with callback:</p>
208<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 punctuation" style=color:#657b83>{</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">finished</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 arrow 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">  </span><span class="token comment" style=color:#93a1a1>/* completion callback */</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>
209<hr>
210<h3 class="anchor anchorWithStickyNavbar_JmGV" id=stop><code>stop()</code><a href=#stop class=hash-link aria-label="Direct link to stop" title="Direct link to stop"></a></h3>
211<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>stop</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>
212<p>Stops any running animation.</p>
213<hr>
214<h3 class="anchor anchorWithStickyNavbar_JmGV" id=reset><code>reset()</code><a href=#reset class=hash-link aria-label="Direct link to reset" title="Direct link to reset"></a></h3>
215<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>static</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>reset</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>
216<p>Stops any running animation and resets the value to its original.</p>
217<h2 class="anchor anchorWithStickyNavbar_JmGV" id=properties>Properties<a href=#properties class=hash-link aria-label="Direct link to Properties" title="Direct link to Properties"></a></h2>
218<h3 class="anchor anchorWithStickyNavbar_JmGV" id=value><code>Value</code><a href=#value class=hash-link aria-label="Direct link to value" title="Direct link to value"></a></h3>
219<p>Standard value class for driving animations. Typically initialized with <code>useAnimatedValue(0);</code> or <code>new Animated.Value(0);</code> in class components.</p>
220<p>You can read more about <code>Animated.Value</code> API on the separate <a href=/docs/animatedvalue>page</a>.</p>
221<hr>
222<h3 class="anchor anchorWithStickyNavbar_JmGV" id=valuexy><code>ValueXY</code><a href=#valuexy class=hash-link aria-label="Direct link to valuexy" title="Direct link to valuexy"></a></h3>
223<p>2D value class for driving 2D animations, such as pan gestures.</p>
224<p>You can read more about <code>Animated.ValueXY</code> API on the separate <a href=/docs/animatedvaluexy>page</a>.</p>
225<hr>
226<h3 class="anchor anchorWithStickyNavbar_JmGV" id=interpolation-1><code>Interpolation</code><a href=#interpolation-1 class=hash-link aria-label="Direct link to interpolation-1" title="Direct link to interpolation-1"></a></h3>
227<p>Exported to use the Interpolation type in flow.</p>
228<hr>
229<h3 class="anchor anchorWithStickyNavbar_JmGV" id=node><code>Node</code><a href=#node class=hash-link aria-label="Direct link to node" title="Direct link to node"></a></h3>
230<p>Exported for ease of type checking. All animated values derive from this class.</p>
231<hr>
232<h3 class="anchor anchorWithStickyNavbar_JmGV" id=createanimatedcomponent><code>createAnimatedComponent</code><a href=#createanimatedcomponent class=hash-link aria-label="Direct link to createanimatedcomponent" title="Direct link to createanimatedcomponent"></a></h3>
233<p>Make any React component Animatable. Used to create <code>Animated.View</code>, etc.</p>
234<hr>
235<h3 class="anchor anchorWithStickyNavbar_JmGV" id=attachnativeevent><code>attachNativeEvent</code><a href=#attachnativeevent class=hash-link aria-label="Direct link to attachnativeevent" title="Direct link to attachnativeevent"></a></h3>
236<p>Imperative API to attach an animated value to an event on a view. Prefer using <code>Animated.event</code> with <code>useNativeDriver: true</code> if possible.</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/animated.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/animated.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/alert><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Alert</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/animatedvalue><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Animated.Value</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=#example class="table-of-contents__link toc-highlight">Example</a><li><a href=#overview class="table-of-contents__link toc-highlight">Overview</a><ul><li><a href=#configuring-animations class="table-of-contents__link toc-highlight">Configuring animations</a><li><a href=#working-with-animations class="table-of-contents__link toc-highlight">Working with animations</a><li><a href=#using-the-native-driver class="table-of-contents__link toc-highlight">Using the native driver</a><li><a href=#animatable-components class="table-of-contents__link toc-highlight">Animatable components</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=#handling-gestures-and-other-events class="table-of-contents__link toc-highlight">Handling gestures and other events</a></ul><li><a href=#methods class="table-of-contents__link toc-highlight">Methods</a><ul><li><a href=#decay class="table-of-contents__link toc-highlight"><code>decay()</code></a><li><a href=#timing class="table-of-contents__link toc-highlight"><code>timing()</code></a><li><a href=#spring class="table-of-contents__link toc-highlight"><code>spring()</code></a><li><a href=#add class="table-of-contents__link toc-highlight"><code>add()</code></a><li><a href=#subtract class="table-of-contents__link toc-highlight"><code>subtract()</code></a><li><a href=#divide class="table-of-contents__link toc-highlight"><code>divide()</code></a><li><a href=#multiply class="table-of-contents__link toc-highlight"><code>multiply()</code></a><li><a href=#modulo class="table-of-contents__link toc-highlight"><code>modulo()</code></a><li><a href=#diffclamp class="table-of-contents__link toc-highlight"><code>diffClamp()</code></a><li><a href=#delay class="table-of-contents__link toc-highlight"><code>delay()</code></a><li><a href=#sequence class="table-of-contents__link toc-highlight"><code>sequence()</code></a><li><a href=#parallel class="table-of-contents__link toc-highlight"><code>parallel()</code></a><li><a href=#stagger class="table-of-contents__link toc-highlight"><code>stagger()</code></a><li><a href=#loop class="table-of-contents__link toc-highlight"><code>loop()</code></a><li><a href=#event class="table-of-contents__link toc-highlight"><code>event()</code></a><li><a href=#forkevent class="table-of-contents__link toc-highlight"><code>forkEvent()</code></a><li><a href=#unforkevent class="table-of-contents__link toc-highlight"><code>unforkEvent()</code></a><li><a href=#start class="table-of-contents__link toc-highlight"><code>start()</code></a><li><a href=#stop class="table-of-contents__link toc-highlight"><code>stop()</code></a><li><a href=#reset class="table-of-contents__link toc-highlight"><code>reset()</code></a></ul><li><a href=#properties class="table-of-contents__link toc-highlight">Properties</a><ul><li><a href=#value class="table-of-contents__link toc-highlight"><code>Value</code></a><li><a href=#valuexy class="table-of-contents__link toc-highlight"><code>ValueXY</code></a><li><a href=#interpolation-1 class="table-of-contents__link toc-highlight"><code>Interpolation</code></a><li><a href=#node class="table-of-contents__link toc-highlight"><code>Node</code></a><li><a href=#createanimatedcomponent class="table-of-contents__link toc-highlight"><code>createAnimatedComponent</code></a><li><a href=#attachnativeevent class="table-of-contents__link toc-highlight"><code>attachNativeEvent</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>