var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var l=e=>t(e,"__esModule",{value:!0});var k=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),g=(e,n)=>{l(e);for(var s in n)t(e,s,{get:n[s],enumerable:!0})},y=(e,n,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of m(n))!N.call(e,c)&&c!=="default"&&t(e,c,{get:()=>n[c],enumerable:!(s=h(n,c))||s.enumerable});return e},v=e=>y(l(t(e!=null?d(u(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);var o=k((I,i)=>{i.exports=_jsx_runtime});var x={};g(x,{default:()=>w,frontmatter:()=>b});var a=v(o()),b={title:"Animated Grid List Layout",date:"2023-01-11",lastmod:"2023-01-11",tags:["react-native","react","react-native-reanimated"],draft:!1,layout:"PostLayout",accessCode:"44427b82e459280472ac8188cbec708e58ca5590e15b90cf5bd9b26384791e86",vimeoId:"787369926"};function r(e){let n=Object.assign({h2:"h2",a:"a",span:"span",p:"p",h3:"h3",strong:"strong",pre:"pre",code:"code",ol:"ol",li:"li",div:"div"},e.components),{VideoPlayer:s,YouTubeEmbed:c}=n;return s||p("VideoPlayer",!0),c||p("YouTubeEmbed",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.h2,{id:"introduction",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#introduction",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Introduction"]}),` `,(0,a.jsx)(n.p,{children:"What's going on mobile devs?"}),` `,(0,a.jsx)(n.p,{children:`First of all I want to thank you for supporting me on Patreon. You are really motivating me a lot. I hope I can bring as much content as I can. During this holiday season it's been really hard trying to be active here, but I've been doing my best to create high-level animations. In the coming weeks I will try to produce even better content (including on YouTube).`}),` `,(0,a.jsx)(s,{video:e.vimeoId}),` `,(0,a.jsx)(n.p,{children:"Before moving on, keep in mind that this article is definitely easier to understand if you have the code opened in your editor."}),` `,(0,a.jsxs)(n.h3,{id:"the-end-result",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#the-end-result",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"The end result"]}),` `,(0,a.jsxs)(n.p,{children:["As always, I've tried to create a reusable component, so you can use it in your projects. The component is called ",(0,a.jsx)(n.strong,{children:"AnimatedLayoutList"}),":"]}),` `,(0,a.jsx)(n.p,{children:"Here's the component's interface:"}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,a.jsxs)(n.span,{className:"token class-name",children:["AnimatedLayoutListProps",(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token constant",children:"T"}),(0,a.jsx)(n.span,{className:"token operator",children:">"})]})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" data",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token constant",children:"T"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"renderItem"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"item",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token constant",children:"T"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," index",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"number"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," isExpanded",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"boolean"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ReactElement"})}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" style",(0,a.jsx)(n.span,{className:"token operator",children:"?"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"StyleProp"}),(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ViewStyle"}),(0,a.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" contentContainerStyle",(0,a.jsx)(n.span,{className:"token operator",children:"?"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"StyleProp"}),(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ViewStyle"}),(0,a.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" layout",(0,a.jsx)(n.span,{className:"token operator",children:"?"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'grid'"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'list'"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,a.jsxs)(n.h2,{id:"the-approach",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#the-approach",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"The Approach"]}),` `,(0,a.jsx)(n.p,{children:"Let's be honest, this animation feels really hard, but under the hood it's simply using the Layout Animation concept from the Reanimated package."}),` `,(0,a.jsxs)(n.p,{children:["So if you want to reuse the component built in this article, keep in mind that you need to install just the ",(0,a.jsx)(n.strong,{children:"react-native-reanimated"})," package."]}),` `,(0,a.jsx)(n.pre,{className:"language-bash",children:(0,a.jsx)(n.code,{className:"language-bash code-highlight",children:(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token function",children:"yarn"})," ",(0,a.jsx)(n.span,{className:"token function",children:"add"}),` react-native-reanimated `]})})}),` `,(0,a.jsx)(n.p,{children:"By checking closely the animation, we can see that the animation is composed of two main animations:"}),` `,(0,a.jsxs)(n.ol,{children:[` `,(0,a.jsx)(n.li,{children:"The perspective animation"}),` `,(0,a.jsx)(n.li,{children:"The Grid/List animation"}),` `]}),` `,(0,a.jsxs)(n.h2,{id:"perspective-animation",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#perspective-animation",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Perspective Animation"]}),` `,(0,a.jsx)(n.p,{children:"The perspective animation is the one that is responsible for the rotation of the items. It's a simple animation that is triggered when the user scrolls the list."}),` `,(0,a.jsxs)(n.p,{children:["In order to easily work with the scroll events, I've used the ",(0,a.jsx)(n.strong,{children:"useAnimatedScrollHandler"})," hook from the Reanimated package (",(0,a.jsx)(n.a,{href:"/animate-with-reanimated/interpolate-with-scrollview",children:"I've also applied the scrollEventThrottle prop to the ScrollView component equal to 16"}),")."]}),` `,(0,a.jsx)(n.div,{className:"remark-code-title",children:"src/components/animated-layout-list/index.tsx"}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," isScrolling ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useSharedValue"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"false"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," direction ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useSharedValue"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Direction"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"None"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," lastOffset ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useSharedValue"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," onScrollEnd ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useCallback"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token string",children:"'worklet'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" isScrolling",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token boolean",children:"false"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" direction",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Direction"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"None"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," onScroll ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useAnimatedScrollHandler"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"onBeginDrag"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," contentOffset",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," y ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" lastOffset",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="}),` y `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"onScroll"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," contentOffset",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," y ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" isScrolling",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token boolean",children:"true"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" direction",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," y ",(0,a.jsx)(n.span,{className:"token operator",children:">"})," lastOffset",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Direction"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Down"})})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Direction"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Up"})}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"onEndDrag"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"event",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"event",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"velocity"}),(0,a.jsx)(n.span,{className:"token operator",children:"?."}),"y ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,a.jsx)(n.span,{className:"token number",children:"0"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"&&"})," event",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"velocity"}),(0,a.jsx)(n.span,{className:"token operator",children:"?."}),"x ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"onScrollEnd"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"onMomentumEnd"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"onScrollEnd"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["As you can see, we are using the ",(0,a.jsx)(n.strong,{children:"onScroll"})," event to update the ",(0,a.jsx)(n.strong,{children:"direction"})," and ",(0,a.jsx)(n.strong,{children:"isScrolling"})," variables. We are also using the ",(0,a.jsx)(n.strong,{children:"onEndDrag"})," and ",(0,a.jsx)(n.strong,{children:"onMomentumEnd"})," events to trigger the ",(0,a.jsx)(n.strong,{children:"onScrollEnd"})," function."]}),` `,(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.strong,{children:"onScrollEnd"})," function is responsible for setting the ",(0,a.jsx)(n.strong,{children:"isScrolling"})," variable to false and the ",(0,a.jsx)(n.strong,{children:"direction"})," variable to ",(0,a.jsx)(n.strong,{children:"Direction.None"}),"."]}),` `,(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.strong,{children:"direction"})," variable is responsible for telling us if the user is scrolling up or down. The ",(0,a.jsx)(n.strong,{children:"isScrolling"})," variable is responsible for telling us if the user is scrolling or not."]}),` `,(0,a.jsxs)(n.p,{children:["Why do we need to use the ",(0,a.jsx)(n.strong,{children:"onEndDrag"})," and ",(0,a.jsx)(n.strong,{children:"onMomentumEnd"})," events? The ",(0,a.jsx)(n.strong,{children:"onScroll"})," event is triggered even when the user is not scrolling (for instance the user has moved fast his finger and the scroll has stopped). So we need to use the ",(0,a.jsx)(n.strong,{children:"onEndDrag"})," and ",(0,a.jsx)(n.strong,{children:"onMomentumEnd"})," events to tell us when the user is not scrolling anymore."]}),` `,(0,a.jsxs)(n.p,{children:["Both the ",(0,a.jsx)(n.strong,{children:"onEndDrag"})," and ",(0,a.jsx)(n.strong,{children:"onMomentumEnd"}),` events can be in conflict with each other. In order fix this I've used the `,(0,a.jsx)(n.strong,{children:"event.velocity"})," property to check if the scroll animation has stopped. If the velocity is equal to 0, then we can assume that the user has stopped scrolling and the ",(0,a.jsx)(n.strong,{children:"onMomentumEnd"})," won't be triggered. If the velocity is not equal to 0, then we can assume that the user is still scrolling and the ",(0,a.jsx)(n.strong,{children:"onEndDrag"})," won't be triggered."]}),` `,(0,a.jsxs)(n.p,{children:["To be honest, that wasn't trivial for me and in order to understand it I deeply suggest you to cancel the condition inside the ",(0,a.jsx)(n.strong,{children:"onEndDrag"})," event and see what happens."]}),` `,(0,a.jsxs)(n.h3,{id:"apply-the-perspective-animation",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#apply-the-perspective-animation",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Apply the perspective animation"]}),` `,(0,a.jsxs)(n.p,{children:["Now that we have the scroll events, we can apply the perspective animation. In order to do that, we need to create a ",(0,a.jsx)(n.strong,{children:"rotation"})," derived value that will be responsible for telling us the rotation degree."]}),` `,(0,a.jsx)(n.div,{className:"remark-code-title",children:"src/components/animated-layout-list/index.tsx"}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," rotation ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useDerivedValue"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token string",children:"'worklet'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"isScrolling",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"&&"})," direction",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"!=="})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Direction"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"None"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," direction",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Direction"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Up"})}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsxs)(n.span,{className:"token interpolation",children:[(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,a.jsx)(n.span,{className:"token constant",children:"MAX_ROTATE_DEG"}),(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token string",children:"deg"}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsxs)(n.span,{className:"token interpolation",children:[(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,a.jsx)(n.span,{className:"token constant",children:"MIN_ROTATE_DEG"}),(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token string",children:"deg"}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'0deg'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["We also need to create a ",(0,a.jsx)(n.strong,{children:"rAnimatedStyle"})," variable that will be responsible for applying the rotation to the items."]}),` `,(0,a.jsx)(n.div,{className:"remark-code-title",children:"src/components/animated-layout-list/index.tsx"}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," rAnimatedStyle ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useAnimatedStyle"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," rotate ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"withTiming"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"rotation",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" transform",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" perspective",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"500"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" rotateX",(0,a.jsx)(n.span,{className:"token operator",children:":"})," rotate",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.h2,{id:"the-gridlist-animation",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#the-gridlist-animation",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"The Grid/List animation"]}),` `,(0,a.jsxs)(n.p,{children:["The Grid/List animation is the one that is responsible for the transition between the grid and the list layout. It's a simple animation that is triggered when the user taps on the ",(0,a.jsx)(n.strong,{children:"FloatingButton"}),"."]}),` `,(0,a.jsxs)(n.p,{children:["As mentioned before, the secret ingredient of this animation is the Layout Animation concept from the Reanimated package. If you're not familiar with it, I heavily suggest you to check out my video tutorial about ",(0,a.jsx)(n.strong,{children:"the Magic of Layout Animations"}),"."]}),` `,(0,a.jsx)(c,{videoId:"p3BLiloo2UM"}),` `,(0,a.jsx)(n.p,{children:"The idea is quite simple. I've created two layout for each item:"}),` `,(0,a.jsxs)(n.ol,{children:[` `,(0,a.jsx)(n.li,{children:"The grid layout"}),` `,(0,a.jsx)(n.li,{children:"The list layout"}),` `]}),` `,(0,a.jsxs)(n.p,{children:["The grid layout is the one that is applied by default. The list layout is the one that is applied when the user taps on the ",(0,a.jsx)(n.strong,{children:"FloatingButton"}),"."]}),` `,(0,a.jsxs)(n.p,{children:["For instance, below you can see the two layouts I've created for the item container inside the ",(0,a.jsx)(n.strong,{children:"AnimatedLayoutList"})," component:"]}),` `,(0,a.jsx)(n.div,{className:"remark-code-title",children:"GridLayout"}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"data",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"item",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," i",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Animated.View"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"key"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"i",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" height",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"120"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" aspectRatio",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" width",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsxs)(n.span,{className:"token interpolation",children:[(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"100"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"-"})," ",(0,a.jsx)(n.span,{className:"token number",children:"15"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token string",children:"%"}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" backgroundColor",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'#FFFFFF'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" borderRadius",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"10"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" marginBottom",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"20"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" marginLeft",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'5%'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" overflow",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'hidden'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" rAnimatedStyle",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token function",children:"renderItem"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"item",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," i",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," isExpanded",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,a.jsx)(n.div,{className:"remark-code-title",children:"ListLayout"}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"data",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"item",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," i",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Animated.View"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"key"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"i",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" height",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"100"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" aspectRatio",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"undefined"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" width",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'90%'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" backgroundColor",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'#FFFFFF'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" borderRadius",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"10"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" marginBottom",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"20"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" marginLeft",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'5%'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" overflow",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'hidden'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" rAnimatedStyle",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token function",children:"renderItem"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"item",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," i",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," isExpanded",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["Then I've created a ",(0,a.jsx)(n.strong,{children:"layout"})," variable that is responsible for telling us which layout we should use. To simplify the code, I've created an isExpanded variable that is responsible for telling us if the layout is the list layout or not."]}),` `,(0,a.jsxs)(n.p,{children:["And finally, I've applied the layout animation using the layout property of the ",(0,a.jsx)(n.strong,{children:"Animated.View"})," component."]}),` `,(0,a.jsx)(n.div,{className:"remark-code-title",children:"src/components/animated-layout-list/index.tsx"}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"data",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"item",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," i",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Animated.View"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"key"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"i",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"layout"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Layout"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"duration"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"700"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" height",(0,a.jsx)(n.span,{className:"token operator",children:":"})," isExpanded ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token number",children:"100"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"120"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" aspectRatio",(0,a.jsx)(n.span,{className:"token operator",children:":"})," isExpanded ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"undefined"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" width",(0,a.jsx)(n.span,{className:"token operator",children:":"})," isExpanded ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'90%'"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsxs)(n.span,{className:"token interpolation",children:[(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"100"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"-"})," ",(0,a.jsx)(n.span,{className:"token number",children:"15"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token string",children:"%"}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" backgroundColor",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'#FFFFFF'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" borderRadius",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"10"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" marginBottom",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"20"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" marginLeft",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'5%'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" overflow",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'hidden'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" rAnimatedStyle",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token function",children:"renderItem"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"item",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," i",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," isExpanded",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["All the magic is done by the ",(0,a.jsx)(n.strong,{children:"layout"})," property of the ",(0,a.jsx)(n.strong,{children:"Animated.View"})," component. It's responsible for telling the Reanimated package to apply the layout animation."]}),` `,(0,a.jsxs)(n.p,{children:["Of course, you need to keep the same approach even inside the renderItem function. That means that in your custom component, you need to make sure that all your components are ",(0,a.jsx)(n.strong,{children:"Animated"})," components and that you're applying the layout property to them."]}),` `,(0,a.jsx)(n.div,{className:"remark-code-title",children:"src/App.tsx"}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," renderItem",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"AnimatedLayoutListProps"}),(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token keyword",children:"typeof"})," data",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token operator",children:">"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token string",children:"'renderItem'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"useCallback"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"item",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," _",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," isExpanded",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Animated.View"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" flex",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" alignItems",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'center'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" flexDirection",(0,a.jsx)(n.span,{className:"token operator",children:":"})," isExpanded ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'row'"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'column'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"AnimatedImage"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"layout"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Layout"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"source"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," uri",(0,a.jsx)(n.span,{className:"token operator",children:":"})," item",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"img"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" width",(0,a.jsx)(n.span,{className:"token operator",children:":"})," isExpanded ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token number",children:"64"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"200"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" aspectRatio",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" borderRadius",(0,a.jsx)(n.span,{className:"token operator",children:":"})," isExpanded ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token number",children:"32"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" marginHorizontal",(0,a.jsx)(n.span,{className:"token operator",children:":"})," isExpanded ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token number",children:"16"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"isExpanded ",(0,a.jsx)(n.span,{className:"token operator",children:"&&"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Animated.View"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"layout"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Layout"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"duration"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"600"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"entering"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"FadeIn"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"exiting"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"FadeOut"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Text"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" marginBottom",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" maxWidth",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'80%'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"numberOfLines"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"item",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"title"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Text"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" color",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'#383838'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" fontSize",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"12"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" maxWidth",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"200"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"numberOfLines"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"item",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"subtitle"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.h3,{id:"the-floatingbutton-animation",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#the-floatingbutton-animation",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"The FloatingButton animation"]}),` `,(0,a.jsx)(n.p,{children:"As mentioned before, the FloatingButton is the one that is responsible for the transition between the grid and the list layout. The button itself has been created with the same technique used for the Grid/List animation."}),` `,(0,a.jsx)(n.div,{className:"remark-code-title",children:"src/components/floating-button/index.tsx"}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token spread operator",children:"..."}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"TouchableOpacity"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"styles",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"container"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," style",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onPress"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"onPress",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"activeOpacity"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"0.9"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Animated.View"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"layout"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Layout"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" flex",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" flexDirection",(0,a.jsx)(n.span,{className:"token operator",children:":"})," isExpanded ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'column'"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'row'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" flexWrap",(0,a.jsx)(n.span,{className:"token operator",children:":"})," isExpanded ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'nowrap'"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'wrap'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" justifyContent",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'center'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" alignContent",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'center'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" paddingHorizontal",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"5"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token keyword",children:"new"})," ",(0,a.jsx)(n.span,{className:"token class-name",children:(0,a.jsx)(n.span,{className:"token builtin",children:"Array"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"isExpanded ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"4"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"fill"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"_",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," i",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Animated.View"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"layout"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Layout"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"exiting"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"FadeOut"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"entering"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"FadeIn"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"key"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"i",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" aspectRatio",(0,a.jsx)(n.span,{className:"token operator",children:":"})," isExpanded ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"undefined"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" width",(0,a.jsx)(n.span,{className:"token operator",children:":"})," isExpanded ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'70%'"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"undefined"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" alignSelf",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'center'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" height",(0,a.jsx)(n.span,{className:"token operator",children:":"})," isExpanded ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'20%'"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'25%'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" margin",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" backgroundColor",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'#6283B1'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" borderRadius",(0,a.jsx)(n.span,{className:"token operator",children:":"})," isExpanded ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token number",children:"4"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line highlight-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token spread operator",children:"..."}),` `]})]})}),` `,(0,a.jsxs)(n.h2,{id:"conclusion",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#conclusion",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Conclusion"]}),` `,(0,a.jsx)(n.p,{children:"The purpose of this article was to show you how to create a layout animation using the Reanimated package, but most importantly, to give you a reusable component that you can use in your own projects."}),` `,(0,a.jsx)(n.p,{children:"I hope you've enjoyed it and that you've learned something new. If you have any questions, feel free to write me on Twitter or with a private message me on Patreon, I'll be happy to answer them."})]})}function f(e={}){let{wrapper:n}=e.components||{};return n?(0,a.jsx)(n,Object.assign({},e,{children:(0,a.jsx)(r,e)})):r(e)}var w=f;function p(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return x;})(); ;return Component;