var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var l=e=>t(e,"__esModule",{value:!0});var u=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),k=(e,n)=>{l(e);for(var s in n)t(e,s,{get:n[s],enumerable:!0})},g=(e,n,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of m(n))!N.call(e,c)&&c!=="default"&&t(e,c,{get:()=>n[c],enumerable:!(s=d(n,c))||s.enumerable});return e},y=e=>g(l(t(e!=null?p(h(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);var o=u((S,i)=>{i.exports=_jsx_runtime});var x={};k(x,{default:()=>w,frontmatter:()=>b});var a=y(o()),b={title:"Floating Bottom Bar with Skia and Reanimated",date:"2023-01-18",lastmod:"2023-01-18",tags:["react-native","react","reanimated","react-native-skia","react-navigation"],draft:!1,layout:"PostLayout",accessCode:"dad8cc9fb24cdc8516290134e6d919904d6c853f2cd077e06a6143f47068958e",vimeoId:"789446465"};function r(e){let n=Object.assign({h2:"h2",a:"a",span:"span",p:"p",h3:"h3",code:"code",pre:"pre",strong:"strong",div:"div",ul:"ul",li:"li"},e.components),{VideoPlayer:s}=n;return s||f("VideoPlayer",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.h2,{id:"introduction",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#introduction",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Introduction"]}),` `,(0,a.jsx)(n.p,{children:"Hello Patreons! How are you doing? Thank you for supporting me and for being here, when I see a new Patreon joining the community, I feel really happy and I'm really grateful for that."}),` `,(0,a.jsx)(n.p,{children:"In this article, I'm going to show you how to create a floating bottom bar with Skia and Reanimated."}),` `,(0,a.jsx)(s,{video:e.vimeoId}),` `,(0,a.jsx)(n.p,{children:"Keep in mind that this article will be much easier to understand if you have already the code opened in your editor."}),` `,(0,a.jsxs)(n.h3,{id:"how-to-use-the-bottom-bar",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-use-the-bottom-bar",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"How to use the Bottom Bar?"]}),` `,(0,a.jsx)(n.p,{children:"I love to create components that are easy to use and that can be reused in different projects. Fortunately, this one is really easy to plug in your project."}),` `,(0,a.jsxs)(n.p,{children:["Just extract the ",(0,a.jsx)(n.code,{children:"components/bottom-tab-bar"})," folder from the ",(0,a.jsx)(n.code,{children:"src"})," folder and paste it in your project. Then, import the ",(0,a.jsx)(n.code,{children:"BottomTabBar"})," component and use it like this:"]}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"BottomTab"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"createBottomTabNavigator"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"App"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"BottomTab.Navigator"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"tabBar"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"props",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"BottomTabBar"})]})," ",(0,a.jsxs)(n.span,{className:"token spread",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token spread operator",children:"..."}),"props",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token plain-text",children:` ... `})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["As you can see, the ",(0,a.jsx)(n.code,{children:"BottomTabBar"})," component relies completely on the BottomTab.Navigator which is provided by the ",(0,a.jsx)(n.code,{children:"react-navigation"})," package."]}),` `,(0,a.jsxs)(n.h3,{id:"dependencies-needed",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#dependencies-needed",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Dependencies needed"]}),` `,(0,a.jsx)(n.p,{children:"By checking the animation you can see that it's mainly built with Reanimated and Skia. So, we need to install these two packages:"}),` `,(0,a.jsx)(n.pre,{className:"language-bash",children:(0,a.jsx)(n.code,{className:"language-bash code-highlight",children:(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token function",children:"yarn"})," ",(0,a.jsx)(n.span,{className:"token function",children:"add"}),` react-native-reanimated @shopify/react-native-skia `]})})}),` `,(0,a.jsxs)(n.p,{children:["But since we're binding the BottomBar to the ",(0,a.jsx)(n.code,{children:"react-navigation"})," package, we also need to install the following dependencies:"]}),` `,(0,a.jsx)(n.pre,{className:"language-bash",children:(0,a.jsx)(n.code,{className:"language-bash code-highlight",children:(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token function",children:"yarn"})," ",(0,a.jsx)(n.span,{className:"token function",children:"add"}),` @react-navigation/bottom-tabs @react-navigation/native react-native-safe-area-context react-native-screen `]})})}),` `,(0,a.jsxs)(n.p,{children:["The icons are provided by the ",(0,a.jsx)(n.code,{children:"@expo/vector-icons"})," package, so we need to install it as well:"]}),` `,(0,a.jsx)(n.pre,{className:"language-bash",children:(0,a.jsx)(n.code,{className:"language-bash code-highlight",children:(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token function",children:"yarn"})," ",(0,a.jsx)(n.span,{className:"token function",children:"add"}),` @expo/vector-icons `]})})}),` `,(0,a.jsxs)(n.p,{children:["If you're not using Expo, you can simply use the ",(0,a.jsx)(n.code,{children:"react-native-vector-icons"})," package instead."]}),` `,(0,a.jsxs)(n.h2,{id:"the-bottombar-component",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#the-bottombar-component",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"The BottomBar component"]}),` `,(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.strong,{children:"BottomTabBar"})," component is a simple component that receives the ",(0,a.jsx)(n.strong,{children:"BottomTabBarProps"})," from the ",(0,a.jsx)(n.strong,{children:"react-navigation"}),` package. The screens are defined in the `,(0,a.jsx)(n.code,{children:"src/constants/screens.ts"})," file. You can add or remove screens from there."]}),` `,(0,a.jsx)(n.div,{className:"remark-code-title",children:"src/constants/screens.ts"}),` `,(0,a.jsx)(n.pre,{className:"language-ts",children:(0,a.jsxs)(n.code,{className:"language-ts code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ScreenNames ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" Home",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'Home'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" Bookmark",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'Bookmark'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" Add",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'Add'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" Profile",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'Profile'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" Settings",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'Settings'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"as"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ScreenNames ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["Inside the ",(0,a.jsx)(n.code,{children:"src/components/bottom-tab-bar/index.tsx"})," you can find the ",(0,a.jsx)(n.strong,{children:"BottomTabBar"}),` component. This is definitely the main component of this article, so let's take a look at it.`]}),` `,(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.strong,{children:"BottomTabBar"})," component is a functional component that takes in the state and navigation props from the ",(0,a.jsx)(n.strong,{children:"BottomTabBarProps"})," interface."]}),` `,(0,a.jsxs)(n.p,{children:["It uses the ",(0,a.jsx)(n.strong,{children:"useDerivedValue"}),` hook to create an animated index that changes when the user switches between tabs. The `,(0,a.jsx)(n.strong,{children:"currentIndex"})," variable is used to track the current index of the selected tab, and this value is passed to the ",(0,a.jsx)(n.strong,{children:"withTiming"})," function."]}),` `,(0,a.jsx)(n.div,{className:"remark-code-title",children:"src/components/bottom-tab-bar/index.tsx"}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"BottomTabBar"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token constant",children:"FC"}),(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"BottomTabBarProps"}),(0,a.jsx)(n.span,{className:"token operator",children:">"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," state",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," navigation ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," currentIndex ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," state",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"index"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," selectedAnimatedIndex ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useDerivedValue"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token function",children:"withTiming"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"currentIndex",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"currentIndex",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token spread operator",children:"..."}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,a.jsxs)(n.span,{className:"token exports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"BottomTabBar"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.strong,{children:"getIconByScreenName"})," function is used to return the appropriate icon for each tab based on the screen name. It takes a screen name as an argument and uses a switch statement to check which screen name is passed in and returns the corresponding icon."]}),` `,(0,a.jsxs)(n.p,{children:["The code then uses ",(0,a.jsx)(n.strong,{children:"Object.values(ScreenNames)"})," to map through all the screen names and render the corresponding icon for each screen name and returns the final render."]}),` `,(0,a.jsx)(n.div,{className:"remark-code-title",children:"src/components/bottom-tab-bar/index.tsx"}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"BottomTabBar"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token constant",children:"FC"}),(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"BottomTabBarProps"}),(0,a.jsx)(n.span,{className:"token operator",children:">"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," state",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," navigation ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token spread operator",children:"..."}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," getIconByScreenName ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useCallback"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"screenName",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"keyof"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"typeof"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"switch"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"screenName",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"case"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Home"})}),(0,a.jsx)(n.span,{className:"token operator",children:":"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Octicons"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"home",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"size"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"24"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"color"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"white",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"case"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Bookmark"})}),(0,a.jsx)(n.span,{className:"token operator",children:":"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Feather"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"bookmark",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"size"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"24"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"color"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"white",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"case"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Add"})}),(0,a.jsx)(n.span,{className:"token operator",children:":"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Ionicons"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"add-circle-outline",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"size"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"24"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"color"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"white",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"case"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Profile"})}),(0,a.jsx)(n.span,{className:"token operator",children:":"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Octicons"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"person",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"size"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"24"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"color"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"white",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"case"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Settings"})}),(0,a.jsx)(n.span,{className:"token operator",children:":"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Ionicons"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"settings-sharp",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"size"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"24"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"color"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"white",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Animated.View"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"..."}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsx)(n.span,{className:"token punctuation",children:"<"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token plain-text",children:` ... `})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Object"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"values"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"screenName",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," index",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"AnimatedOpacityView"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"key"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"index",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"styles",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"iconContainer"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onTouchEnd"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" navigation",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"navigate"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"screenName",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"index"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"index",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"activeIndex"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"selectedAnimatedIndex",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token function",children:"getIconByScreenName"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"screenName",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,a.jsxs)(n.span,{className:"token exports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"BottomTabBar"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["Regarding the animation the most important components are the ",(0,a.jsx)(n.strong,{children:"AnimatedOpacityView"})," and the ",(0,a.jsx)(n.strong,{children:"ShaderLight"})," components."]}),` `,(0,a.jsxs)(n.h3,{id:"shader-light",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#shader-light",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Shader Light"]}),` `,(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.strong,{children:"ShaderLight"})," component makes use of the ",(0,a.jsx)(n.strong,{children:"@shopify/react-native-skia"})," package, which provides a way to create and manipulate graphics using the Skia library."]}),` `,(0,a.jsxs)(n.p,{children:["The component starts by defining a source variable, which is a string of SkSL (Skia's shading language, very similar to GLSL) code that defines the behavior of the shader. This code defines a main function that takes in a vec2 (a 2-dimensional vector) called ",(0,a.jsx)(n.strong,{children:"pos"})," as an input."]}),` `,(0,a.jsx)(n.p,{children:"The function checks if the pos is inside an area defined by four points (a,b,c,d) using a isBetween function, which returns true if pos is inside the area and false otherwise. If pos is inside the area, the function sets the color of the pixel at that position to a gradient that goes from light to dark as the y value of the position increases."}),` `,(0,a.jsx)(n.div,{className:"remark-code-title",children:"src/components/bottom-tab-bar/shader-light.tsx"}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," source ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Skia"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"RuntimeEffect"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Make"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsx)(n.span,{className:"token string",children:` `})]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:`uniform vec2 a; `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:`uniform vec2 b; `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:`uniform vec2 c; `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:`uniform vec2 d; `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:`uniform vec2 canvas; `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:`// Returns the cross product of the two vectors (A,B) and (A,P) `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:`float crossProduct(vec2 A, vec2 B, vec2 P) { `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` return (B.x - A.x) * (P.y - A.y) - (B.y - A.y) * (P.x - A.x); `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:`} `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:`bool isBetween(vec2 A, vec2 B, vec2 C, vec2 D, vec2 P) { `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` float cp1 = crossProduct(A, B, P); `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` float cp2 = crossProduct(C, D, P); `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` // Check if P is on the same side of AB as C and on the same side of CD as A `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` return (cp1 > 0 && cp2 > 0) || (cp1 < 0 && cp2 < 0); `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:`} `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:`vec4 main(vec2 pos) { `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` // normalized x,y values go from 0 to 1 `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` vec2 normalized = pos/canvas; `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` float normalizedY = normalized.y; `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` float maxNormalizedRGB = 0.7; `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` // Check if pos is inside the area defined by a, b, c, and d `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` bool inside = isBetween(c, a, b, d, pos); `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` // If pos is inside the area, set color `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` vec4 color = vec4( `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` maxNormalizedRGB - normalizedY, `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` maxNormalizedRGB - normalizedY, `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` maxNormalizedRGB - normalizedY, `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` 0.0 `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` ); `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` if (inside) { `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` return color; `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` } `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` `})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token template-string",children:(0,a.jsx)(n.span,{className:"token string",children:` return vec4(0.0, 0.0, 0.0, 0.0); `})})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token string",children:"}"}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token operator",children:"!"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsx)(n.p,{children:"I'm not sure if this is the best way to do this, but I found it to be the funniest way to do it."}),` `,(0,a.jsxs)(n.p,{children:["Another interesting thing to note is that the ",(0,a.jsx)(n.strong,{children:"ShaderLight"})," component is a combination of two components:"]}),` `,(0,a.jsxs)(n.ul,{children:[` `,(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"ShaderLight"})," (the component that renders the shader)"]}),` `,(0,a.jsx)(n.li,{children:(0,a.jsx)(n.strong,{children:"ShaderLightContainer"})}),` `]}),` `,(0,a.jsx)(n.p,{children:"But why do we need a ShaderLightContainer if it's only wrapping the ShaderLight with a Canvas?"}),` `,(0,a.jsxs)(n.p,{children:["The reason is that the ",(0,a.jsx)(n.strong,{children:"ShaderLight"})," component uses the ",(0,a.jsx)(n.strong,{children:"useCanvas"})," hook, which is a hook that provides the size of the canvas. The ",(0,a.jsx)(n.strong,{children:"ShaderLightContainer"})," component is used to provide the size of the canvas to the ",(0,a.jsx)(n.strong,{children:"ShaderLight"})," component."]}),` `,(0,a.jsxs)(n.p,{children:["Actually that's a technique that I use a lot, which is to create a component that provides the size of the canvas to another component that uses the ",(0,a.jsx)(n.strong,{children:"useCanvas"})," hook."]}),` `,(0,a.jsxs)(n.p,{children:["This trick helps me to style the ",(0,a.jsx)(n.strong,{children:"Canvas"})," by specifying simply ",(0,a.jsx)(n.code,{children:"flex: 1"})," instead of using the width and height properties and it makes the code more readable (and easy to reuse)."]}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token spread operator",children:"..."}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ShaderLight"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method-variable function-variable method function property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"FC"})})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," size ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useCanvas"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," shaderLightWidth ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useComputedValue"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," size",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"width"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,a.jsx)(n.span,{className:"token number",children:"0.7"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"size",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," x ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useComputedValue"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"size",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"width"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"-"})," shaderLightWidth",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"size",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," canvasWidth ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useComputedValue"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," size",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"width"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"size",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," canvasHeight ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useComputedValue"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," size",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"height"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"size",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," uniforms ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useComputedValue"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," internalPadding ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token number",children:"4"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" a",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token function",children:"vec"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"x",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"+"})," internalPadding",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" b",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token function",children:"vec"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"x",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"+"})," shaderLightWidth",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"-"})," internalPadding",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" c",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token function",children:"vec"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," canvasHeight",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" d",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token function",children:"vec"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"canvasWidth",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," canvasHeight",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" canvas",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token function",children:"vec"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"canvasWidth",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," canvasHeight",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"current"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"x",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," shaderLightWidth",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," canvasHeight",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," canvasWidth",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Group"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Fill"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Shader"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"source"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"source",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"uniforms"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"uniforms",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"RoundedRect"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"x"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"x",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"y"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"width"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"shaderLightWidth",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"height"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"6"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"color"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token string",children:"'white'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"r"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"5"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"ShaderLightContainer"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Canvas"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," flex",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"ShaderLight"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,a.jsxs)(n.span,{className:"token exports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ShaderLightContainer"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"as"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ShaderLight"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `})]})}),` `,(0,a.jsxs)(n.h3,{id:"animatedopacityview",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#animatedopacityview",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"AnimatedOpacityView"]}),` `,(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.strong,{children:"AnimatedOpacityView"})," component is a component that animates the opacity of its children based on the value of the ",(0,a.jsx)(n.strong,{children:"activeIndex"})," property. The ",(0,a.jsx)(n.strong,{children:"activeIndex"})," property is a ",(0,a.jsx)(n.strong,{children:"Reanimated"})," value that represents the index of the currently selected tab. The ",(0,a.jsx)(n.strong,{children:"AnimatedOpacityView"})," component animates the opacity of its children based on the value of the ",(0,a.jsx)(n.strong,{children:"activeIndex"})," property."]}),` `,(0,a.jsx)(n.div,{className:"remark-code-title",children:"src/components/bottom-tab-bar/animated-opacity-view.tsx"}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"AnimatedOpacityView"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token constant",children:"FC"}),(0,a.jsx)(n.span,{className:"token operator",children:"<"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ViewProps"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"&"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" activeIndex",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Animated"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SharedValue"})}),(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token builtin",children:"number"}),(0,a.jsx)(n.span,{className:"token operator",children:">"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" index",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"number"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token operator",children:">"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," index",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," activeIndex",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," style",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token spread operator",children:"..."}),"viewProps ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," rStyle ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useAnimatedStyle"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," opacity ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"withTiming"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"activeIndex",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," index ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"0.5"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" opacity",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"index",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Animated.View"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"style",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," rStyle",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsxs)(n.span,{className:"token spread",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token spread operator",children:"..."}),"viewProps",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.h2,{id:"bind-the-components-together",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#bind-the-components-together",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Bind the components together"]}),` `,(0,a.jsxs)(n.p,{children:["As mentioned at the beginning of this article, this component can easily be used in combination with the BottomTab.Navigator component from the ",(0,a.jsx)(n.strong,{children:"@react-navigation/bottom-tabs"})," package."]}),` `,(0,a.jsx)(n.div,{className:"remark-code-title",children:"src/index.tsx"}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," createBottomTabNavigator ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'@react-navigation/bottom-tabs'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"View"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'react-native'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"BottomTabBar"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'./components/bottom-tab-bar'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ScreenNames"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'./constants/screens'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"BottomTab"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"createBottomTabNavigator"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"App"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"BottomTab.Navigator"})]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"tabBar"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"props",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"BottomTabBar"})]})," ",(0,a.jsxs)(n.span,{className:"token spread",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token spread operator",children:"..."}),"props",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"BottomTab.Screen"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Home"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"component"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"View"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"BottomTab.Screen"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Bookmark"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"component"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"View"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"BottomTab.Screen"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Add"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"component"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"View"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"BottomTab.Screen"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Profile"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"component"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"View"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"BottomTab.Screen"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ScreenNames"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Settings"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"component"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"View"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,a.jsxs)(n.span,{className:"token exports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.h2,{id:"conclusion",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#conclusion",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Conclusion"]}),` `,(0,a.jsxs)(n.p,{children:["In short, this article showed us how to make a fancy floating bottom bar using Skia and Reanimated. The best part is that it's super easy to add to your own projects, just copy the ",(0,a.jsx)(n.code,{children:"components/bottom-tab-bar"})," folder and you're good to go!"]}),` `,(0,a.jsx)(n.p,{children:"The article also walked us through the necessary dependencies and provided a breakdown of the main components that make this bottom bar tick. Overall, a pretty cool and helpful guide for anyone looking to add a little extra flair to their bottom navigation."})]})}function v(e={}){let{wrapper:n}=e.components||{};return n?(0,a.jsx)(n,Object.assign({},e,{children:(0,a.jsx)(r,e)})):r(e)}var w=v;function f(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return x;})(); ;return Component;