{"id":697,"date":"2021-07-04T10:09:59","date_gmt":"2021-07-04T09:09:59","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=697"},"modified":"2022-11-17T03:44:48","modified_gmt":"2022-11-17T02:44:48","slug":"software-development-top-tab-navigator-with-icons-in-react-native","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/","title":{"rendered":"Software Development: Top Tab Navigator With Icons in React Native"},"content":{"rendered":"\n<p>The Top Tab Navigator in React Native is one of the most common types of <a href=\"https:\/\/reactnavigation.org\" target=\"_blank\" rel=\"noreferrer noopener\">navigation<\/a> that is used in mobile app development.<\/p>\n\n\n\n<p>It is also used in React Native to indicate navigation flow and direction.<\/p>\n\n\n\n<p>Since the Top Tab Navigator a top-based navigation, it is usually positioned at the top of your application and allows users to switch between different screens by clicking on the labels or icons.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-adding-the-top-tab-navigator\">Adding the Top Tab Navigator<\/h2>\n\n\n\n<p>To add the top tab navigator in React Native, we have to add both the dependency for React Navigation and createMaterialTopTabNavigator respectively.<\/p>\n\n\n\n<p>Open the terminal\/cmd prompt at the root of your React Native project and add the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">yarn add react-navigation\nyarn add react-navigation-tabs\nyarn add react-native-screens\nyarn add react-native-gesture-handler\nyarn add react-native-safe-area-view<\/code><\/pre>\n\n\n\n<p>Because we will need to add Icons also to the Top Tab Navigator, let us also add the dependency for icons in our mobile app development project:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">yarn add react-native-vector-icons<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-creating-the-screens-for-the-top-tab-navigator-in-react-native\">Creating the Screens For the Top Tab Navigator in React Native<\/h2>\n\n\n\n<p>Before we go ahead to write the code for the Top Tab Navigator, we need to determine the number of screens we want to be available, and we need to create them as well. <\/p>\n\n\n\n<p>For the purpose of this tutorial, we are going to have three (3) screens available:<\/p>\n\n\n\n<p> HomeScreen,<\/p>\n\n\n\n<p> ProfileScreen, <\/p>\n\n\n\n<p>CartScreen.<\/p>\n\n\n\n<p>And we are going to create them respectively<\/p>\n\n\n\n<p>So create a file and call it HomeScreen.js and put the following contents:<\/p>\n\n\n\n<pre title=\"HomeScreen.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React, { Component } from 'react';\nimport { View, Text } from 'react-native';\n\nclass HomeScreen extends Component {\nrender(){\nreturn(\n&lt;View&gt;\n&lt;Text&gt;Welcome Home&lt;\/Text&gt;\n&lt;\/View&gt;\n)\n}\n}\n\nexport default HomeScreen;<\/code><\/pre>\n\n\n\n<p>Next, we will create one for the AboutScreen as follows:<\/p>\n\n\n\n<pre title=\"AboutScreen.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React, { Component } from 'react';\nimport { View, Text } from 'react-native';\n\nclass AboutScreen extends Component {\nrender(){\nreturn(\n&lt;View&gt;\n&lt;Text&gt;About us&lt;\/Text&gt;\n&lt;\/View&gt;\n)\n}\n}\n\nexport default AboutScreen;<\/code><\/pre>\n\n\n\n<p>And finally for the screens we create the content for our ContactScreen as follows:<\/p>\n\n\n\n<pre title=\"ContactScreen.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React, { Component } from 'react';\nimport { View, Text } from 'react-native';\n\nclass ContactScreen extends Component {\nrender(){\nreturn(\n&lt;View&gt;\n&lt;Text&gt;Contact us&lt;\/Text&gt;\n&lt;\/View&gt;\n)\n}\n}\n\nexport default ContactScreen;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>Next, we write the code for the Top Tab Navigation. Let&#8217;s call the screen TopTab.js and add the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React, {Component} from 'react';\n\nimport {View} from 'react-native';\n\nimport {createAppContainer} from 'react-navigation';\n\nimport {createMaterialTopTabNavigator} from 'react-navigation-tabs';\n\nimport HomeScreen from '.\/HomeScreen';\n\nimport ProfileScreen from '.\/ProfileScreen';\n\nimport CartScreen from '.\/CartScreen';\n\n \n\nclass TopTab extends Component {\n\n  render() {\n\n    return (\n\n      &lt;View style={{flex: 1}}&gt;\n\n        &lt;View style={{flex: 1}}&gt;\n\n          &lt;TopTabContainer \/&gt;\n\n        &lt;\/View&gt;\n\n      &lt;\/View&gt;\n\n    );\n\n  }\n\n}\n\n\nconst AppNavigator = createMaterialTopTabNavigator(\n\n  {\n\n    HomeScreen: HomeScreen,\n\n    Profile: ProfileScreen,\n\n    Cart: CartScreen,\n\n  },\n\n  {\n\n    tabBarOptions: {\n\n      activeTintColor: 'white',\n\n      showIcon: true,\n\n      showLabel: true,\n\n      style: {\n\n        backgroundColor: '#212121',\n\n      },\n\n    },\n\n  },\n\n);\n\nconst TopTabContainer = createAppContainer(AppNavigator);\n\nexport default TopTab;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"397\" height=\"123\" src=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/07\/Screenshot-2021-07-03-at-19.16.36.png\" alt=\"top tab navigator in react native\" class=\"wp-image-699\" srcset=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/07\/Screenshot-2021-07-03-at-19.16.36.png 397w, https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/07\/Screenshot-2021-07-03-at-19.16.36-300x93.png 300w\" sizes=\"auto, (max-width: 397px) 100vw, 397px\" \/><figcaption>Top Tab Navigator <\/figcaption><\/figure>\n\n\n\n<p>One more thing &#8230;<\/p>\n\n\n\n<p>Let us add the icons to the labels. To do that we will have to use navigatorOptions as follows<\/p>\n\n\n\n<pre title=\"Final TopTab.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React, {Component} from 'react';\n\nimport {View} from 'react-native';\n\nimport {createAppContainer} from 'react-navigation';\n\nimport {createMaterialTopTabNavigator} from 'react-navigation-tabs';\n\nimport Icon from 'react-native-vector-icons\/FontAwesome';\n\nimport HomeScreen from '.\/HomeScreen';\n\nimport ProfileScreen from '.\/ProfileScreen';\n\nimport CartScreen from '.\/CartScreen';\n\nIcon.loadFont():\n\n \n\nclass TopTab extends Component {\n\n  render() {\n\n    return (\n\n      &lt;View style={{flex: 1}}&gt;\n\n        &lt;View style={{flex: 1}}&gt;\n\n          &lt;TopTabContainer \/&gt;\n\n        &lt;\/View&gt;\n\n      &lt;\/View&gt;\n\n    );\n\n  }\n\n}\n\n\nconst AppNavigator = createMaterialTopTabNavigator(\n\n  {\n\n    HomeScreen: {\n    screen: HomeScreen,\n    navigationOptions: {\n     tabBarIcon: ({tintColor}) =&gt; (\n          &lt;Icon\n            name={'home'}\n            size={24}\n            color={'#fff'}\n          \/&gt;\n        ),\n     }\n     },\n\n    Profile: {\n    screen: Profile,\n    navigationOptions: {\n     tabBarIcon: ({tintColor}) =&gt; (\n          &lt;Icon\n            name={'user'}\n            size={24}\n            color={'#fff'}\n          \/&gt;\n        ),\n     }\n     },\n\n    Cart: {\n    screen: Cart,\n    navigationOptions: {\n     tabBarIcon: ({tintColor}) =&gt; (\n          &lt;Icon\n            name={'envelope'}\n            size={24}\n            color={'#fff'}\n          \/&gt;\n        ),\n     }\n     },\n\n\n  },\n\n  {\n\n    tabBarOptions: {\n\n      activeTintColor: 'white',\n\n      showIcon: true,\n\n      showLabel: true,\n\n      style: {\n\n        backgroundColor: '#212121',\n\n      },\n\n    },\n\n  },\n\n);\n\nconst TopTabContainer = createAppContainer(AppNavigator);\n\nexport default TopTab;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2>\n\n\n\n<p>This is how to add Top Tab Navigator in your React Native project.<\/p>\n\n\n\n<p><a href=\"https:\/\/codeflarelimited.com\/blog\/how-to-create-stack-navigator-using-a-class-component-in-react-native\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create Stack Navigator in React Native<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Top Tab Navigator in React Native is one of the most common types of navigation that is<\/p>\n","protected":false},"author":1,"featured_media":700,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[31],"tags":[],"class_list":["post-697","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Software Development: Top Tab Navigator With Icons in React Native<\/title>\n<meta name=\"description\" content=\"The Top Tab Navigator in React Native is one of the most common types of navigation that is used in mobile app development.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Software Development: Top Tab Navigator With Icons in React Native\" \/>\n<meta property=\"og:description\" content=\"The Top Tab Navigator in React Native is one of the most common types of navigation that is used in mobile app development.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/codeflretech\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-04T09:09:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-17T02:44:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/07\/Untitled-Design.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"753\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"codeflare\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeflaretech\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/software-development-top-tab-navigator-with-icons-in-react-native\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/software-development-top-tab-navigator-with-icons-in-react-native\\\/\"},\"author\":{\"name\":\"codeflare\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\"},\"headline\":\"Software Development: Top Tab Navigator With Icons in React Native\",\"datePublished\":\"2021-07-04T09:09:59+00:00\",\"dateModified\":\"2022-11-17T02:44:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/software-development-top-tab-navigator-with-icons-in-react-native\\\/\"},\"wordCount\":325,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/software-development-top-tab-navigator-with-icons-in-react-native\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/Untitled-Design.jpeg\",\"articleSection\":[\"react native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/software-development-top-tab-navigator-with-icons-in-react-native\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/software-development-top-tab-navigator-with-icons-in-react-native\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/software-development-top-tab-navigator-with-icons-in-react-native\\\/\",\"name\":\"Software Development: Top Tab Navigator With Icons in React Native\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/software-development-top-tab-navigator-with-icons-in-react-native\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/software-development-top-tab-navigator-with-icons-in-react-native\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/Untitled-Design.jpeg\",\"datePublished\":\"2021-07-04T09:09:59+00:00\",\"dateModified\":\"2022-11-17T02:44:48+00:00\",\"description\":\"The Top Tab Navigator in React Native is one of the most common types of navigation that is used in mobile app development.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/software-development-top-tab-navigator-with-icons-in-react-native\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/software-development-top-tab-navigator-with-icons-in-react-native\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/software-development-top-tab-navigator-with-icons-in-react-native\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/Untitled-Design.jpeg\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/Untitled-Design.jpeg\",\"width\":1200,\"height\":753,\"caption\":\"top tab navigator in react native\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/software-development-top-tab-navigator-with-icons-in-react-native\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"react native\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Software Development: Top Tab Navigator With Icons in React Native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"name\":\"\",\"description\":\"Sustainable solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\",\"name\":\"Codeflare Limited\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"width\":1040,\"height\":263,\"caption\":\"Codeflare Limited\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\",\"name\":\"codeflare\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"caption\":\"codeflare\"},\"description\":\"Latest tech news and coding tips.\",\"sameAs\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\",\"https:\\\/\\\/facebook.com\\\/codeflretech\",\"https:\\\/\\\/instagram.com\\\/codeflaretech\",\"https:\\\/\\\/x.com\\\/codeflaretech\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1\"],\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/author\\\/watcher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Software Development: Top Tab Navigator With Icons in React Native","description":"The Top Tab Navigator in React Native is one of the most common types of navigation that is used in mobile app development.","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:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/","og_locale":"en_US","og_type":"article","og_title":"Software Development: Top Tab Navigator With Icons in React Native","og_description":"The Top Tab Navigator in React Native is one of the most common types of navigation that is used in mobile app development.","og_url":"https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/","article_author":"https:\/\/facebook.com\/codeflretech","article_published_time":"2021-07-04T09:09:59+00:00","article_modified_time":"2022-11-17T02:44:48+00:00","og_image":[{"width":1200,"height":753,"url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/07\/Untitled-Design.jpeg","type":"image\/jpeg"}],"author":"codeflare","twitter_card":"summary_large_image","twitter_creator":"@codeflaretech","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/#article","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/"},"author":{"name":"codeflare","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a"},"headline":"Software Development: Top Tab Navigator With Icons in React Native","datePublished":"2021-07-04T09:09:59+00:00","dateModified":"2022-11-17T02:44:48+00:00","mainEntityOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/"},"wordCount":325,"commentCount":0,"publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/07\/Untitled-Design.jpeg","articleSection":["react native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/","url":"https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/","name":"Software Development: Top Tab Navigator With Icons in React Native","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/#primaryimage"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/07\/Untitled-Design.jpeg","datePublished":"2021-07-04T09:09:59+00:00","dateModified":"2022-11-17T02:44:48+00:00","description":"The Top Tab Navigator in React Native is one of the most common types of navigation that is used in mobile app development.","breadcrumb":{"@id":"https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/#primaryimage","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/07\/Untitled-Design.jpeg","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/07\/Untitled-Design.jpeg","width":1200,"height":753,"caption":"top tab navigator in react native"},{"@type":"BreadcrumbList","@id":"https:\/\/codeflarelimited.com\/blog\/software-development-top-tab-navigator-with-icons-in-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeflarelimited.com\/blog\/"},{"@type":"ListItem","position":2,"name":"react native","item":"https:\/\/codeflarelimited.com\/blog\/react-native\/"},{"@type":"ListItem","position":3,"name":"Software Development: Top Tab Navigator With Icons in React Native"}]},{"@type":"WebSite","@id":"https:\/\/codeflarelimited.com\/blog\/#website","url":"https:\/\/codeflarelimited.com\/blog\/","name":"","description":"Sustainable solutions","publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeflarelimited.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codeflarelimited.com\/blog\/#organization","name":"Codeflare Limited","url":"https:\/\/codeflarelimited.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","width":1040,"height":263,"caption":"Codeflare Limited"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a","name":"codeflare","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","caption":"codeflare"},"description":"Latest tech news and coding tips.","sameAs":["https:\/\/codeflarelimited.com\/blog","https:\/\/facebook.com\/codeflretech","https:\/\/instagram.com\/codeflaretech","https:\/\/x.com\/codeflaretech","https:\/\/www.youtube.com\/channel\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1"],"url":"https:\/\/codeflarelimited.com\/blog\/author\/watcher\/"}]}},"jetpack_featured_media_url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/07\/Untitled-Design.jpeg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/comments?post=697"}],"version-history":[{"count":2,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/697\/revisions"}],"predecessor-version":[{"id":702,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/697\/revisions\/702"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media\/700"}],"wp:attachment":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media?parent=697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/categories?post=697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/tags?post=697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}