var Component=(()=>{var m=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var o=e=>t(e,"__esModule",{value:!0});var g=(e,s)=>()=>(s||e((s={exports:{}}).exports,s),s.exports),b=(e,s)=>{o(e);for(var c in s)t(e,c,{get:s[c],enumerable:!0})},y=(e,s,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let a of u(s))!k.call(e,a)&&a!=="default"&&t(e,a,{get:()=>s[a],enumerable:!(c=h(s,a))||c.enumerable});return e},x=e=>y(o(t(e!=null?m(N(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);var p=g((I,r)=>{r.exports=_jsx_runtime});var B={};b(B,{default:()=>w,frontmatter:()=>v});var n=x(p()),v={title:"Fancy Bottom Bar with RN Skia",date:"2023-02-15",lastmod:"2023-02-15",tags:["react-native","react","react-native-skia"],draft:!1,layout:"PostLayout",accessCode:"3a7ecfdbb4393a4dcca97c95085d6957ebd23fa64d0de62af027518fbf9923f4",vimeoId:"798006343"};function f(e={}){let{wrapper:s}=e.components||{};return s?(0,n.jsx)(s,Object.assign({},e,{children:(0,n.jsx)(c,{})})):c();function c(){let a=Object.assign({h2:"h2",a:"a",span:"span",p:"p",ul:"ul",li:"li",code:"code",h3:"h3",pre:"pre",strong:"strong",h4:"h4"},e.components),{VideoPlayer:l,Image:i}=a;return i||d("Image",!0),l||d("VideoPlayer",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(a.h2,{id:"introduction",children:[(0,n.jsx)(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#introduction",children:(0,n.jsx)(a.span,{className:"icon icon-link"})}),"Introduction"]}),` `,(0,n.jsx)(a.p,{children:"What's going on Patreons? I hope you're doing well. I really want to thank you for your support!"}),` `,(0,n.jsxs)(a.p,{children:[`In this article, we will be building a fancy bottom bar with React Native Skia. I've seen this type of BottomBar in an exceptional Medium Article: `,(0,n.jsx)(a.a,{href:"https://medium.com/@tonyowen/flutter-bottom-tab-bar-animation-75d1ca58c096",children:"Flutter \u2014 Bottom Tab Bar animation"}),"."]}),` `,(0,n.jsx)(a.p,{children:`As you might have guessed, there's a "slightly" different approach between the two implementations, since on this time we're going to use React Native \u{1F644}.`}),` `,(0,n.jsx)(l,{video:e.vimeoId}),` `,(0,n.jsx)(a.p,{children:"Before moving on, keep in mind that this article is definitely easier to understand if you have the code opened in your editor."}),` `,(0,n.jsxs)(a.h2,{id:"getting-started",children:[(0,n.jsx)(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#getting-started",children:(0,n.jsx)(a.span,{className:"icon icon-link"})}),"Getting Started"]}),` `,(0,n.jsx)(a.p,{children:"This BottomBar is fully compatible with React Navigation, so you can use it in your existing projects."}),` `,(0,n.jsxs)(a.p,{children:["As you might know, React Navigation is a library that provides a way to navigate between screens in your app. It's a very popular library, and it's used in a lot of apps. If you're not familiar with it, I recommend you to check out the ",(0,n.jsx)(a.a,{href:"https://reactnavigation.org/",children:"official documentation"}),". It's very well written, and it's easy to follow."]}),` `,(0,n.jsx)(a.p,{children:"The dependencies we're going to use from React Navigation are:"}),` `,(0,n.jsxs)(a.ul,{children:[` `,(0,n.jsx)(a.li,{children:(0,n.jsx)(a.code,{children:"@react-navigation/native"})}),` `,(0,n.jsx)(a.li,{children:(0,n.jsx)(a.code,{children:"@react-navigation/bottom-tabs"})}),` `]}),` `,(0,n.jsxs)(a.h3,{id:"dependencies",children:[(0,n.jsx)(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#dependencies",children:(0,n.jsx)(a.span,{className:"icon icon-link"})}),"Dependencies"]}),` `,(0,n.jsx)(a.pre,{className:"language-bash",children:(0,n.jsx)(a.code,{className:"language-bash code-highlight",children:(0,n.jsxs)(a.span,{className:"code-line",children:["npx expo ",(0,n.jsx)(a.span,{className:"token function",children:"install"}),` @react-navigation/native @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context `]})})}),` `,(0,n.jsx)(a.p,{children:"Since we're going to use React Native Skia as well, we need to install the RN Skia package."}),` `,(0,n.jsx)(a.pre,{className:"language-bash",children:(0,n.jsx)(a.code,{className:"language-bash code-highlight",children:(0,n.jsxs)(a.span,{className:"code-line",children:["npx expo ",(0,n.jsx)(a.span,{className:"token function",children:"install"}),` @shopify/react-native-skia `]})})}),` `,(0,n.jsxs)(a.p,{children:["To simplify the handling of the Tap gesture in the BottomBar, we're going to use the ",(0,n.jsx)(a.code,{children:"react-native-skia-gesture"})," package."]}),` `,(0,n.jsx)(a.pre,{className:"language-bash",children:(0,n.jsx)(a.code,{className:"language-bash code-highlight",children:(0,n.jsxs)(a.span,{className:"code-line",children:["npx expo ",(0,n.jsx)(a.span,{className:"token function",children:"install"}),` react-native-skia-gesture `]})})}),` `,(0,n.jsxs)(a.h2,{id:"project-structure",children:[(0,n.jsx)(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#project-structure",children:(0,n.jsx)(a.span,{className:"icon icon-link"})}),"Project Structure"]}),` `,(0,n.jsxs)(a.p,{children:["The project structure is pretty simple. The main component is the ",(0,n.jsx)(a.code,{children:"App"})," component, which is the root of the app. It's responsible for rendering the ",(0,n.jsx)(a.code,{children:"BottomBar"})," component."]}),` `,(0,n.jsx)("div",{className:"remark-code-title",children:"src/index.tsx"}),` `,(0,n.jsx)(a.pre,{className:"language-tsx",children:(0,n.jsxs)(a.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(a.span,{className:"token imports",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"{"})," createBottomTabNavigator ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(a.span,{className:"token string",children:"'@react-navigation/bottom-tabs'"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(a.span,{className:"token imports",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"View"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(a.span,{className:"token string",children:"'react-native'"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(a.span,{className:"token imports",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"BottomTabBar"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(a.span,{className:"token string",children:"'./components/bottom-tab-bar'"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(a.span,{className:"token imports",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"ScreenNames"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(a.span,{className:"token string",children:"'./constants/screens'"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"BottomTab"})," ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token function",children:"createBottomTabNavigator"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(a.span,{className:"token function-variable function",children:"BackgroundView"})," ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(a.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token keyword",children:"return"})," ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"View"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"style"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"})," flex",(0,n.jsx)(a.span,{className:"token operator",children:":"})," ",(0,n.jsx)(a.span,{className:"token number",children:"1"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," backgroundColor",(0,n.jsx)(a.span,{className:"token operator",children:":"})," ",(0,n.jsx)(a.span,{className:"token string",children:"'rgba(0,0,0,0.1)'"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(a.span,{className:"token function-variable function",children:"App"})," ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(a.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"BottomTab.Navigator"})]}),` `]})]}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token comment",children:"// eslint-disable-next-line react/no-unstable-nested-components"}),` `]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"tabBar"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),"props",(0,n.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(a.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsx)(a.span,{className:"token tag",children:(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[" ",(0,n.jsx)(a.span,{className:"token keyword",children:"return"})," ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"BottomTabBar"})]})," ",(0,n.jsxs)(a.span,{className:"token spread",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(a.span,{className:"token spread operator",children:"..."}),"props",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"/>"})]}),` `]})})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"BottomTab.Screen"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"name"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access",children:(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"Home"})}),(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"component"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"BackgroundView"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"BottomTab.Screen"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"name"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access",children:(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"Search"})}),(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"component"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"BackgroundView"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"BottomTab.Screen"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"name"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access",children:(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"User"})}),(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"component"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"BackgroundView"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"export"})," ",(0,n.jsxs)(a.span,{className:"token exports",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"App"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})]})}),` `,(0,n.jsx)(a.p,{children:"The ScreenNames are just the names of the screens that we're going to use in the BottomBar."}),` `,(0,n.jsx)("div",{className:"remark-code-title",children:"src/constants/screens.ts"}),` `,(0,n.jsx)(a.pre,{className:"language-ts",children:(0,n.jsxs)(a.code,{className:"language-ts code-highlight",children:[(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," ScreenNames ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" Home",(0,n.jsx)(a.span,{className:"token operator",children:":"})," ",(0,n.jsx)(a.span,{className:"token string",children:"'Home'"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" Search",(0,n.jsx)(a.span,{className:"token operator",children:":"})," ",(0,n.jsx)(a.span,{className:"token string",children:"'Search'"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" User",(0,n.jsx)(a.span,{className:"token operator",children:":"})," ",(0,n.jsx)(a.span,{className:"token string",children:"'User'"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(a.span,{className:"token keyword",children:"as"})," ",(0,n.jsx)(a.span,{className:"token keyword",children:"const"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"})," ScreenNames ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsx)(a.p,{children:"Of course you can add more screens if you want."}),` `,(0,n.jsxs)(a.h2,{id:"bottombar-component",children:[(0,n.jsx)(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#bottombar-component",children:(0,n.jsx)(a.span,{className:"icon icon-link"})}),"BottomBar Component"]}),` `,(0,n.jsx)(a.p,{children:"The BottomBar component is the main component of this article. It's responsible for rendering the BottomBar."}),` `,(0,n.jsx)(a.p,{children:'This hardest part on the BottomBar is definitely the "smooth border" between the Circle and the Bar.'}),` `,(0,n.jsx)(i,{src:"/static/images/patreon/fancy-bottom-bar/border.png",className:"rounded-md",width:300,height:230,alt:"Fancy Bottom Bar border"}),` `,(0,n.jsx)(a.p,{children:"This effect lies behind this code."}),` `,(0,n.jsx)("div",{className:"remark-code-title",children:"src/components/bottom-tab-bar.tsx"}),` `,(0,n.jsx)(a.pre,{className:"language-tsx",children:(0,n.jsxs)(a.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token spread operator",children:"..."}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"Group"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"layer"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"paint",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"Path"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"path"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"bottomTabPath",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"color"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"white",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token spread operator",children:"..."}),` `]})]})}),` `,(0,n.jsx)(a.p,{children:"The bottomTabPath is actually the effective path of the BottomBar. It's a combination of a rectangle and a circle. The rectangle is responsible for the Bar, and the circle is responsible for the highlighted item."}),` `,(0,n.jsx)("div",{className:"remark-code-title",children:"src/components/bottom-tab-bar.tsx"}),` `,(0,n.jsx)(a.pre,{className:"language-tsx",children:(0,n.jsxs)(a.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token spread operator",children:"..."}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," bottomTabPath ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token function",children:"useComputedValue"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(a.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," path ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"Skia"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access",children:(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"Path"})}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token method function property-access",children:(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"Make"})}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" path",(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token method function property-access",children:"addRect"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token function",children:"rect"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token operator",children:"-"}),(0,n.jsx)(a.span,{className:"token number",children:"10"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token number",children:"45"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" screenWidth ",(0,n.jsx)(a.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(a.span,{className:"token number",children:"50"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" bottomTabBarHeight ",(0,n.jsx)(a.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(a.span,{className:"token constant",children:"BOTTOM_BAR_HEIGHT_OFFSET"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" path",(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token method function property-access",children:"addCircle"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" animatedCircleCx",(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access",children:"current"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token constant",children:"BOTTOM_BAR_HEIGHT_OFFSET"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token constant",children:"BOTTOM_BAR_HEIGHT_OFFSET"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token keyword",children:"return"})," path",(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"["}),"screenWidth",(0,n.jsx)(a.span,{className:"token punctuation",children:","})," bottomTabBarHeight",(0,n.jsx)(a.span,{className:"token punctuation",children:","})," animatedCircleCx",(0,n.jsx)(a.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token spread operator",children:"..."}),` `]})]})}),` `,(0,n.jsxs)(a.p,{children:["However the secret ingredient is definitely the ",(0,n.jsx)(a.code,{children:"paint"})," layer."]}),` `,(0,n.jsx)("div",{className:"remark-code-title",children:"src/components/bottom-tab-bar/index.tsx"}),` `,(0,n.jsx)(a.pre,{className:"language-tsx",children:(0,n.jsxs)(a.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token spread operator",children:"..."}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," paint ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token function",children:"useMemo"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(a.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"Paint"})]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"Blur"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"blur"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(a.span,{className:"token number",children:"5"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"ColorMatrix"})]}),` `]})]}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"matrix"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"["}),` `]})]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsx)(a.span,{className:"token tag",children:(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[" ",(0,n.jsx)(a.span,{className:"token comment",children:"// R, G, B, A, Position"}),` `]})})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsx)(a.span,{className:"token tag",children:(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[" ",(0,n.jsx)(a.span,{className:"token comment",children:"// prettier-ignore"}),` `]})})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsx)(a.span,{className:"token tag",children:(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[" ",(0,n.jsx)(a.span,{className:"token number",children:"1"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]})})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsx)(a.span,{className:"token tag",children:(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[" ",(0,n.jsx)(a.span,{className:"token comment",children:"// prettier-ignore"}),` `]})})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsx)(a.span,{className:"token tag",children:(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[" ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"1"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]})})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsx)(a.span,{className:"token tag",children:(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[" ",(0,n.jsx)(a.span,{className:"token comment",children:"// prettier-ignore"}),` `]})})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsx)(a.span,{className:"token tag",children:(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[" ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"1"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]})})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsx)(a.span,{className:"token tag",children:(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[" ",(0,n.jsx)(a.span,{className:"token comment",children:"// prettier-ignore"}),` `]})})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsx)(a.span,{className:"token tag",children:(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[" ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"20"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token operator",children:"-"}),(0,n.jsx)(a.span,{className:"token number",children:"10"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]})})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"["}),(0,n.jsx)(a.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token spread operator",children:"..."}),` `]})]})}),` `,(0,n.jsxs)(a.p,{children:["You may wonder why we're using this ",(0,n.jsx)(a.strong,{children:"ColorMatrix"})," and why we're using a ",(0,n.jsx)(a.strong,{children:"Blur"})," layer? I do really recommend to check out this ",(0,n.jsx)(a.a,{href:"https://youtu.be/pErnuAx5GjE",children:"video from William Candillon"})," for a better understanding."]}),` `,(0,n.jsx)(a.p,{children:"Basically the trick is to Blur the Path and then apply a ColorMatrix to the blurred path. The ColorMatrix will multiply the color of the blurred path by the matrix values. In this case, we're using a matrix that will multiply the alpha value by 20 and then subtract 10 from it."}),` `,(0,n.jsxs)(a.h4,{id:"bottom-tab-bar-animation",children:[(0,n.jsx)(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#bottom-tab-bar-animation",children:(0,n.jsx)(a.span,{className:"icon icon-link"})}),"Bottom Tab Bar animation"]}),` `,(0,n.jsxs)(a.p,{children:["In order to animate the BottomBar, we're listening the currentIndex (state.index) and then we're animating the ",(0,n.jsx)(a.strong,{children:"animatedIndex"})," value. The ",(0,n.jsx)(a.strong,{children:"animatedIndex"})," value is used to calculate the ",(0,n.jsx)(a.strong,{children:"animatedCircleCx"})," value, which is the x position of the circle."]}),` `,(0,n.jsx)("div",{className:"remark-code-title",children:"src/components/bottom-tab-bar/index.tsx"}),` `,(0,n.jsx)(a.pre,{className:"language-tsx",children:(0,n.jsxs)(a.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," currentIndex ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," state",(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access",children:"index"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," animatedIndex ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token function",children:"useValue"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),"currentIndex",(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token function",children:"useEffect"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(a.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token function",children:"runSpring"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" animatedIndex",(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"})," to",(0,n.jsx)(a.span,{className:"token operator",children:":"})," currentIndex ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" mass",(0,n.jsx)(a.span,{className:"token operator",children:":"})," ",(0,n.jsx)(a.span,{className:"token number",children:"0.3"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token comment",children:"// eslint-disable-next-line react-hooks/exhaustive-deps"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"["}),"currentIndex",(0,n.jsx)(a.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," animatedCircleCx ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token function",children:"useComputedValue"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(a.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),"screenWidth ",(0,n.jsx)(a.span,{className:"token operator",children:"/"})," tabBarScreens",(0,n.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(a.span,{className:"token operator",children:"*"})," animatedIndex",(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access",children:"current"})," ",(0,n.jsx)(a.span,{className:"token operator",children:"+"})," screenWidth ",(0,n.jsx)(a.span,{className:"token operator",children:"/"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),"tabBarScreens ",(0,n.jsx)(a.span,{className:"token operator",children:"*"})," ",(0,n.jsx)(a.span,{className:"token number",children:"2"}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"["}),"screenWidth",(0,n.jsx)(a.span,{className:"token punctuation",children:","})," animatedIndex",(0,n.jsx)(a.span,{className:"token punctuation",children:","})," tabBarScreens",(0,n.jsx)(a.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,n.jsxs)(a.p,{children:["As you've noticed the ",(0,n.jsx)(a.strong,{children:"animatedCircleCx"})," value is later used to calculate the ",(0,n.jsx)(a.strong,{children:"bottomTabPath"})," value."]}),` `,(0,n.jsxs)(a.h3,{id:"the-bottomtabitem-component",children:[(0,n.jsx)(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#the-bottomtabitem-component",children:(0,n.jsx)(a.span,{className:"icon icon-link"})}),"The BottomTabItem component"]}),` `,(0,n.jsxs)(a.p,{children:["The BottomTabItem is the component that renders the item in the BottomBar. The interesting part is the ",(0,n.jsx)(a.code,{children:"onEnd"})," callback. I mean... we're talking about Skia components, how can we handle the onEnd callback?"]}),` `,(0,n.jsx)(a.pre,{className:"language-tsx",children:(0,n.jsxs)(a.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token spread operator",children:"..."}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token known-class-name class-name",children:"Object"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token method function property-access",children:"values"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token method function property-access",children:"map"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),"screenName",(0,n.jsx)(a.span,{className:"token punctuation",children:","})," index",(0,n.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(a.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"BottomTabItem"})]}),` `]})]}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"index"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"index",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"currentIndex"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"currentIndex",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"x"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),"screenWidth ",(0,n.jsx)(a.span,{className:"token operator",children:"/"})," tabBarScreens",(0,n.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(a.span,{className:"token operator",children:"*"})," index",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"y"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(a.span,{className:"token constant",children:"BOTTOM_BAR_HEIGHT_OFFSET"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"onEnd"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(a.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsx)(a.span,{className:"token tag",children:(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[" navigation",(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token method function property-access",children:"navigate"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),"screenName",(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),` `]})})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"height"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"bottomTabBarHeight",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"width"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"screenWidth ",(0,n.jsx)(a.span,{className:"token operator",children:"/"})," tabBarScreens",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"key"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"screenName",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token spread operator",children:"..."}),` `]})]})}),` `,(0,n.jsxs)(a.p,{children:["The answer is pretty simple. We're using the ",(0,n.jsx)(a.code,{children:"react-native-skia-gesture"})," package. By using the ",(0,n.jsx)(a.code,{children:"Touchable.Rect"})," component, we can easily handle the Tap gesture."]}),` `,(0,n.jsx)("div",{className:"remark-code-title",children:"src/components/bottom-tab-item/index.tsx"}),` `,(0,n.jsx)(a.pre,{className:"language-tsx",children:(0,n.jsxs)(a.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token spread operator",children:"..."}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"Group"})]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"Touchable.Rect"})]}),` `]})]}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"x"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"x",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"onEnd"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"onEnd",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"height"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"height",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"width"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"width",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"y"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"y",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"color"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"transparent",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"Group"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"transform"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"transform",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"BottomTabItemContent"})]}),` `]})]}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"iconColor"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"iconColor",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"index"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"index",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token attr-name",children:"iconSize"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"iconSize",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token spread operator",children:"..."}),` `]})]})}),` `,(0,n.jsxs)(a.h4,{id:"handling-the-bottomtabitem-icons",children:[(0,n.jsx)(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#handling-the-bottomtabitem-icons",children:(0,n.jsx)(a.span,{className:"icon icon-link"})}),"Handling the BottomTabItem icons"]}),` `,(0,n.jsx)(a.p,{children:"The BottomTabItemContent component is responsible for rendering the icons."}),` `,(0,n.jsx)("div",{className:"remark-code-title",children:"src/components/bottom-tab-item/bottom-tab-item-content.tsx"}),` `,(0,n.jsx)(a.pre,{className:"language-tsx",children:(0,n.jsxs)(a.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token spread operator",children:"..."}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(a.span,{className:"token constant",children:"BOTTOM_BAR_ICONS"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(a.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(a.span,{className:"token string",children:"'./svg-icons'"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"type"})," ",(0,n.jsx)(a.span,{className:"token class-name",children:"BottomTabItemProps"})," ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" iconColor",(0,n.jsx)(a.span,{className:"token operator",children:":"})," ",(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"SkiaValue"}),(0,n.jsx)(a.span,{className:"token operator",children:"<"}),(0,n.jsx)(a.span,{className:"token known-class-name class-name",children:"Float32Array"}),(0,n.jsx)(a.span,{className:"token operator",children:">"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" index",(0,n.jsx)(a.span,{className:"token operator",children:":"})," ",(0,n.jsx)(a.span,{className:"token builtin",children:"number"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" iconSize",(0,n.jsx)(a.span,{className:"token operator",children:":"})," ",(0,n.jsx)(a.span,{className:"token builtin",children:"number"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"BottomTabItemContent"}),(0,n.jsx)(a.span,{className:"token operator",children:":"})," ",(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token constant",children:"FC"}),(0,n.jsx)(a.span,{className:"token operator",children:"<"}),(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"BottomTabItemProps"}),(0,n.jsx)(a.span,{className:"token operator",children:">"})," ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token method function property-access",children:"memo"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"})," iconColor",(0,n.jsx)(a.span,{className:"token punctuation",children:","})," index",(0,n.jsx)(a.span,{className:"token punctuation",children:","})," iconSize ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(a.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token comment",children:"// eslint-disable-next-line @typescript-eslint/no-non-null-assertion"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," icon ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token constant",children:"BOTTOM_BAR_ICONS"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"["}),"index",(0,n.jsx)(a.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(a.span,{className:"token operator",children:"!"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"Group"})]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"FitBox"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"src"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"icon",(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access",children:"src"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"dst"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(a.span,{className:"token function",children:"rect"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," iconSize",(0,n.jsx)(a.span,{className:"token punctuation",children:","})," iconSize",(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(a.span,{className:"token class-name",children:"Path"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"color"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"iconColor",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"path"}),(0,n.jsxs)(a.span,{className:"token script language-javascript",children:[(0,n.jsx)(a.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),"icon",(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access",children:"path"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(a.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"export"})," ",(0,n.jsxs)(a.span,{className:"token exports",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"BottomTabItemContent"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `})]})}),` `,(0,n.jsxs)(a.p,{children:["The fancy part is the ",(0,n.jsx)(a.strong,{children:"FitBox"})," component. The FitBox component is responsible for scaling the SVG icon to the desired size."]}),` `,(0,n.jsxs)(a.p,{children:["In order to fully understand the usage of the ",(0,n.jsx)(a.strong,{children:"src"})," and ",(0,n.jsx)(a.strong,{children:"dst"})," props, let's check the ",(0,n.jsx)(a.strong,{children:"BOTTOM_BAR_ICONS"})," item."]}),` `,(0,n.jsx)("div",{className:"remark-code-title",children:"src/components/bottom-tab-item/svg-icons/index.ts"}),` `,(0,n.jsx)(a.pre,{className:"language-tsx",children:(0,n.jsxs)(a.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(a.span,{className:"token imports",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"{"})," rect",(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"Skia"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(a.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(a.span,{className:"token string",children:"'@shopify/react-native-skia'"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token comment",children:"// eslint-disable-next-line @typescript-eslint/no-non-null-assertion"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," searchPath ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"Skia"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access",children:(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"Path"})}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token method function property-access",children:(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"MakeFromSVGString"})}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token spread operator",children:"..."}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token operator",children:"!"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(a.span,{className:"token constant",children:"SEARCH_ICON"})," ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" path",(0,n.jsx)(a.span,{className:"token operator",children:":"})," searchPath",(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" src",(0,n.jsx)(a.span,{className:"token operator",children:":"})," ",(0,n.jsx)(a.span,{className:"token function",children:"rect"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"183.792"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"183.792"}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token comment",children:"// eslint-disable-next-line @typescript-eslint/no-non-null-assertion"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," userPath ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"Skia"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access",children:(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"Path"})}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token method function property-access",children:(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"MakeFromSVGString"})}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token spread operator",children:"..."}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token operator",children:"!"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(a.span,{className:"token constant",children:"USER_ICON"})," ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" path",(0,n.jsx)(a.span,{className:"token operator",children:":"})," userPath",(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" src",(0,n.jsx)(a.span,{className:"token operator",children:":"})," ",(0,n.jsx)(a.span,{className:"token function",children:"rect"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"1024"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"1024"}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token comment",children:"// eslint-disable-next-line @typescript-eslint/no-non-null-assertion"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," homePath ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"Skia"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access",children:(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"Path"})}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token method function property-access",children:(0,n.jsx)(a.span,{className:"token maybe-class-name",children:"MakeFromSVGString"})}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsx)(a.span,{className:"token spread operator",children:"..."}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token operator",children:"!"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(a.span,{className:"token constant",children:"HOME_ICON"})," ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" path",(0,n.jsx)(a.span,{className:"token operator",children:":"})," homePath",(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" src",(0,n.jsx)(a.span,{className:"token operator",children:":"})," ",(0,n.jsx)(a.span,{className:"token function",children:"rect"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"0"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"24"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token number",children:"24"}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(a.span,{className:"token constant",children:"BOTTOM_BAR_ICONS"})," ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"["}),(0,n.jsx)(a.span,{className:"token constant",children:"HOME_ICON"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token constant",children:"SEARCH_ICON"}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token constant",children:"USER_ICON"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` `}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(a.span,{className:"token constant",children:"BOTTOM_BAR_ICONS"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsxs)(a.p,{children:["The ",(0,n.jsx)(a.strong,{children:"src"})," prop is the source rectangle of the SVG icon. The ",(0,n.jsx)(a.strong,{children:"dst"})," prop is the destination rectangle of the SVG icon. The ",(0,n.jsx)(a.strong,{children:"FitBox"})," component will scale the SVG icon to fit the destination rectangle."]}),` `,(0,n.jsxs)(a.p,{children:["How did I choose the ",(0,n.jsx)(a.strong,{children:"src"})," prop? Let's take an example:"]}),` `,(0,n.jsx)("div",{className:"remark-code-title",children:"user-icon.svg"}),` `,(0,n.jsx)(a.pre,{className:"language-xml",children:(0,n.jsxs)(a.code,{className:"language-xml code-highlight",children:[(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token prolog",children:''}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),"svg"]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"width"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"800px",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"height"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"800px",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"viewBox"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"0 0 1024 1024",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"xmlns"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"http://www.w3.org/2000/svg",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),"path"]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"fill"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"#000000",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"d"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"M288 320a224 224 0 1 0 448 0 224 224 0 1 0-448 0zm544 608H160a32 32 0 0 1-32-32v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 0 1-32 32z",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(a.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,n.jsxs)(a.p,{children:["I've simply copied the ",(0,n.jsx)(a.strong,{children:"viewBox"})," attribute from the SVG icon and I've used it as the ",(0,n.jsx)(a.strong,{children:"src"})," prop."]}),` `,(0,n.jsx)(a.p,{children:"And that's it! We've successfully implemented the BottomBar animation."}),` `,(0,n.jsxs)(a.h2,{id:"conclusion",children:[(0,n.jsx)(a.a,{"aria-hidden":"true",tabIndex:"-1",href:"#conclusion",children:(0,n.jsx)(a.span,{className:"icon icon-link"})}),"Conclusion"]}),` `,(0,n.jsxs)(a.p,{children:["In this article, we've learned how to implement a BottomBar animation using React Native Skia. We've also learned how to use the ",(0,n.jsx)(a.strong,{children:"FitBox"})," component to scale the SVG icons. I hope you've enjoyed this article. If you have any questions, feel free to reach out to me on Twitter."]})]})}}var w=f;function d(e,s){throw new Error("Expected "+(s?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return B;})(); ;return Component;