https://reactnative.dev/assets/js/1ce05a0f.0c440102.js

1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["12505"],{18194(e,n,t){t.r(n),t.d(n,{metadata:()=>i,default:()=>C,frontMatter:()=>o,contentTitle:()=>r,toc:()=>l,assets:()=>d});var i=JSON.parse('{"id":"layoutanimation","title":"LayoutAnimation","description":"Automatically animates views to their new positions when the next layout happens.","source":"@site/versioned_docs/version-0.77/layoutanimation.md","sourceDirName":".","slug":"/layoutanimation","permalink":"/docs/0.77/layoutanimation","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/layoutanimation.md\\"},{\\"label\\":\\"Edit page for 0.77 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.77/layoutanimation.md\\"}]","tags":[],"version":"0.77","lastUpdatedAt":1737674958000,"frontMatter":{"id":"layoutanimation","title":"LayoutAnimation"},"sidebar":"api","previous":{"title":"Keyboard","permalink":"/docs/0.77/keyboard"},"next":{"title":"Linking","permalink":"/docs/0.77/linking"}}'),a=t(62540),s=t(43023);let o={id:"layoutanimation",title:"LayoutAnimation"},r,d={},l=[{value:"Example",id:"example",level:2},{value:"Methods",id:"methods",level:2},{value:"<code>configureNext()</code>",id:"configurenext",level:3},{value:"Parameters:",id:"parameters",level:4},{value:"<code>create()</code>",id:"create",level:3},{value:"Properties",id:"properties",level:2},{value:"Types",id:"types",level:3},{value:"Properties",id:"properties-1",level:3},{value:"Presets",id:"presets",level:3},{value:"<code>easeInEaseOut</code>",id:"easeineaseout",level:3},{value:"<code>linear</code>",id:"linear",level:3},{value:"<code>spring</code>",id:"spring",level:3}];function c(e){let n={a:"a",code:"code",div:"div",h1:"h1",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:"Automatically animates views to their new positions when the next layout happens."}),"\n",(0,a.jsxs)(n.p,{children:["A common way to use this API is to call it before updating the state hook in functional components and calling ",(0,a.jsx)(n.code,{children:"setState"})," in class components."]}),"\n",(0,a.jsxs)(n.p,{children:["Note that in order to get this to work on ",(0,a.jsx)(n.strong,{children:"Android"})," you need to set the following flags via ",(0,a.jsx)(n.code,{children:"UIManager"}),":"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="JavaScript"',children:"if (Platform.OS === 'android') {\n  if (UIManager.setLayoutAnimationEnabledExperimental) {\n    UIManager.setLayoutAnimationEnabledExperimental(true);\n  }\n}\n"})}),"\n",(0,a.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,a.jsx)(n.div,{className:"snack-player","data-snack-name":"LayoutAnimation Example","data-snack-description":"Example usage","data-snack-files":"%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseState%7D%20from%20'react'%3B%5Cnimport%20%7B%5Cn%20%20LayoutAnimation%2C%5Cn%20%20Platform%2C%5Cn%20%20StyleSheet%2C%5Cn%20%20Text%2C%5Cn%20%20TouchableOpacity%2C%5Cn%20%20UIManager%2C%5Cn%20%20View%2C%5Cn%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnif%20(%5Cn%20%20Platform.OS%20%3D%3D%3D%20'android'%20%26%26%5Cn%20%20UIManager.setLayoutAnimationEnabledExperimental%5Cn)%20%7B%5Cn%20%20UIManager.setLayoutAnimationEnabledExperimental(true)%3B%5Cn%7D%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5Bexpanded%2C%20setExpanded%5D%20%3D%20useState(false)%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyle.container%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CTouchableOpacity%5Cn%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.spring)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20setExpanded(!expanded)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%7D%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%3EPress%20me%20to%20%7Bexpanded%20%3F%20'collapse'%20%3A%20'expand'%7D!%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%5Cn%20%20%20%20%20%20%20%20%7Bexpanded%20%26%26%20(%5Cn%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyle.tile%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CText%3EI%20disappear%20sometimes!%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20)%7D%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%20style%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%20%20gap%3A%2016%2C%5Cn%20%20%7D%2C%5Cn%20%20tile%3A%20%7B%5Cn%20%20%20%20backgroundColor%3A%20'lightgrey'%2C%5Cn%20%20%20%20borderWidth%3A%200.5%2C%5Cn%20%20%20%20borderColor%3A%20'%23d6d7da'%2C%5Cn%20%20%20%20padding%3A%204%2C%5Cn%20%20%7D%2C%5Cn%7D

1)%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":"android,ios","data-snack-theme":"light","data-snack-preview":"true","data-snack-loading":"lazy","data-snack-device-appearance":"light","data-snack-device-frame":"false"}),"\n",(0,a.jsx)(n.hr,{}),"\n",(0,a.jsx)(n.h1,{id:"reference",children:"Reference"}),"\n",(0,a.jsx)(n.h2,{id:"methods",children:"Methods"}),"\n",(0,a.jsx)(n.h3,{id:"configurenext",children:(0,a.jsx)(n.code,{children:"configureNext()"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",metastring:'title="React TSX"',children:"static configureNext(\n  config: LayoutAnimationConfig,\n  onAnimationDidEnd?: () => void,\n  onAnimationDidFail?: () => void,\n);\n"})}),"\n",(0,a.jsx)(n.p,{children:"Schedules an animation to happen on the next layout."}),"\n",(0,a.jsx)(n.h4,{id:"parameters",children:"Parameters:"}),"\n",(0,a.jsxs)(n.table,{children:[(0,a.jsx)(n.thead,{children:(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.th,{children:"Name"}),(0,a.jsx)(n.th,{children:"Type"}),(0,a.jsx)(n.th,{children:"Required"}),(0,a.jsx)(n.th,{children:"Description"})]})}),(0,a.jsxs)(n.tbody,{children:[(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"config"}),(0,a.jsx)(n.td,{children:"object"}),(0,a.jsx)(n.td,{children:"Yes"}),(0,a.jsx)(n.td,{children:"See config description below."})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"onAnimationDidEnd"}),(0,a.jsx)(n.td,{children:"function"}),(0,a.jsx)(n.td,{children:"No"}),(0,a.jsx)(n.td,{children:"Called when the animation finished."})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"onAnimationDidFail"}),(0,a.jsx)(n.td,{children:"function"}),(0,a.jsx)(n.td,{children:"No"}),(0,a.jsx)(n.td,{children:"Called when the animation failed."})]})]})]}),"\n",(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.code,{children:"config"})," parameter is an object with the keys below. ",(0,a.jsx)(n.a,{href:"/docs/0.77/layoutanimation#create",children:(0,a.jsx)(n.code,{children:"create"})})," returns a valid object for ",(0,a.jsx)(n.code,{children:"config"}),", and the ",(0,a.jsx)(n.a,{href:"/docs/0.77/layoutanimation#presets",children:(0,a.jsx)(n.code,{children:"Presets"})})," objects can also all be passed as the ",(0,a.jsx)(n.code,{children:"config"}),"."]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"duration"})," in milliseconds"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"create"}),", optional config for animating in new views"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"update"}),", optional config for animating views that have been updated"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"delete"}),", optional config for animating views as they are removed"]}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:["The config that's passed to ",(0,a.jsx)(n.code,{children:"create"}),", ",(0,a.jsx)(n.code,{children:"update"}),", or ",(0,a.jsx)(n.code,{children:"delete"})," has the following keys:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"type"}),", the ",(0,a.jsx)(n.a,{href:"/docs/0.77/layoutanimation#types",children:"animation type"})," to use"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"property"}),", the ",(0,a.jsx)(n.a,{href:"/docs/0.77/layoutanimation#properties",children:"layout property"})," to animate (optional, but recommended for ",(0,a.jsx)(n.code,{children:"create"})," and ",(0,a.jsx)(n.code,{children:"delete"}),")"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"springDamping"})," (number, optional and only for use with ",(0,a.jsx)(n.code,{children:"type: Type.spring"}),")"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"initialVelocity"})," (number, optional)"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"delay"})," (number, optional)"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"duration"})," (number, optional)"]}),"\n"]}),"\n",(0,a.jsx)(n.hr,{}),"\n",(0,a.jsx)(n.h3,{id:"create",children:(0,a.jsx)(n.code,{children:"create()"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",metastring:'title="React TSX"',children:"static create(duration, type, creationProp)\n"})}),"\n",(0,a.jsxs)(n.p,{children:["Helper that creates an object (with ",(0,a.jsx)(n.code,{children:"create"}),", ",(0,a.jsx)(n.code,{children:"update"}),", and ",(0,a.jsx)(n.code,{children:"delete"})," fields) to pass into ",(0,a.jsx)(n.a,{href:"/docs/0.77/layoutanimation#configurenext",children:(0,a.jsx)(n.code,{children:"configureNext"})}),". The ",(0,a.jsx)(n.code,{children:"type"})," parameter is an ",(0,a.jsx)(n.a,{href:"/docs/0.77/layoutanimation#types",children:"animation type"}),", and the ",(0,a.jsx)(n.code,{children:"creationProp"})," parameter is a ",(0,a.jsx)(n.a,{href:"/docs/0.77/layoutanimation#properties",children:"layout property"}),"."]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"Example:"})}),"\n",(0,a.jsx)(n.div,{className:"snack-player","data-snack-name":"LayoutAnimation","data-snack-description":"Example usage","data-snack-files":"%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseState%7D%20from%20'react'%3B%5Cnimport%20%7B%5Cn%20%20View%2C%5Cn%20%20Platform%2C%5Cn%20%20UIManager%2C%5Cn%20%20LayoutAnimation%2C%5Cn%20%20StyleSheet%2C%5Cn%20%20Button%2C%5Cn%7D%20from%20'react-native'%3B%5Cn%5Cnif

1%20(%5Cn%20%20Platform.OS%20%3D%3D%3D%20'android'%20%26%26%5Cn%20%20UIManager.setLayoutAnimationEnabledExperimental%5Cn)%20%7B%5Cn%20%20UIManager.setLayoutAnimationEnabledExperimental(true)%3B%5Cn%7D%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5BboxPosition%2C%20setBoxPosition%5D%20%3D%20useState('left')%3B%5Cn%5Cn%20%20const%20toggleBox%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20LayoutAnimation.configureNext(%7B%5Cn%20%20%20%20%20%20duration%3A%20500%2C%5Cn%20%20%20%20%20%20create%3A%20%7Btype%3A%20'linear'%2C%20property%3A%20'opacity'%7D%2C%5Cn%20%20%20%20%20%20update%3A%20%7Btype%3A%20'spring'%2C%20springDamping%3A%200.4%7D%2C%5Cn%20%20%20%20%20%20delete%3A%20%7Btype%3A%20'linear'%2C%20property%3A%20'opacity'%7D%2C%5Cn%20%20%20%20%7D)%3B%5Cn%20%20%20%20setBoxPosition(boxPosition%20%3D%3D%3D%20'left'%20%3F%20'right'%20%3A%20'left')%3B%5Cn%20%20%7D%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CButton%20title%3D%5C%22Toggle%20Layout%5C%22%20onPress%3D%7BtoggleBox%7D%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3CView%5Cn%20%20%20%20%20%20%20%20style%3D%7B%5Bstyles.box%2C%20boxPosition%20%3D%3D%3D%20'left'%20%3F%20null%20%3A%20styles.moveRight%5D%7D%5Cn%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%3C%2FView%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20alignItems%3A%20'flex-start'%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%20%20box%3A%20%7B%5Cn%20%20%20%20height%3A%20100%2C%5Cn%20%20%20%20width%3A%20100%2C%5Cn%20%20%20%20borderRadius%3A%205%2C%5Cn%20%20%20%20margin%3A%208%2C%5Cn%20%20%20%20backgroundColor%3A%20'blue'%2C%5Cn%20%20%7D%2C%5Cn%20%20moveRight%3A%20%7B%5Cn%20%20%20%20alignSelf%3A%20'flex-end'%2C%5Cn%20%20%20%20height%3A%20200%2C%5Cn%20%20%20%20width%3A%20200%2C%5Cn%20%20%7D%2C%5Cn%20%20buttonContainer%3A%20%7B%5Cn%20%20%20%20alignSelf%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D","data-snack-dependencies":"react-native-safe-area-context","data-snack-platform":"web","data-snack-supported-platforms":"android,ios","data-snack-theme":"light","data-snack-preview":"true","data-snack-loading":"lazy","data-snack-device-appearance":"light","data-snack-device-frame":"false"}),"\n",(0,a.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,a.jsx)(n.h3,{id:"types",children:"Types"}),"\n",(0,a.jsxs)(n.p,{children:["An enumeration of animation types to be used in the ",(0,a.jsx)(n.a,{href:"/docs/0.77/layoutanimation#create",children:(0,a.jsx)(n.code,{children:"create"})})," method, or in the ",(0,a.jsx)(n.code,{children:"create"}),"/",(0,a.jsx)(n.code,{children:"update"}),"/",(0,a.jsx)(n.code,{children:"delete"})," configs for ",(0,a.jsx)(n.a,{href:"/docs/0.77/layoutanimation#configurenext",children:(0,a.jsx)(n.code,{children:"configureNext"})}),". (example usage: ",(0,a.jsx)(n.code,{children:"LayoutAnimation.Types.easeIn"}),")"]}),"\n",(0,a.jsxs)(n.table,{children:[(0,a.jsx)(n.thead,{children:(0,a.jsx)(n.tr,{children:(0,a.jsx)(n.th,{children:"Types"})})}),(0,a.jsxs)(n.tbody,{children:[(0,a.jsx)(n.tr,{children:(0,a.jsx)(n.td,{children:"spring"})}),(0,a.jsx)(n.tr,{children:(0,a.jsx)(n.td,{children:"linear"})}),(0,a.jsx)(n.tr,{children:(0,a.jsx)(n.td,{children:"easeInEaseOut"})}),(0,a.jsx)(n.tr,{children:(0,a.jsx)(n.td,{children:"easeIn"})}),(0,a.jsx)(n.tr,{children:(0,a.jsx)(n.td,{children:"easeOut"})}),(0,a.jsx)(n.tr,{children:(0,a.jsx)(n.td,{children:"keyboard"})})]})]}),"\n",(0,a.jsx)(n.hr,{}),"\n",(0,a.jsx)(n.h3,{id:"properties-1",children:"Properties"}),"\n",(0,a.jsxs)(n.p,{children:["An enumeration of layout properties to be animated to be used in the ",(0,a.jsx)(n.a,{href:"/docs/0.77/layoutanimation#create",children:(0,a.jsx)(n.code,{children:"create"})})," method, or in the ",(0,a.jsx)(n.code,{children:"create"}),"/",(0,a.jsx)(n.code,{children:"update"}),"/",(0,a.jsx)(n.code,{children:"delete"})," configs for ",(0,a.jsx)(n.a,{href:"/docs/0.77/layoutanimation#configurenext",children:(0,a.jsx)(n.code,{children:"configureNext"})}),". (example usage: ",(0,a.jsx)(n.code,{children:"LayoutAnimation.Properties.opacity"}),")"]}),"\n",(0,a.jsxs)(n.table,{children:[(0,a.jsx)(n.thead,{children:(0,a.jsx)(n.tr,{children:(0,a.jsx)(n.th,{children:"Properties"})})}),(0,a.jsxs)(n.tbody,{children:[(0,a.jsx)(n.tr,{children:(0,a.jsx)(n.td,{children:"opacity"})}),(0,a.jsx)(n.tr,{children:(0,a.jsx)(n.td,{children:"scaleX"})}),(0,a.jsx)(n.tr,{children:(0,a.jsx)(n.td,{children:"scaleY"})}),(0,a.jsx)(n.tr,{children:(0,a.jsx)(n.td,{children:"scaleXY"})})]})]}),"\n",(0,a.jsx)(n.hr,{}),"\n",(0,a.jsx)(n.h3,{id:"presets",children:"Presets"}),"\n",(0,a.jsxs)(n.p,{children:["A set of predefined animation configs to pass into ",(0,a.jsx)(n.a,{href:"/docs/0.77/layoutanimation#configurenext",children:(0,a.jsx)(n.code,{children:"configureNext"})}),"."]}),"\n",(0,a.jsxs)(n.table,{children:[(0,a.jsx)(n.thead,{children:(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.th,{children:"Presets"}),(0,a.jsx)(n.th,{children:"Value"})]})}),(0,a.jsxs)(n.tbody,{children:[(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"easeInEaseOut"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"create(300, 'easeInEaseOut', 'opacity')"})})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"linear"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"create(500, 'linear', 'opacity')"})})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:"spring"}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }"})})]})]})]}),"\n",(0,a.jsx)(n.hr,{}),"\n",(0,a.jsx)(n.h3,{id:"easeineaseout",children:(0,a.jsx)(n.code,{children:"easeInEaseOut"})}),"\n",(0,a.jsxs)(n.p,{children:["Calls ",(0,a.jsx)(n.code,{children:"configureNext()"})," with ",(0,a.jsx)(n.code,{children:"Presets.easeInEaseOut"}),"."]}),"\n",(0,a.jsx)(n.hr,{}),"\n",(0,a.jsx)(n.h3,{id:"linear",children:(0,a.jsx)(n.code,{children:"linear"})}),"\n",(0,a.jsxs)(n.p,{children:["Calls ",(0,a.jsx)(n.code,{children:"configureNext()"})," with ",(0,a.jsx)(n.code,{children:"Presets.linear"}),"."]}),"\n",(0,a.jsx)(n.hr,{}),"\n",(0,a.jsx)(n.h3,{id:"spring",children:(0,a.jsx)(n.code,{children:"spring"})}),"\n",(0,a.jsxs)(n.p,{children:["Calls ",(0,a.jsx)(n.code,{children:"configureNext()"})," with ",(0,a.jsx)(n.code,{children:"Presets.spring"}),"."]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"Example:"})}),"\n",(0,a.jsx)(n.div,{className:"snack-player","data-snack-name":"LayoutAnimation","data-snack-description":"Example usage","data-snack-files":"%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseState%7D%20from%20'react'%3B%5Cnimport%20%7B%5Cn%20%20View%2C%5Cn%20%20Platform%2C%5Cn%20%20UIManager%2C%5Cn%20%20LayoutAnimation%2C%5Cn%20%20StyleSheet%2C%5Cn%20%20Button%2C%5Cn%7D%20from%20'react-native'%3B%5Cn%5Cnif

1%20(%5Cn%20%20Platform.OS%20%3D%3D%3D%20'android'%20%26%26%5Cn%20%20UIManager.setLayoutAnimationEnabledExperimental%5Cn)%20%7B%5Cn%20%20UIManager.setLayoutAnimationEnabledExperimental(true)%3B%5Cn%7D%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5BfirstBoxPosition%2C%20setFirstBoxPosition%5D%20%3D%20useState('left')%3B%5Cn%20%20const%20%5BsecondBoxPosition%2C%20setSecondBoxPosition%5D%20%3D%20useState('left')%3B%5Cn%20%20const%20%5BthirdBoxPosition%2C%20setThirdBoxPosition%5D%20%3D%20useState('left')%3B%5Cn%5Cn%20%20const%20toggleFirstBox%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)%3B%5Cn%20%20%20%20setFirstBoxPosition(firstBoxPosition%20%3D%3D%3D%20'left'%20%3F%20'right'%20%3A%20'left')%3B%5Cn%20%20%7D%3B%5Cn%5Cn%20%20const%20toggleSecondBox%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.linear)%3B%5Cn%20%20%20%20setSecondBoxPosition(secondBoxPosition%20%3D%3D%3D%20'left'%20%3F%20'right'%20%3A%20'left')%3B%5Cn%20%20%7D%3B%5Cn%5Cn%20%20const%20toggleThirdBox%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20%20%20LayoutAnimation.configureNext(LayoutAnimation.Presets.spring)%3B%5Cn%20%20%20%20setThirdBoxPosition(thirdBoxPosition%20%3D%3D%3D%20'left'%20%3F%20'right'%20%3A%20'left')%3B%5Cn%20%20%7D%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CButton%20title%3D%5C%22EaseInEaseOut%5C%22%20onPress%3D%7BtoggleFirstBox%7D%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3CView%5Cn%20%20%20%20%20%20%20%20style%3D%7B%5B%5Cn%20%20%20%20%20%20%20%20%20%20styles.box%2C%5Cn%20%20%20%20%20%20%20%20%20%20firstBoxPosition%20%3D%3D%3D%20'left'%20%3F%20null%20%3A%20styles.moveRight%2C%5Cn%20%20%20%20%20%20%20%20%5D%7D%5Cn%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CButton%20title%3D%5C%22Linear%5C%22%20onPress%3D%7BtoggleSecondBox%7D%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3CView%5Cn%20%20%20%20%20%20%20%20style%3D%7B%5B%5Cn%20%20%20%20%20%20%20%20%20%20styles.box%2C%5Cn%20%20%20%20%20%20%20%20%20%20secondBoxPosition%20%3D%3D%3D%20'left'%20%3F%20null%20%3A%20styles.moveRight%2C%5Cn%20%20%20%20%20%20%20%20%5D%7D%5Cn%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CButton%20title%3D%5C%22Spring%5C%22%20onPress%3D%7BtoggleThirdBox%7D%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3CView%5Cn%20%20%20%20%20%20%20%20style%3D%7B%5B%5Cn%20%20%20%20%20%20%20%20%20%20styles.box%2C%5Cn%20%20%20%20%20%20%20%20%20%20thirdBoxPosition%20%3D%3D%3D%20'left'%20%3F%20null%20%3A%20styles.moveRight%2C%5Cn%20%20%20%20%20%20%20%20%5D%7D%5Cn%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%3C%2FView%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20alignItems%3A%20'flex-start'%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%20%20box%3A%20%7B%5Cn%20%20%20%20height%3A%20100%2C%5Cn%20%20%20%20width%3A%20100%2C%5Cn%20%20%20%20borderRadius%3A%205%2C%5Cn%20%20%20%20margin%3A%208%2C%5Cn%20%20%20%20backgroundColor%3A%20'blue'%2C%5Cn%20%20%7D%2C%5Cn%20%20moveRight%3A%20%7B%5Cn%20%20%20%20alignSelf%3A%20'flex-end'%2C%5Cn%20%20%7D%2C%5Cn%20%20buttonContainer%3A%20%7B%5Cn%20%20%20%20alignSelf%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D","data-snack-dependencies":"react-native-safe-area-context","data-snack-platform":"web","data-snack-supported-platforms":"android,ios","data-snack-theme":"light","data-snack-preview":"true","data-snack-loading":"lazy","data-snack-device-appearance":"light","data-snack-device-frame":"false"})]})}function C(e={}){let{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}},43023(e,n,t){t.d(n,{R:()=>o,x:()=>r});var i=t(63696);let a={},s=i.createContext(a);function o(e){let n=i.useContext(s);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);