{"id":284,"date":"2024-01-30T08:14:25","date_gmt":"2024-01-30T08:14:25","guid":{"rendered":"https:\/\/blog.200oksolutions.com\/?p=284"},"modified":"2025-12-04T07:44:09","modified_gmt":"2025-12-04T07:44:09","slug":"portable-animated-floating-action-button","status":"publish","type":"post","link":"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/","title":{"rendered":"Portable Animated Floating Action Button"},"content":{"rendered":"\n<p>                                                                 <strong>(React-Native)<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation<\/h3>\n\n\n\n<p>Below is a list of the major dependencies required, and for installation, follow the official documentation.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/docs.swmansion.com\/react-native-gesture-handler\/docs\/fundamentals\/installation\/\" data-type=\"link\" data-id=\"https:\/\/docs.swmansion.com\/react-native-gesture-handler\/docs\/fundamentals\/installation\/\" target=\"_blank\" rel=\"noreferrer noopener\">react-native-gesture-handler<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/docs.swmansion.com\/react-native-reanimated\/docs\/fundamentals\/getting-started\/\" data-type=\"link\" data-id=\"https:\/\/docs.swmansion.com\/react-native-reanimated\/docs\/fundamentals\/getting-started\/\" target=\"_blank\" rel=\"noreferrer noopener\">react-native-reanimated<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/gorhom\/react-native-portal\" data-type=\"link\" data-id=\"https:\/\/github.com\/gorhom\/react-native-portal\" target=\"_blank\" rel=\"noreferrer noopener\">react-native-portal<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/reactnavigation.org\/docs\/getting-started\/\" data-type=\"link\" data-id=\"https:\/\/reactnavigation.org\/docs\/getting-started\/\" target=\"_blank\" rel=\"noreferrer noopener\">react-navigation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/oblador\/react-native-vector-icons\" data-type=\"link\" data-id=\"https:\/\/github.com\/oblador\/react-native-vector-icons\" target=\"_blank\" rel=\"noreferrer noopener\">react-native-vector-icons<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/redux.js.org\/introduction\/installation\" data-type=\"link\" data-id=\"https:\/\/redux.js.org\/introduction\/installation\" target=\"_blank\" rel=\"noreferrer noopener\">redux toolkit<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Comprehend portable animated FAB with the help of these steps<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>First create Home, Settings and Help screens using react-navigation<\/li>\n\n\n\n<li>In Home Screen<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make a <strong>Grid<\/strong> that contains <strong>icons<\/strong> and <strong>labels <\/strong>for <strong>settings<\/strong>, <strong>help<\/strong>, and <strong>logout.<\/strong><\/li>\n\n\n\n<li>Render <strong>Portable<\/strong> <strong>Animated FAB<\/strong> Component<\/li>\n\n\n\n<li>The <strong>Grid item<\/strong> and <strong>Animated FAB<\/strong> can be used to <strong>navigate<\/strong> to <strong>settings<\/strong> and<strong> help<\/strong> from the home screen.<\/li>\n<\/ul>\n\n\n\n<p>     3. On the Settings screen, you can add a switch UI to control the visibility of the FAB component and store its value                   <\/p>\n\n\n\n<p>         in the Redux store, so that you can read it anywhere in the application.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Draggable View Component<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a file DraggableView.tsx into Components folder.<\/li>\n\n\n\n<li>Shareable <strong>x<\/strong> and <strong>y<\/strong> values are used to store current position of the draggable, Shareable <strong>context<\/strong> value is used to store last position of draggable <strong>x<\/strong> and <strong>y<\/strong>.<\/li>\n\n\n\n<li>An <strong>event<\/strong> that includes <strong>translateX<\/strong> and <strong>translateY<\/strong> is provided by Pan gesture on <strong>onUpdate()<\/strong>, and we can create a new draggable position\n<ul class=\"wp-block-list\">\n<li> o x.value = event.translateX + context.x.value<\/li>\n\n\n\n<li>o y.value = event.translateY + context.y.value<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>The use of GestureDetector and Gesture from react-native-gesture-handler allows for the creation of a draggable view and the rendering of AnimatedFAB as children.<\/li>\n\n\n\n<li>Dragabble View Component Code<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/01\/DraggableView1.pdf\" data-type=\"link\" data-id=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/01\/DraggableView1.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Dragabble View Component Code<\/a><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Animated FAB Component<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a file AnimatedFAB.tsx into Components folder<\/li>\n\n\n\n<li>Create an animated view that has a plus icon and incorporate the Draggable view component, as we have done before.<\/li>\n\n\n\n<li>Now it is possible to move it anywhere on the screen and also outside of it.<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/01\/AnimatedFAB1.pdf\" data-type=\"link\" data-id=\"javascript:void(0)\" target=\"_blank\" rel=\"noreferrer noopener\">Animated FAB Component Code<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Prevent Drag outside of the screen &amp; get latest position on onDragEnd<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>With the help of the <strong>withSpring() <\/strong>of reanimated, whenever <strong>onDragEnd()<\/strong> is called, we will drag it to the <strong>closest corner<\/strong> of the screen if it goes <strong>outside<\/strong> or <strong>anywhere<\/strong> else.<\/li>\n\n\n\n<li>To get the <strong>updated x and y positions<\/strong>, create an <strong>onDragEnd worklet<\/strong> and pass it as props to the draggle view component.<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/01\/DraggableView2.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Dragabble View Component Code<\/a> and <a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/01\/AnimatedFAB2.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Animated FAB Component Code<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Let&#8217;s Add Animated Action Button into Animated FAB<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create an animated view with a size equal to the FAB button. <strong>Now, add<\/strong> <strong>the<\/strong> setting icon button <strong>at the center<\/strong> of it.<\/li>\n\n\n\n<li>Let&#8217;s <strong>animate <\/strong>the setting icon button vertically using the interpolate function from reanimated. This <strong>allows<\/strong> you to map a value from <strong>one range to another<\/strong> using <strong>linear interpolation<\/strong>.<\/li>\n\n\n\n<li>Create a variable <strong>aIsActionBtnsVisible <\/strong>to store 1 or 0 <strong>(default is 0),<\/strong><\/li>\n\n\n\n<li><strong>interpolate <\/strong>function requires<ul><li><strong><em>@param<\/em><\/strong><strong> value<\/strong> \u2014 A number from the input range that is going to be mapped to the output range.<\/li><\/ul><ul><li><strong><em>@param<\/em><\/strong><strong> inputRange<\/strong> \u2014 An array of numbers specifying the input range of the interpolation.<\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li><strong><em>@param<\/em><\/strong><strong> outputRange<\/strong> \u2014 An array of numbers specifying the output range of the interpolation.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Create a variable <strong>aInputRangeStart <\/strong>to store <strong>inputRange start<\/strong> and <strong>end <\/strong>will be <strong>0<\/strong>.<\/li>\n\n\n\n<li>Create a variable <strong>aOutputRangeStart <\/strong>to store <strong>OutputRange start,<\/strong> and <strong>end <\/strong>will be <strong>0<\/strong>.<\/li>\n\n\n\n<li>Calculate distance to translate using <strong>useDerivedValue <\/strong>based on<strong> aIsActionBtnsVisible<\/strong><strong><\/strong><\/li>\n\n\n\n<li>Create animate styles for animated setting view using <strong>interpolate <\/strong>and <strong>withTiming<\/strong><\/li>\n\n\n\n<li>On <strong>clicking <\/strong>FAB, change <strong>aIsActionBtnsVisible <\/strong>from 0 to 1 <strong>via verse<\/strong>.<\/li>\n\n\n\n<li>Create a FAB icon animated view with rotate-z styles based on aIsActionBtnsVisible. When aIsActionBtnsVisible is 1, rotateZ: 45deg and rotateZ: 0deg for 0 using the interpolate function.<\/li>\n\n\n\n<li>Animated FAB background color based on aIsActionBtnsVisible using the interpolate function.<\/li>\n\n\n\n<li><strong>OnDragEnd worklet <\/strong>we are getting positionX and positionY, update <strong>aInputRnageStart = &#8211; (size of FAB)<\/strong> if the positionY is less than or equal to half of the screen height, otherwise <strong>aInputRnageStart = size of FAB<\/strong><\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/01\/AnimatedFAB3.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Animated FAB Component Code<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Let\u2019s Add Portal to Animated FAB into HomeScreen.tsx<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wrap <strong>AnimatedFAB <\/strong>component by <strong>Portal <\/strong>component from <a href=\"https:\/\/github.com\/gorhom\/react-native-portal\" target=\"_blank\" rel=\"noreferrer noopener\">react-native-portal<\/a><\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/01\/HomeScreen.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Home Screen Code<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"477\" height=\"481\" src=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/01\/fab-home-screen.png\" alt=\"\" class=\"wp-image-295\" srcset=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/01\/fab-home-screen.png 477w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/01\/fab-home-screen-298x300.png 298w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/01\/fab-home-screen-150x150.png 150w\" sizes=\"(max-width: 477px) 100vw, 477px\" \/><\/figure>\n\n\n\n<p><strong>In Animated FAB Component<\/strong> we have added settings action button only, we can add more action buttons as we want like help, logout etc for that you must create animated styles for such action button.<\/p>\n\n\n\n<p>You can use <a href=\"https:\/\/redux.js.org\/introduction\/installation\" target=\"_blank\" rel=\"noreferrer noopener\">redux toolkit<\/a> to <strong>show and hide<\/strong> specific action buttons as well as portable Animated FAB<\/p>\n\n\n\n<p>Please <strong>check out<\/strong> the <strong>demo app<\/strong> for better understanding <a href=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/01\/Portable-Animated-FAB.mp4\" data-type=\"link\" data-id=\"https:\/\/blog.200oksolutions.com\/wp-content\/uploads\/2024\/01\/Portable-Animated-FAB.mp4\" target=\"_blank\" rel=\"noreferrer noopener\">demo-app-recording<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>(React-Native) Installation Below is a list of the major dependencies required, and for installation, follow the official&hellip;<\/p>\n","protected":false},"author":5,"featured_media":305,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,47],"tags":[16,49,51,14,48],"class_list":["post-284","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-react-native","tag-cross-platform","tag-floating-action-button","tag-floating-button-in-react-native-app","tag-react-native","tag-react-native-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Portable Animated Floating Action Button Web Development, Software, and App Blog | 200OK Solutions<\/title>\n<meta name=\"description\" content=\"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Portable Animated Floating Action Button Web Development, Software, and App Blog | 200OK Solutions\" \/>\n<meta property=\"og:description\" content=\"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development, Software, and App Blog | 200OK Solutions\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-30T08:14:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-04T07:44:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/01\/portable-animated-floating-action-button.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2269\" \/>\n\t<meta property=\"og:image:height\" content=\"1316\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Piyush Solanki\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Piyush Solanki\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Portable Animated Floating Action Button Web Development, Software, and App Blog | 200OK Solutions","description":"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/","og_locale":"en_US","og_type":"article","og_title":"Portable Animated Floating Action Button Web Development, Software, and App Blog | 200OK Solutions","og_description":"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.","og_url":"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/","og_site_name":"Web Development, Software, and App Blog | 200OK Solutions","article_published_time":"2024-01-30T08:14:25+00:00","article_modified_time":"2025-12-04T07:44:09+00:00","og_image":[{"width":2269,"height":1316,"url":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/01\/portable-animated-floating-action-button.png","type":"image\/png"}],"author":"Piyush Solanki","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Piyush Solanki","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/#article","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/"},"author":{"name":"Piyush Solanki","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e"},"headline":"Portable Animated Floating Action Button","datePublished":"2024-01-30T08:14:25+00:00","dateModified":"2025-12-04T07:44:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/"},"wordCount":684,"commentCount":0,"publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/#primaryimage"},"thumbnailUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/01\/portable-animated-floating-action-button.png","keywords":["cross platform","floating action button","floating button in react native app","react native","react native development"],"articleSection":["Mobile","React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/","url":"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/","name":"Portable Animated Floating Action Button Web Development, Software, and App Blog | 200OK Solutions","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/#primaryimage"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/#primaryimage"},"thumbnailUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/01\/portable-animated-floating-action-button.png","datePublished":"2024-01-30T08:14:25+00:00","dateModified":"2025-12-04T07:44:09+00:00","description":"Explore the 200OK Blog \u2013 your go-to source for insights on web development, backend architecture, API design, and tech best practices from industry professionals.","breadcrumb":{"@id":"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/#primaryimage","url":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/01\/portable-animated-floating-action-button.png","contentUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/01\/portable-animated-floating-action-button.png","width":2269,"height":1316,"caption":"portable-animated-floating-action-button"},{"@type":"BreadcrumbList","@id":"https:\/\/www.200oksolutions.com\/blog\/portable-animated-floating-action-button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.200oksolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Portable Animated Floating Action Button"}]},{"@type":"WebSite","@id":"https:\/\/www.200oksolutions.com\/blog\/#website","url":"https:\/\/www.200oksolutions.com\/blog\/","name":"Web Development, Software, and App Blog | 200OK Solutions","description":"","publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.200oksolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.200oksolutions.com\/blog\/#organization","name":"Web Development Blog | Software Blog | App Blog","url":"https:\/\/www.200oksolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","contentUrl":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","width":500,"height":191,"caption":"Web Development Blog | Software Blog | App Blog"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/200ok_solutions\/"]},{"@type":"Person","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e","name":"Piyush Solanki","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","caption":"Piyush Solanki"},"description":"Piyush is a seasoned PHP Tech Lead with 10+ years of experience architecting and delivering scalable web and mobile backend solutions for global brands and fast-growing SMEs. He specializes in PHP, MySQL, CodeIgniter, WordPress, and custom API development, helping businesses modernize legacy systems and launch secure, high-performance digital products. He collaborates closely with mobile teams building Android &amp; iOS apps , developing RESTful APIs, cloud integrations, and secure payment systems using platforms like Stripe, AWS S3, and OTP\/SMS gateways. His work extends across CMS customization, microservices-ready backend architectures, and smooth product deployments across Linux and cloud-based environments. Piyush also has a strong understanding of modern front-end technologies such as React and TypeScript, enabling him to contribute to full-stack development workflows and advanced admin panels. With a successful delivery track record in the UK market and experience building digital products for sectors like finance, hospitality, retail, consulting, and food services, Piyush is passionate about helping SMEs scale technology teams, improve operational efficiency, and accelerate innovation through backend excellence and digital tools.","url":"https:\/\/www.200oksolutions.com\/blog\/author\/piyush\/"}]}},"_links":{"self":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=284"}],"version-history":[{"count":14,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/284\/revisions"}],"predecessor-version":[{"id":310,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/284\/revisions\/310"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/media\/305"}],"wp:attachment":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}