{"id":284,"date":"2024-01-30T08:14:25","date_gmt":"2024-01-30T08:14:25","guid":{"rendered":"https:\/\/200oksolutionssandbox.co.uk\/blog\/?p=284"},"modified":"2024-07-30T08:51:26","modified_gmt":"2024-07-30T08:51:26","slug":"portable-animated-floating-action-button","status":"publish","type":"post","link":"https:\/\/200oksolutionssandbox.co.uk\/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:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2024\/01\/DraggableView1.pdf\" data-type=\"link\" data-id=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/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:\/\/200oksolutionssandbox.co.uk\/blog\/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:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2024\/01\/DraggableView2.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Dragabble View Component Code<\/a> and <a href=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/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:\/\/200oksolutionssandbox.co.uk\/blog\/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:\/\/200oksolutionssandbox.co.uk\/blog\/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:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2024\/01\/fab-home-screen.png\" alt=\"\" class=\"wp-image-295\" srcset=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2024\/01\/fab-home-screen.png 477w, https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2024\/01\/fab-home-screen-298x300.png 298w, https:\/\/200oksolutionssandbox.co.uk\/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:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2024\/01\/Portable-Animated-FAB.mp4\" data-type=\"link\" data-id=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/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&hellip;<\/p>\n","protected":false},"author":1,"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 v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Portable Animated Floating Action Button<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/200oksolutionssandbox.co.uk\/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\" \/>\n<meta property=\"og:description\" content=\"(React-Native) Installation Below is a list of the major dependencies required, and for installation, follow&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61552217825863\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-30T08:14:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-30T08:51:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/200oksolutionssandbox.co.uk\/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=\"BlogAdmin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"BlogAdmin\" \/>\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","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:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/","og_locale":"en_US","og_type":"article","og_title":"Portable Animated Floating Action Button","og_description":"(React-Native) Installation Below is a list of the major dependencies required, and for installation, follow&hellip;","og_url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=61552217825863","article_published_time":"2024-01-30T08:14:25+00:00","article_modified_time":"2024-07-30T08:51:26+00:00","og_image":[{"width":2269,"height":1316,"url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2024\/01\/portable-animated-floating-action-button.png","type":"image\/png"}],"author":"BlogAdmin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"BlogAdmin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/#article","isPartOf":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/"},"author":{"name":"BlogAdmin","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/person\/ea0b72006227b3403f5ad825b82ced43"},"headline":"Portable Animated Floating Action Button","datePublished":"2024-01-30T08:14:25+00:00","dateModified":"2024-07-30T08:51:26+00:00","mainEntityOfPage":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/"},"wordCount":684,"commentCount":0,"publisher":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#organization"},"image":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/#primaryimage"},"thumbnailUrl":"https:\/\/200oksolutionssandbox.co.uk\/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:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/","name":"Portable Animated Floating Action Button","isPartOf":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/#primaryimage"},"image":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/#primaryimage"},"thumbnailUrl":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2024\/01\/portable-animated-floating-action-button.png","datePublished":"2024-01-30T08:14:25+00:00","dateModified":"2024-07-30T08:51:26+00:00","breadcrumb":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/#primaryimage","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2024\/01\/portable-animated-floating-action-button.png","contentUrl":"https:\/\/200oksolutionssandbox.co.uk\/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:\/\/200oksolutionssandbox.co.uk\/blog\/portable-animated-floating-action-button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/200oksolutionssandbox.co.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"Portable Animated Floating Action Button"}]},{"@type":"WebSite","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#website","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/","name":"","description":"","publisher":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/200oksolutionssandbox.co.uk\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#organization","name":"Web Development Blog | Software Blog | App Blog","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2026\/01\/200ok_logo.png","contentUrl":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2026\/01\/200ok_logo.png","width":500,"height":191,"caption":"Web Development Blog | Software Blog | App Blog"},"image":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=61552217825863"]},{"@type":"Person","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/person\/ea0b72006227b3403f5ad825b82ced43","name":"BlogAdmin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/53ecc99d859b4d3444ee1e076f3b5d9da9962836d1c20b3b44d73574f435740d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/53ecc99d859b4d3444ee1e076f3b5d9da9962836d1c20b3b44d73574f435740d?s=96&d=mm&r=g","caption":"BlogAdmin"},"sameAs":["http:\/\/blog.200oksolutions.com"],"url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/author\/blogadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts\/284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=284"}],"version-history":[{"count":14,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts\/284\/revisions"}],"predecessor-version":[{"id":310,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts\/284\/revisions\/310"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/media\/305"}],"wp:attachment":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}