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=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})},f=(a,n,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of m(n))!N.call(a,c)&&c!=="default"&&t(a,c,{get:()=>n[c],enumerable:!(s=h(n,c))||s.enumerable});return a},y=a=>f(l(t(a!=null?d(u(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 x={};g(x,{default:()=>w,frontmatter:()=>b});var e=y(o()),b={title:"Balloon Slider Control in React Native",date:"2023-02-22",lastmod:"2023-02-22",tags:["react-native","react","reanimated","gesture-handler","react-native-skia"],draft:!1,layout:"PostLayout",accessCode:"3a219e3e1b4259b1c19355d1185fb100211942f6597a4316676b60aaad4b9b5e",vimeoId:"800258699"};function r(a){let n=Object.assign({h2:"h2",a:"a",span:"span",p:"p",h3:"h3",strong:"strong",pre:"pre",code:"code",div:"div",ol:"ol",li:"li",ul:"ul"},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 mobile devs? I hope you're doing well. Today I want to share with you an animation that has always astonished me. It's a slider control that looks like a balloon. The animation has been created by `,(0,e.jsx)(n.a,{href:"https://cuberto.com/",children:"Cuberto Team"}),"."]}),` `,(0,e.jsxs)(n.p,{children:["You can find the original animation on ",(0,e.jsx)(n.a,{href:"https://dribbble.com/shots/6549207-Balloon-Slider-Control",children:"Dribbble"}),"."]}),` `,(0,e.jsx)(s,{video:a.vimeoId}),` `,(0,e.jsx)(n.p,{children:"As usual, I recommend to read this article with the code open in your editor."}),` `,(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:["The component is composed of several sub-components imported from various libraries, including ",(0,e.jsx)(n.strong,{children:"@shopify/react-native-skia"}),", ",(0,e.jsx)(n.strong,{children:"react-native-gesture-handler"}),", and ",(0,e.jsx)(n.strong,{children:"react-native-reanimated"}),". These libraries provide tools for rendering and animating user interfaces on mobile devices."]}),` `,(0,e.jsxs)(n.p,{children:["In order to animate the Text contained in the Balloon, I've used the ",(0,e.jsx)(n.strong,{children:"ReText"})," component from ",(0,e.jsx)(n.strong,{children:"react-native-redash"}),"."]}),` `,(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:[(0,e.jsx)(n.span,{className:"token function",children:"yarn"})," ",(0,e.jsx)(n.span,{className:"token function",children:"add"}),` react-native-reanimated @shopify/react-native-skia react-native-gesture-handler react-native-redash `]})})}),` `,(0,e.jsxs)(n.h2,{id:"the-code",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#the-code",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"The Code"]}),` `,(0,e.jsxs)(n.p,{children:["The project structure is pretty simple. We have a ",(0,e.jsx)(n.strong,{children:"src"})," folder that contains the ",(0,e.jsx)(n.strong,{children:"index.tsx"})," file and the ",(0,e.jsx)(n.strong,{children:"components"})," folder. The ",(0,e.jsx)(n.strong,{children:"components"})," folder simply contains the ",(0,e.jsx)(n.strong,{children:"slider.tsx"}),"."]}),` `,(0,e.jsxs)(n.p,{children:["Since the Slider implements the ",(0,e.jsx)(n.strong,{children:"Pan"})," Gesture, I've wrapped all the App with the ",(0,e.jsx)(n.strong,{children:"GestureHandlerRootView"})," component."]}),` `,(0,e.jsx)(n.div,{className:"remark-code-title",children:"title=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:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"StyleSheet"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"View"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react-native'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"})})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"GestureHandlerRootView"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react-native-gesture-handler'"}),` `]}),(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:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Slider"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'./components/slider'"}),` `]}),(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"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"App"})," ",(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 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:"View"})]})," ",(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:"{"}),"styles",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"container"}),(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:"Slider"})]})," ",(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.jsxs)(n.span,{className:"code-line",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 highlight-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"AppContainer"})," ",(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 method function property-access",children:"memo"}),(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 highlight-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 highlight-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:"GestureHandlerRootView"})]})," ",(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:"{"}),"styles",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"fill"}),(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 highlight-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:"App"})]})," ",(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 highlight-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 highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-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.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," styles ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"StyleSheet"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"create"}),(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 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:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsxs)(n.span,{className:"token exports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"AppContainer"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"as"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"App"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})]})}),` `,(0,e.jsxs)(n.h2,{id:"the-slider-component",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#the-slider-component",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"The Slider Component"]}),` `,(0,e.jsx)(n.p,{children:"The Slider is, of course, the heart of the project. The code feels a bit complex, but it's not. There are few important things going on here."}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsx)(n.li,{children:"Handling the Picker (Pan Gesture)"}),` `,(0,e.jsx)(n.li,{children:"Animating the Balloon (with rotation)"}),` `,(0,e.jsx)(n.li,{children:"Animating the Text"}),` `]}),` `,(0,e.jsxs)(n.h3,{id:"handling-the-picker",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#handling-the-picker",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Handling the Picker"]}),` `,(0,e.jsx)(n.p,{children:"Here's the main part of the code that handles the Picker (Pan Gesture)."}),` `,(0,e.jsx)(n.div,{className:"remark-code-title",children:"src/components/slider.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 spread operator",children:"..."}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," defaultPickerBorderRadius ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," pickerSize ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token number",children:"2.5"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," defaultPickerBorderWidth ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"floor"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"pickerSize ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token number",children:"3"}),(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"})," defaultScale ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"0.7"}),` `]}),(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"})," translateX ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useSharedValue"}),(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.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," contextX ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useSharedValue"}),(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:"code-line",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:"useSharedValue"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"defaultScale",(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"})," pickerBorderRadius ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useSharedValue"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"defaultPickerBorderRadius",(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"})," pickerBorderWidth ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useSharedValue"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"defaultPickerBorderWidth",(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"})," clampedTranslateX ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useDerivedValue"}),(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 function",children:"clamp"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"translateX",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"}),(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:","})," sliderWidth",(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 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"})," gesture ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Gesture"}),(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:"Pan"})}),(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 method function property-access",children:"onBegin"}),(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:[" pickerBorderRadius",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"withTiming"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"pickerSize ",(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:[" pickerBorderWidth",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"withTiming"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"4"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" scale",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"withTiming"}),(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.jsxs)(n.span,{className:"code-line",children:[" contextX",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," clampedTranslateX",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"}),` `]}),(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 method function property-access",children:"onUpdate"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"event",(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:[" translateX",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," contextX",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," event",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"translationX"}),` `]}),(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 method function property-access",children:"onFinalize"}),(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:[" scale",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"withTiming"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"defaultScale",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" pickerBorderRadius",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"withTiming"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"defaultPickerBorderRadius",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" pickerBorderWidth",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"withTiming"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"defaultPickerBorderWidth",(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.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," rPickerStyle ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useAnimatedStyle"}),(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:[" borderWidth",(0,e.jsx)(n.span,{className:"token operator",children:":"})," pickerBorderWidth",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" borderRadius",(0,e.jsx)(n.span,{className:"token operator",children:":"})," pickerBorderRadius",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" transform",(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:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," translateX",(0,e.jsx)(n.span,{className:"token operator",children:":"})," clampedTranslateX",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"-"})," pickerSize ",(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.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:[" 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:"value"}),(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:[" ",(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 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"})," rProgressBarStyle ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useAnimatedStyle"}),(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:[" width",(0,e.jsx)(n.span,{className:"token operator",children:":"})," clampedTranslateX",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"}),(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:"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 spread operator",children:"..."}),` `]})]})}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsxs)(n.li,{children:[` `,(0,e.jsxs)(n.p,{children:["The first three lines define some constants that are used later in the code. ",(0,e.jsx)(n.strong,{children:"defaultPickerBorderRadius"})," is the default border radius for the circular slider knob, based on the size of the knob. ",(0,e.jsx)(n.strong,{children:"defaultPickerBorderWidth"})," is the default border width for the slider knob, again based on its size. defaultScale is the default scale of the slider knob."]}),` `]}),` `,(0,e.jsxs)(n.li,{children:[` `,(0,e.jsx)(n.p,{children:"The next six lines define some useSharedValue and useDerivedValue hooks, which are provided by the react-native-reanimated library."}),` `]}),` `]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:[` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:"translateX"})," is a shared value that represents the current x-axis translation of the slider knob."]}),` `]}),` `,(0,e.jsxs)(n.li,{children:[` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:"contextX"})," is another shared value that is used to keep track of the x-axis position of the slider knob when a pan gesture begins."]}),` `]}),` `,(0,e.jsxs)(n.li,{children:[` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:"scale"}),", ",(0,e.jsx)(n.strong,{children:"pickerBorderRadius"}),", and ",(0,e.jsx)(n.strong,{children:"pickerBorderWidth"})," are all shared values that represent the current scale, border radius, and border width of the slider knob, respectively."]}),` `]}),` `,(0,e.jsxs)(n.li,{children:[` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:"clampedTranslateX"})," is a derived value that ensures the slider knob is always within the bounds of the slider. It clamps the translateX value between 0 and sliderWidth, where sliderWidth is the width of the entire slider component."]}),` `]}),` `]}),` `,(0,e.jsxs)(n.ol,{start:"3",children:[` `,(0,e.jsxs)(n.li,{children:["The next few lines define a ",(0,e.jsx)(n.strong,{children:"Gesture.Pan()"})," gesture handler using the react-native-reanimated Gesture API. This gesture handler will be used to track the user's touch movements on the slider and update the values of the shared values accordingly."]}),` `]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"onBegin"}),' is a callback that runs when a pan gesture begins. In this case, it sets the scale, border radius, and border width of the slider knob to their "active" values, and stores the current translateX value in contextX.']}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"onUpdate"})," is a callback that runs whenever the user's finger moves on the slider. It updates the translateX value with the new x-axis translation of the slider knob, relative to its initial position when the gesture began."]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"onFinalize"})," is a callback that runs when a pan gesture ends. In this case, it resets the scale, border radius, and border width of the slider knob to their default values."]}),` `]}),` `,(0,e.jsxs)(n.ol,{start:"4",children:[` `,(0,e.jsx)(n.li,{children:"Finally, the code defines a useAnimatedStyle hook, which is another react-native-reanimated hook. This hook returns an object with some style properties that are based on the current values of the shared values."}),` `]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"borderWidth"})," is set to the current value of pickerBorderWidth."]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"borderRadius"})," is set to the current value of pickerBorderRadius."]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"transform"})," is an array of transformations that are applied to the slider knob. The first transformation is a translateX transformation that centers the knob around its current position. The second transformation is a scale transformation that sets the scale of the knob to the current value of scale."]}),` `]}),` `,(0,e.jsxs)(n.h3,{id:"animating-the-balloon",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#animating-the-balloon",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Animating the Balloon"]}),` `,(0,e.jsxs)(n.p,{children:["The first step in order to animate the Balloon is to define another Shared Value that represents the current X. By checking the Balloon animation, you can easily see that the Balloon is moving with a spring delay (I've achieved a very similar effect in this ",(0,e.jsx)(n.a,{href:"https://youtu.be/xpT2shjX790",children:"video"}),`). This is done by using the `,(0,e.jsx)(n.strong,{children:"useDerivedValue"})," hook from ",(0,e.jsx)(n.strong,{children:"react-native-reanimated"}),"."]}),` `,(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"})," balloonSliderX ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useDerivedValue"}),(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 function",children:"withSpring"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"clampedTranslateX",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"}),(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 punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"In order to evaluate the rotation, we need to use some math:"}),` `,(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"})," balloonWidth ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," pickerSize ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token number",children:"15"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," balloonHeight ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," balloonWidth ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1.4"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," balloonBottom ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," pickerSize ",(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token number",children:"0.8"}),` `]}),(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"})," balloonSliderRotate ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useDerivedValue"}),(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:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"-"}),(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token constant",children:"PI"})," ",(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 operator",children:"+"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"atan2"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" balloonHeight ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," balloonBottom",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token comment",children:"// balloon top height"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" balloonSliderX",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"-"})," clampedTranslateX",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"}),` `]}),(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.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 punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["The ",(0,e.jsx)(n.strong,{children:"balloonSliderRotate"})," is a derived value that represents the rotation of the Balloon. It is calculated by using the ",(0,e.jsx)(n.strong,{children:"Math.atan2"})," function, which returns the angle in radians between the positive x-axis and the line from (0, 0) to (x, y)."]}),` `,(0,e.jsx)(n.p,{children:"Since Math.atan2 at the beginning is equal to Math.PI / 2, we need to subtract it from the result, in order to start with a rotation of 0."}),` `,(0,e.jsxs)(n.p,{children:["We can specify the translateX and rotate transformations in the ",(0,e.jsx)(n.strong,{children:"useAnimatedStyle"})," hook:"]}),` `,(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"})," rBalloonProgressStyle ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useAnimatedStyle"}),(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:[" transform",(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:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" translateX",(0,e.jsx)(n.span,{className:"token operator",children:":"})," balloonSliderX",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"}),(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:"{"})," rotate",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,e.jsx)(n.span,{className:"token operator",children:"-"}),"balloonSliderRotate",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"value",(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string",children:"rad"}),(0,e.jsx)(n.span,{className:"token template-punctuation string",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.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 punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["I've wrapped the Balloon component into a Skia Canvas (in order to render an SVG), and then I've wrapped the Canvas into an Animated.View, in order to apply the ",(0,e.jsx)(n.strong,{children:"rBalloonProgressStyle"})," style."]}),` `,(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.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.jsx)(n.span,{className:"token spread operator",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:"Animated.View"})]}),` `]})]}),(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 punctuation",children:"["}),` `]})]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" position",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'absolute'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" height",(0,e.jsx)(n.span,{className:"token operator",children:":"})," balloonHeight",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" bottom",(0,e.jsx)(n.span,{className:"token operator",children:":"})," balloonBottom",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" width",(0,e.jsx)(n.span,{className:"token operator",children:":"})," balloonWidth",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" left",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"-"}),"balloonWidth ",(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.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",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.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" rBalloonProgressStyle",(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 script language-javascript",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.jsx)(n.span,{className:"token class-name",children:"Canvas"})]})," ",(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 punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"StyleSheet"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"absoluteFillObject"})," ",(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.jsx)(n.span,{className:"token class-name",children:"FitBox"})]}),` `]})]}),(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:"src"}),(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 function",children:"rect"}),(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 number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token number",children:"543"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token number",children:"711"}),(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.jsx)(n.span,{className:"token attr-name",children:"dst"}),(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 function",children:"rect"}),(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 number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," balloonWidth",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," balloonHeight",(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.jsx)(n.span,{className:"token class-name",children:"Path"})]})," ",(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:"token attr-name",children:"path"}),(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 maybe-class-name",children:"BalloonPath"}),(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 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 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:"ReText"})]})," ",(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:"{"}),"rBalloonText",(0,e.jsx)(n.span,{className:"token punctuation",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:"{"}),"styles",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"balloonText"}),(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.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,e.jsxs)(n.h3,{id:"animating-the-text",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#animating-the-text",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Animating the Text"]}),` `,(0,e.jsxs)(n.p,{children:["The code for animating the Text is pretty simple. We use the ",(0,e.jsx)(n.strong,{children:"ReText"})," component from ",(0,e.jsx)(n.strong,{children:"react-native-redash"})," to render the Text component."]}),` `,(0,e.jsx)(n.div,{className:"remark-code-title",children:"src/components/slider.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 spread operator",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"})," rBalloonText ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useDerivedValue"}),(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"})," interpolatedValue ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"interpolate"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" balloonSliderX",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"}),(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 number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," sliderWidth",(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:"["}),"minValue",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," maxValue",(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 maybe-class-name",children:"Extrapolate"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token constant",children:"CLAMP"}),(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 keyword",children:"return"})," ",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"Math",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"floor"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"interpolatedValue",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token template-punctuation string",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:"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 spread operator",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.jsx)(n.span,{className:"token spread operator",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:"ReText"})]})," ",(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:"{"}),"rBalloonText",(0,e.jsx)(n.span,{className:"token punctuation",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:"{"}),"styles",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"balloonText"}),(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 spread operator",children:"..."}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["This code defines a ",(0,e.jsx)(n.strong,{children:"useDerivedValue"})," hook that calculates a value to be displayed on a ReText component."]}),` `,(0,e.jsx)(n.p,{children:"The useDerivedValue hook takes a function that returns a derived value that will be updated whenever one of its dependencies changes. In this case, the function calculates the interpolated value based on the position of a slider."}),` `,(0,e.jsxs)(n.p,{children:["The interpolate function is used to map the value of balloonSliderX (which represents the position of the slider) from a range of ",(0,e.jsx)(n.strong,{children:"[0, sliderWidth]"})," to a range of ",(0,e.jsx)(n.strong,{children:"[minValue, maxValue]"}),". Extrapolate.CLAMP is used to limit the output value to be within the range of ",(0,e.jsx)(n.strong,{children:"[minValue, maxValue]"}),"."]}),` `,(0,e.jsx)(n.p,{children:"The interpolated value is then converted to a string with Math.floor, and the result is returned from the useDerivedValue hook."}),` `,(0,e.jsxs)(n.p,{children:["Finally, the derived value ",(0,e.jsx)(n.strong,{children:"rBalloonText"})," is rendered in a ",(0,e.jsx)(n.strong,{children:"ReText"})," component with the text prop."]}),` `,(0,e.jsx)(c,{type:"warning",title:"ReText vs AnimateableText",subtitle:"Since I've created the project with Expo Go, I've used the ReText component from react-native-redash. If you can support native modules, I really recommend to use the AnimateableText from https://www.npmjs.com/package/react-native-animateable-text for this specific use case."}),` `,(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:`In this article, we've seen how to use the react-native-reanimated library to create a custom slider component with a Balloon animation. We've also seen how to use the react-native-redash library to create a custom Text component that animates the text when the value changes. I hope you've enjoyed this article, and I hope you've learned something new. If you have any questions, feel free to ask them in the comments on Patreon, I'll be happy to answer them.`})]})}function v(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=v;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 x;})(); ;return Component;