{"id":12411,"date":"2018-08-29T10:14:45","date_gmt":"2018-08-29T10:14:45","guid":{"rendered":"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/"},"modified":"2025-11-11T05:36:29","modified_gmt":"2025-11-11T05:36:29","slug":"create-tabbar-plugin-with-react-native","status":"publish","type":"post","link":"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/","title":{"rendered":"FAB Tabbar – Concept to Reality"},"content":{"rendered":"

Now A days, React Native is one of the leading app development choice when it comes to cross platform apps development and at Mindinventory<\/a> we love it like anything, but that is not enough for a Hard core developer to satisfy his desire of doing something out of this world, Isn’t it? usually now a days Google’s Material Design is the default choice when it comes to high quality UI\/IX, We thought why not create something cool with the latest of Material Design and React Native and that lead us to this concept made to reality.<\/p>\n

To write code of this beautiful Tabbar was not that damn simple as it may seem at the first glance. We tried various paths to develop it and finally we did it which can work the same as designed.<\/p>\n

<\/span>Let\u2019s Look At The Development Story Of This Vision.<\/span><\/h2>\n

As usual what coders does, we did the same to place this idea in an app, we searched various plugin which could provide us the expected results, but was all in vain and there was no plugin available which could work, well that was a blessing in disguise, as a result, we developed a plugin for this custom tab design which is open source right now and you can implement it in your designs in quick, easy and simple steps.<\/p>\n

The first way, we tried to do it with the React Native components, but it didn\u2019t work as expected and the results were not exactly the same as designed. So, we came up with another technical idea to built it and let\u2019s see what it was. Meanwhile you can also check the animation on Dribbble<\/a> and Behance<\/a>.<\/p>\n

\"Tab<\/p>\n

We decide to work on the idea of creating a complete Tabbar using SVG components. And followings are the elements which we put together to build this Tabbar.<\/p>\n

    \n
  1. Hollow Semi Circular Tabbar<\/li>\n
  2. Circular Tabbar Item<\/li>\n
  3. Tabbar Item Image<\/li>\n
  4. Animation in the Tabbar and circular tab item while switching.<\/li>\n<\/ol>\n

    So, the next challenge we did face was, React native doesn’t support SVG, so we need to get what could support the SVG and we found react-native-svg library, which was a point of emergence to get this technical idea work.<\/p>\n

    We created an SVG for Circular Tabbar Item and Hollow Semi Circular Tabbar.<\/p>\n

    import Svg,{\n  Circle,\n  Path\n} from 'react-native-svg';\n\n<Svg version=\"1.1\" id=\"bottom-bar\" x=\"0px\" y=\"0px\" width='100%' height=\"100\" viewBox=\"0 0 1092 260\" space=\"preserve\">\n        <AnimatedPath fill=\"#f0f0f0\" d={ `M30,60h${this.state.pathX}\n.3c17.2,0,31,14.4,30,31.6c0.2,2.7-0.3,5.5-0.3,8.2c0,71.2,58.1,129.6,129.4,130c72.1,0.3,130.6-58,130.6-130c0-2.7-0.1-5.4-0.2-8.1C${this.state.pathY}.7,74.5,${this.state.pathA}.5,60,${this.state.pathB}.7,60H1062c16.6,0,30,13.4,30,30v94c0,42-34,76-76,76H76c42,0-76-34-76-76V90C0,73.4,13.4,60,30,60z` }\/>\n        <AnimatedCircle ref={ ref => this._myCircle = ref } fill=\"#f0f0f0\" cx=\"546\" cy=\"100\" r=\"100\" \/>\n<\/Svg>\n<\/pre>\n
    Next was the key point that make tab bar attractive i.e. animation while switching between two tabs.<\/p>\n
    Well, where the default failed to work, we have to be the creator and have to create a customised one, as here the default animation didn\u2019t work as transition animation fails for the Tabbar due to the hollow curvature and an animation along with the curvature in Tabbar we have to build custom SVG working with the dynamic path to support an animation and curvature.<\/p>\n
    Following is the code responsible for curvature transition along with circular tab item.<\/p>\n
    <AnimatedPath fill=\"#f0f0f0\" d={ `M30,60h$ {this.state.pathX}\n.3c17.2,0,31,14.4,30,31.6c-0.2,2.7-0.3,5.5-0.3,8.2c0,71.2,58.1,129.6,129.4,130c72.1,0.3,130.6-58,130.6-130c0-2.7-0.1-5.4-0.2-8.1C${this.state.pathY}.7,74.5,${this.state.pathA}.5,60,${this.state.pathB}.7,60H1062c16.6,0,30,13.4,30,30v94c0,42-34,76-76,76H76c-42,0-76-34-76-76V90C0,73.4,13.4,60,30,60z`}\/>\n<\/pre>\n
    We created a circle as an animated component and the Tabbar as an animated path.<\/p>\n
    const AnimatedCircle = Animated.createAnimatedComponent(Circle)\nconst AnimatedPath = Animated.createAnimatedComponent(Path)\n<\/pre>\n
    When user clicks on the tab to switch the animation works due to work of below written code.<\/p>\n
    update(index) {\n      if(index == 0) {\n      this.setState ({\n      selectedIndex: index,\n      });\n      Animated.spring(this.state.pathD,{toValue:22,duration: 10, friction: 10 }).start();\n      Animated.spring( this.state.circleRadius, { toValue: 211, friction: 10 } ).start();\n      }\n      else if(index == 2){\n      this.setState({\n      selectedIndex: index,\n      });\n\n      Animated.spring(this.state.pathD,{toValue:691,duration:10,friction:10}).start();\n      Animated.spring( this.state.circleRadius, { toValue: 880, friction: 10 } ).start()}\n\n      else {\n      this.setState({selectedIndex: index,});\n      Animated.spring(this.state.pathD,{toValue:357,duration:10,friction:10}).start();\n      Animated.spring( this.state.circleRadius, { toValue: 546, friction: 10 } ).start();\n          }\n      }\n<\/pre>\n
    What makes an attractive look of the tab item and the Tabbar is done by styling it.<\/p>\n
    TabBar.Item = TabBarItem;\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    overflow: 'hidden',\n },\ncontent: {\n    flexDirection:\"column\",\n    zIndex: 0,\n    width: (Dimensions.get('window').width - 30),\n    marginBottom: '4%',\n    left: '4%',\n    right: '4%',\n },\nsubContent: {\n    flexDirection: 'row',\n    marginLeft: 15,\n    marginRight: 15,\n    marginBottom: 10,\n    zIndex: 1,\n    position: 'absolute',\n    bottom: 5,\n },\nnavItem: {\n    flex: 1,\n    paddingTop: 6,\n    paddingBottom: 6,\n    alignItems: 'center',\n    zIndex: 0,\n },\nnavImage: {\n    width: 45,\n    height: 45,\n },\ncircle: {\n    bottom: 18,\n }\n});\n<\/pre>\n
    Setting the Tabbar default state at initial state.<\/p>\n
    this.state = {\n     selectedIndex: 1,\n     defaultPage: 1,\n     navFontSize: 12,\n     navTextColor: \"rgb(148, 148, 148)\",\n     navTextColorSelected: 'rgb(51, 163, 244)',\n     circleRadius: new Animated.Value(546),\n     pathD: new Animated.Value(357),\n     pathX: \"357\",\n     pathY: \"675\",\n     pathA: \"689\",\n     pathB: \"706\",\n     showIcon: true\n   }\n\nthis.state.circleRadius.addListener( (circleRadius) => {\n      this._myCircle.setNativeProps({ cx: circleRadius.value.toString() });\n});\n<\/pre>\n
    So, that was the code to developed in the plugin.
    \nYou can use this plugin in your app and make it look great, let’s check how to use it.<\/p>\n
    <\/span>Implementation<\/span><\/h2>\n
    import TabBar from \"react-native-tab-bar-interaction\";\n...\nrender() {\n return (<TabBar>\n        <TabBar.Item\n         icon={require('.\/tab1.png')}\n         selectedIcon={require('.\/tab1_sel.png')}\n         title=\"Tab1\"\n         screenBackgroundColor={{ backgroundColor: '#008080' }}\n     >\n        <View>\n\n        <\/View>\n        <\/TabBar.Item>\n        <TabBar.Item\n         icon={require('.\/tab2.png')}\n         selectedIcon={require('.\/tab2_sel.png')}\n         title=\"Tab2\"\n         screenBackgroundColor={{ backgroundColor: '#F08080' }}\n     >\n        <View>\n\n        <\/View>\n        <\/TabBar.Item>\n        <TabBar.Item\n         icon={require('.\/tab3.png')}\n         selectedIcon={require('.\/tab3_sel.png')}\n         title=\"Tab3\"\n         screenBackgroundColor={{ backgroundColor: '#485d72' }}\n     >\n         <View>\n\n         <\/View>\n         <\/TabBar.Item>\n         <\/TabBar>);\n}\n<\/pre>\n
    After installation done as per the guideline provided on Github<\/a>, you need to import \u201creact-native-tab-bar-interaction\u201d to add the Tabbar in your app.<\/p>\n
    import TabBar from \"react-native-tab-bar-interaction\";\n<\/pre>\n
    <\/span>Add Tabbar Item:<\/span><\/h2>\n
    <TabBar.Item\n       icon={require('.\/tab1.png')}\n       selectedIcon={require('.\/tab1_sel.png')}\n       title=\"Tab1\"\n       screenBackgroundColor={{ backgroundColor: '#008080' }}\n>\n\n<View>\n\/*tabbar body content here*\/\n<\/View>\n<\/pre>\n
    * Your app must contain 3 tabs.<\/p>\n
    1.\u00a0 Add unselected icon in this line.<\/h3>\n
    icon={require('.\/tab1.png')}\n<\/pre>\n
    2.\u00a0 Add selected icon in this line.<\/h3>\n
    selectedIcon={require('.\/tab1_sel.png')}\n<\/pre>\n
    3.\u00a0 Add tab title in this line.<\/h3>\n
    title=\"Tab1\u201dmind\n<\/pre>\n
    4.\u00a0 Add Tab Screen Background color in this line.<\/h3>\n
    screenBackgroundColor={{ backgroundColor: '#008080' }}\n<\/pre>\n
    Check full source code of React Native Tabbar on Github<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Now A days, React Native is one of the leading app development choice when it comes to cross platform apps development and at Mindinventory we love it like anything, but that is not enough for a Hard core developer to satisfy his desire of doing something out of this world, Isn’t it? usually now a […]<\/p>\n","protected":false},"author":17,"featured_media":12414,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1434],"tags":[2045,1700,2046,2047],"industries":[],"class_list":["post-12411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","tag-fab-tabbar","tag-react-native","tag-react-native-navigation","tag-tabbar"],"acf":[],"yoast_head":"\nHow We Created Tabbar Plugin with React Native<\/title>\n<meta name=\"description\" content=\"Check out how we created beautiful tabbar interaction with sliding inset FABs, made with React Native.\" \/>\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.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"FAB Tabbar - Concept to Reality\" \/>\n<meta property=\"og:description\" content=\"Check out how we created beautiful tabbar interaction with sliding inset FABs, made with React Native.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"MindInventory\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Mindiventory\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-29T10:14:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-11T05:36:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2022\/10\/tab-bar1200.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pratik Patel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mindinventory\" \/>\n<meta name=\"twitter:site\" content=\"@mindinventory\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pratik Patel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/\"},\"author\":{\"name\":\"Pratik Patel\",\"@id\":\"https:\/\/www.mindinventory.com\/blog\/#\/schema\/person\/3c9969f4f05d964960d21e1937a75147\"},\"headline\":\"FAB Tabbar – Concept to Reality\",\"datePublished\":\"2018-08-29T10:14:45+00:00\",\"dateModified\":\"2025-11-11T05:36:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/\"},\"wordCount\":647,\"publisher\":{\"@id\":\"https:\/\/www.mindinventory.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2022\/10\/tab-bar1200.jpg\",\"keywords\":[\"FAB Tabbar\",\"React Native\",\"React native navigation\",\"Tabbar\"],\"articleSection\":[\"Mobile\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/\",\"url\":\"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/\",\"name\":\"How We Created Tabbar Plugin with React Native\",\"isPartOf\":{\"@id\":\"https:\/\/www.mindinventory.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2022\/10\/tab-bar1200.jpg\",\"datePublished\":\"2018-08-29T10:14:45+00:00\",\"dateModified\":\"2025-11-11T05:36:29+00:00\",\"description\":\"Check out how we created beautiful tabbar interaction with sliding inset FABs, made with React Native.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/#primaryimage\",\"url\":\"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2022\/10\/tab-bar1200.jpg\",\"contentUrl\":\"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2022\/10\/tab-bar1200.jpg\",\"width\":1200,\"height\":600,\"caption\":\"FAB Tabbar\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.mindinventory.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"FAB Tabbar – Concept to Reality\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.mindinventory.com\/blog\/#website\",\"url\":\"https:\/\/www.mindinventory.com\/blog\/\",\"name\":\"MindInventory\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.mindinventory.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.mindinventory.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.mindinventory.com\/blog\/#organization\",\"name\":\"MindInventory\",\"alternateName\":\"Mind Inventory\",\"url\":\"https:\/\/www.mindinventory.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.mindinventory.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2016\/12\/mindinventory-text-logo.png\",\"contentUrl\":\"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2016\/12\/mindinventory-text-logo.png\",\"width\":277,\"height\":100,\"caption\":\"MindInventory\"},\"image\":{\"@id\":\"https:\/\/www.mindinventory.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Mindiventory\",\"https:\/\/x.com\/mindinventory\",\"https:\/\/www.instagram.com\/mindinventory\/\",\"https:\/\/www.linkedin.com\/company\/mindinventory\",\"https:\/\/www.pinterest.com\/mindinventory\/\",\"https:\/\/www.youtube.com\/c\/mindinventory\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.mindinventory.com\/blog\/#\/schema\/person\/3c9969f4f05d964960d21e1937a75147\",\"name\":\"Pratik Patel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.mindinventory.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/27968e6599c2a496d513da68d50f8dd470e24866f861b363a8b10920bc1f55e1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/27968e6599c2a496d513da68d50f8dd470e24866f861b363a8b10920bc1f55e1?s=96&d=mm&r=g\",\"caption\":\"Pratik Patel\"},\"description\":\"Pratik Patel is the Technical Head of the Mobile App Development team with 15+ years of experience in pioneering technologies. His expertise spans mobile and web development, cloud computing, and business intelligence. Pratik excels in creating robust, user-centric applications and leading innovative projects from concept to completion.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/pratik-patel-19b821138\/\"],\"knowsAbout\":[\"Project Management\",\"Product Development\"],\"jobTitle\":\"Technical Head\",\"worksFor\":\"MindInventory\",\"url\":\"https:\/\/www.mindinventory.com\/blog\/author\/pratikpatel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How We Created Tabbar Plugin with React Native","description":"Check out how we created beautiful tabbar interaction with sliding inset FABs, made with React Native.","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.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/","og_locale":"en_US","og_type":"article","og_title":"FAB Tabbar - Concept to Reality","og_description":"Check out how we created beautiful tabbar interaction with sliding inset FABs, made with React Native.","og_url":"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/","og_site_name":"MindInventory","article_publisher":"https:\/\/www.facebook.com\/Mindiventory","article_published_time":"2018-08-29T10:14:45+00:00","article_modified_time":"2025-11-11T05:36:29+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2022\/10\/tab-bar1200.jpg","type":"image\/jpeg"}],"author":"Pratik Patel","twitter_card":"summary_large_image","twitter_creator":"@mindinventory","twitter_site":"@mindinventory","twitter_misc":{"Written by":"Pratik Patel","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/#article","isPartOf":{"@id":"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/"},"author":{"name":"Pratik Patel","@id":"https:\/\/www.mindinventory.com\/blog\/#\/schema\/person\/3c9969f4f05d964960d21e1937a75147"},"headline":"FAB Tabbar – Concept to Reality","datePublished":"2018-08-29T10:14:45+00:00","dateModified":"2025-11-11T05:36:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/"},"wordCount":647,"publisher":{"@id":"https:\/\/www.mindinventory.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2022\/10\/tab-bar1200.jpg","keywords":["FAB Tabbar","React Native","React native navigation","Tabbar"],"articleSection":["Mobile"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/","url":"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/","name":"How We Created Tabbar Plugin with React Native","isPartOf":{"@id":"https:\/\/www.mindinventory.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/#primaryimage"},"image":{"@id":"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2022\/10\/tab-bar1200.jpg","datePublished":"2018-08-29T10:14:45+00:00","dateModified":"2025-11-11T05:36:29+00:00","description":"Check out how we created beautiful tabbar interaction with sliding inset FABs, made with React Native.","breadcrumb":{"@id":"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/#primaryimage","url":"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2022\/10\/tab-bar1200.jpg","contentUrl":"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2022\/10\/tab-bar1200.jpg","width":1200,"height":600,"caption":"FAB Tabbar"},{"@type":"BreadcrumbList","@id":"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mindinventory.com\/blog\/"},{"@type":"ListItem","position":2,"name":"FAB Tabbar – Concept to Reality"}]},{"@type":"WebSite","@id":"https:\/\/www.mindinventory.com\/blog\/#website","url":"https:\/\/www.mindinventory.com\/blog\/","name":"MindInventory","description":"","publisher":{"@id":"https:\/\/www.mindinventory.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mindinventory.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.mindinventory.com\/blog\/#organization","name":"MindInventory","alternateName":"Mind Inventory","url":"https:\/\/www.mindinventory.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mindinventory.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2016\/12\/mindinventory-text-logo.png","contentUrl":"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2016\/12\/mindinventory-text-logo.png","width":277,"height":100,"caption":"MindInventory"},"image":{"@id":"https:\/\/www.mindinventory.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Mindiventory","https:\/\/x.com\/mindinventory","https:\/\/www.instagram.com\/mindinventory\/","https:\/\/www.linkedin.com\/company\/mindinventory","https:\/\/www.pinterest.com\/mindinventory\/","https:\/\/www.youtube.com\/c\/mindinventory"]},{"@type":"Person","@id":"https:\/\/www.mindinventory.com\/blog\/#\/schema\/person\/3c9969f4f05d964960d21e1937a75147","name":"Pratik Patel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mindinventory.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/27968e6599c2a496d513da68d50f8dd470e24866f861b363a8b10920bc1f55e1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/27968e6599c2a496d513da68d50f8dd470e24866f861b363a8b10920bc1f55e1?s=96&d=mm&r=g","caption":"Pratik Patel"},"description":"Pratik Patel is the Technical Head of the Mobile App Development team with 15+ years of experience in pioneering technologies. His expertise spans mobile and web development, cloud computing, and business intelligence. Pratik excels in creating robust, user-centric applications and leading innovative projects from concept to completion.","sameAs":["https:\/\/www.linkedin.com\/in\/pratik-patel-19b821138\/"],"knowsAbout":["Project Management","Product Development"],"jobTitle":"Technical Head","worksFor":"MindInventory","url":"https:\/\/www.mindinventory.com\/blog\/author\/pratikpatel\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.mindinventory.com\/blog\/wp-json\/wp\/v2\/posts\/12411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mindinventory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mindinventory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mindinventory.com\/blog\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mindinventory.com\/blog\/wp-json\/wp\/v2\/comments?post=12411"}],"version-history":[{"count":1,"href":"https:\/\/www.mindinventory.com\/blog\/wp-json\/wp\/v2\/posts\/12411\/revisions"}],"predecessor-version":[{"id":29927,"href":"https:\/\/www.mindinventory.com\/blog\/wp-json\/wp\/v2\/posts\/12411\/revisions\/29927"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mindinventory.com\/blog\/wp-json\/wp\/v2\/media\/12414"}],"wp:attachment":[{"href":"https:\/\/www.mindinventory.com\/blog\/wp-json\/wp\/v2\/media?parent=12411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mindinventory.com\/blog\/wp-json\/wp\/v2\/categories?post=12411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mindinventory.com\/blog\/wp-json\/wp\/v2\/tags?post=12411"},{"taxonomy":"industries","embeddable":true,"href":"https:\/\/www.mindinventory.com\/blog\/wp-json\/wp\/v2\/industries?post=12411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}