var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var l=a=>t(a,"__esModule",{value:!0});var k=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),g=(a,n)=>{l(a);for(var s in n)t(a,s,{get:n[s],enumerable:!0})},y=(a,n,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of u(n))!N.call(a,c)&&c!=="default"&&t(a,c,{get:()=>n[c],enumerable:!(s=h(n,c))||s.enumerable});return a},b=a=>y(l(t(a!=null?d(m(a)):{},"default",a&&a.__esModule&&"default"in a?{get:()=>a.default,enumerable:!0}:{value:a,enumerable:!0})),a);var o=k((S,i)=>{i.exports=_jsx_runtime});var v={};g(v,{default:()=>w,frontmatter:()=>x});var e=b(o()),x={title:"Toggle Theme Animation with React Native Skia",date:"2023-02-01",lastmod:"2023-02-01",tags:["react-native","react-native-skia"],draft:!1,layout:"PostLayout",accessCode:"5e3e6406c1ea5ce3b961a5f03dffce630db7d535a08fa41bcf4e437a98684237",vimeoId:"793498191"};function r(a){let n=Object.assign({h2:"h2",a:"a",span:"span",p:"p",strong:"strong",h3:"h3",pre:"pre",code:"code",h4:"h4",div:"div",ol:"ol",li:"li"},a.components),{VideoPlayer:s,WarningBanner:c}=n;return s||p("VideoPlayer",!0),c||p("WarningBanner",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h2,{id:"introduction",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#introduction",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Introduction"]}),` `,(0,e.jsxs)(n.p,{children:[`What's up Patreons? Thank you for supporting me. `,(0,e.jsx)(n.strong,{children:"We're already 18!!!"})," You've no idea how much I appreciate your support."]}),` `,(0,e.jsx)(n.p,{children:"I'm really happy to share this animation with you. It's a toggle theme animation that I've been working on for a while."}),` `,(0,e.jsx)(s,{video:a.vimeoId}),` `,(0,e.jsx)(n.p,{children:"As always I deeply recommend you to open the source code in the editor and play with it."}),` `,(0,e.jsxs)(n.h3,{id:"dependencies",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#dependencies",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Dependencies"]}),` `,(0,e.jsxs)(n.p,{children:["This animation is fully built with ",(0,e.jsx)(n.strong,{children:"React Native Skia"})," and ",(0,e.jsx)(n.strong,{children:"React Native Skia Gesture"}),"."]}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsx)(n.code,{className:"language-bash code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:["npx expo ",(0,e.jsx)(n.span,{className:"token function",children:"install"}),` @shopify/react-native-skia react-native-skia-gesture `]})})}),` `,(0,e.jsxs)(n.h4,{id:"whats-react-native-skia-gesture",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#whats-react-native-skia-gesture",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"What's React Native Skia Gesture?"]}),` `,(0,e.jsx)(n.p,{children:"React Native Skia, provides many declarative APIs for building screens using React Components. However, Skia components are not real components, but abstract representations of a part of a drawing. Therefore direct interactions with individual Skia components can only be achieved indirectly from the Canvas (trying to figure out if the point on the screen that was clicked is within the element we want to interact with)."}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.a,{href:"https://github.com/enzomanuelmangano/react-native-skia-gesture",children:"React Native Skia Gesture"}),", simply provides a set of APIs to be able to interact directly with individual components."]}),` `,(0,e.jsx)(n.p,{children:"That's a package, I've built few months ago to make it easier to interact with Skia components for another Patreon animation :)"}),` `,(0,e.jsxs)(n.p,{children:["In this animation, it's quite useful to interact with the ",(0,e.jsx)(n.strong,{children:"Selectable Circles"}),"."]}),` `,(0,e.jsxs)(n.h3,{id:"reusing-the-animation",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#reusing-the-animation",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Reusing the animation"]}),` `,(0,e.jsx)(n.p,{children:"The animation itself isn't complex, but it's a bit tricky to reuse. In my opinion, RN Skia is an incredible package but the main issue is that it's not easy to reuse components."}),` `,(0,e.jsxs)(n.p,{children:["If you want to reuse this animation my suggestion is to dedicate a full screen to the ",(0,e.jsx)(n.strong,{children:'"Switch Theme"'})," action, by reusing the same concept."]}),` `,(0,e.jsxs)(n.h2,{id:"code",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#code",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Code"]}),` `,(0,e.jsx)(n.p,{children:"The main idea behind this animation is to have two copies of the same screen (I'm just talking about drawings here, not the an actual screen with effects)."}),` `,(0,e.jsxs)(n.p,{children:["I'm definitely talking about the ",(0,e.jsx)(n.strong,{children:"BackgroundComponent"}),"."]}),` `,(0,e.jsx)(n.div,{className:"remark-code-title",children:"src/index.tsx"}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"BackgroundComponent"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useCallback"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" backgroundColor",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" textColor",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" backgroundColor",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"SkiaValue"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" textColor",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"SkiaValue"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsx)(n.span,{className:"token punctuation",children:"<"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Rect"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"x"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"y"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"width"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"canvasWidth",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"height"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"canvasHeight",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"color"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"backgroundColor",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"font ",(0,e.jsx)(n.span,{className:"token operator",children:"&&"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Text"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"font"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"font",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"text"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token constant",children:"APP_TEXT"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"color"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"textColor",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"x"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"textX",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"y"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"textY",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"canvasHeight",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," canvasWidth",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," font",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," textX",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," textY",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:`Both screens are drawn on the same canvas, and the first one is over the other. As you can see the unique difference between the two screens is the background color and the text color.`}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token function",children:"BackgroundComponent"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" backgroundColor",(0,e.jsx)(n.span,{className:"token operator",children:":"})," previousSelectedBackgroundColor",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" textColor",(0,e.jsx)(n.span,{className:"token operator",children:":"})," previousSelectedTextColor",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Group"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"clip"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"clipPath",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token function",children:"BackgroundComponent"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" backgroundColor",(0,e.jsx)(n.span,{className:"token operator",children:":"})," selectedBackgroundColor",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" textColor",(0,e.jsx)(n.span,{className:"token operator",children:":"})," selectedTextColor",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["The ",(0,e.jsx)(n.strong,{children:"Group"})," component is used to clip the second screen, so that it's visible only in the selected area. And guess what's the ",(0,e.jsx)(n.strong,{children:"clipPath"}),"? Simply the circle that expands in the animation."]}),` `,(0,e.jsxs)(n.p,{children:["Here, I'm using the ",(0,e.jsx)(n.strong,{children:"useComputedValue"})," hook to compute the clipPath. I'm simply building a Skia.Path and adding a circle to it that is centered using the coordinates of the selected button."]}),` `,(0,e.jsx)(n.div,{className:"remark-code-title",children:"src/index.tsx"}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," clipPath ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useComputedValue"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," path ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Skia"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Path"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Make"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," x ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," coordinates",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"selectedIndex",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token operator",children:"?."}),"cx ",(0,e.jsx)(n.span,{className:"token operator",children:"??"})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," y ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," coordinates",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"selectedIndex",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token operator",children:"?."}),"cy ",(0,e.jsx)(n.span,{className:"token operator",children:"??"})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" path",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"addCircle"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"x ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"SQUARE_SIZE"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," y ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"SQUARE_SIZE"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," radius",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," path",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"selectedIndex",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," coordinates",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," radius",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["The ",(0,e.jsx)(n.strong,{children:"radius"})," is definitely the most important value in this animation. It's the value that controls the size of the circle that expands in the animation."]}),` `,(0,e.jsxs)(n.p,{children:["Of course, the ",(0,e.jsx)(n.strong,{children:"radius"})," is animated every time the user selects a new button. And the function that is triggered is the ",(0,e.jsx)(n.strong,{children:"onSelectSquare"}),"."]}),` `,(0,e.jsxs)(n.p,{children:["In a nutshell, the ",(0,e.jsx)(n.strong,{children:"onSelectSquare"})," function, sets always the ",(0,e.jsx)(n.strong,{children:"radius"})," to 0, and then it starts the animation. When the animation is finished, it sets the ",(0,e.jsx)(n.strong,{children:"previousSelectedIndex"})," to the current ",(0,e.jsx)(n.strong,{children:"selectedIndex"}),"."]}),` `,(0,e.jsx)(n.div,{className:"remark-code-title",children:"src/index.tsx"}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," radius ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useValue"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," clipPath ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useComputedValue"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"selectedIndex",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," coordinates",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," radius",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," onSelectSquare ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useCallback"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"index",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"number"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"index ",(0,e.jsx)(n.span,{className:"token operator",children:"==="})," selectedIndex",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" radius",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"runTiming"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" radius",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" canvasHeight",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" duration",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"500"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" endValue ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," isFinished ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," endValue ",(0,e.jsx)(n.span,{className:"token operator",children:"==="})," canvasHeight",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"isFinished",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" previousSelectedIndex",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," index",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" radius",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" previousSelectedIndex",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," selectedIndex",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" selectedIndex",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," index",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"selectedIndex",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," previousSelectedIndex",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," canvasHeight",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," radius",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsxs)(n.h4,{id:"recap",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#recap",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Recap"]}),` `,(0,e.jsx)(n.p,{children:"It seems hard but basically we're simply revealing the new screen by expanding the circle."}),` `,(0,e.jsxs)(n.p,{children:["At the end of the animation, we're setting the ",(0,e.jsx)(n.strong,{children:"radius"})," to 0 and the ",(0,e.jsx)(n.strong,{children:"previousSelectedIndex"})," to the current ",(0,e.jsx)(n.strong,{children:"selectedIndex"}),"."]}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"BackgroundComponent A"})," is drawn on top of ",(0,e.jsx)(n.strong,{children:"BackgroundComponent B"})]}),` `,(0,e.jsx)(n.li,{children:"The user selects a button"}),` `,(0,e.jsxs)(n.li,{children:["The ",(0,e.jsx)(n.strong,{children:"radius"})," is set to 0"]}),` `,(0,e.jsx)(n.li,{children:"The animation starts"}),` `,(0,e.jsxs)(n.li,{children:["The ",(0,e.jsx)(n.strong,{children:"BackgroundComponent A"})," is clipped by the circle that expands"]}),` `,(0,e.jsx)(n.li,{children:"The animation ends"}),` `,(0,e.jsxs)(n.li,{children:["The ",(0,e.jsx)(n.strong,{children:"BackgroundComponent B"})," is revealed"]}),` `,(0,e.jsxs)(n.li,{children:["The ",(0,e.jsx)(n.strong,{children:"BackgroundComponent A"})," colors are set to the colors of the ",(0,e.jsx)(n.strong,{children:"BackgroundComponent B"})," (the new colors) by resetting the ",(0,e.jsx)(n.strong,{children:"previousSelectedIndex"})," to the current ",(0,e.jsx)(n.strong,{children:"selectedIndex"})]}),` `,(0,e.jsxs)(n.li,{children:["The ",(0,e.jsx)(n.strong,{children:"radius"})," is set to 0 (again)"]}),` `,(0,e.jsxs)(n.li,{children:["Now we are ready to start the animation again since the ",(0,e.jsx)(n.strong,{children:"BackgroundComponent A"})," is fully visible and it's equal to the ",(0,e.jsx)(n.strong,{children:"BackgroundComponent B"}),"."]}),` `]}),` `,(0,e.jsxs)(n.h3,{id:"the-selectable-square",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#the-selectable-square",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),'The Selectable "Square"']}),` `,(0,e.jsxs)(n.p,{children:["The ",(0,e.jsx)(n.strong,{children:"SelectableSquare"})," component is the component that represents the button that the user can select."]}),` `,(0,e.jsx)(n.p,{children:"Wait but... it's not a square, it's a circle! Yes, I know. But at the beginning, I was using a square and then I changed it to a circle (I was forced by my girlfriend \u{1F923})."}),` `,(0,e.jsx)(n.p,{children:"By the way, you can see that under the hood, I'm simply using a RoundedRect, that's why I keep the name."}),` `,(0,e.jsx)(c,{type:"warning",title:"Touchable.RoundedRect",subtitle:"You can see that I'm using the Touchable.RoundedRect, that's because I'm using the useGestureHandler hook from React Native Skia Gesture in order to easily interact with the Square."}),` `,(0,e.jsx)(n.div,{className:"remark-code-title",children:"src/selectable-square/index.tsx"}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"SelectableSquare"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token constant",children:"FC"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"SelectableSquareProps"}),(0,e.jsx)(n.span,{className:"token operator",children:">"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" cx",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" cy",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" size",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" color",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" onSelect",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" selectedIndex",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" borderColor ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:"'white'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" index",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," scale ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useValue"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," touchableHandler ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useGestureHandler"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"onStart"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"runSpring"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"scale",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token number",children:"0.9"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" damping",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"5"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" mass",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"onEnd"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"runSpring"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"scale",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" damping",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"5"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" mass",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" onSelect",(0,e.jsx)(n.span,{className:"token operator",children:"?."}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," transform ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useComputedValue"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," scale",(0,e.jsx)(n.span,{className:"token operator",children:":"})," scale",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"scale",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," origin ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useComputedValue"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" x",(0,e.jsx)(n.span,{className:"token operator",children:":"})," cx",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," size ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" y",(0,e.jsx)(n.span,{className:"token operator",children:":"})," cy",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," size ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"cx",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," cy",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," animatedColor ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useComputedValue"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," selectedIndex",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"==="})," index ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," borderColor ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," color",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"color",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," borderColor",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," selectedIndex",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," index",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Group"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"origin"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"origin",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"transform"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"transform",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Touchable.RoundedRect"})]}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"x"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"cx",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"y"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"cy",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"width"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"size",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"height"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"size",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"r"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token number",children:"100"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"color"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"color",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsxs)(n.span,{className:"token spread",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"touchableHandler",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"RoundedRect"})]}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"x"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"cx",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"y"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"cy",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"width"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"size",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"height"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"size",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"r"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token number",children:"100"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"strokeWidth"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token number",children:"2"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"color"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"animatedColor",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token string",children:"'stroke'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `})]})}),` `,(0,e.jsxs)(n.h2,{id:"conclusion",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#conclusion",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Conclusion"]}),` `,(0,e.jsx)(n.p,{children:"I hope you enjoyed this post and that you learned something new. I'm really excited about the future of React Native Skia and I'm looking forward to see what the community will build with it."})]})}function f(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(r,a)})):r(a)}var w=f;function p(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return v;})(); ;return Component;