{"id":21174807,"url":"https://github.com/mindinventory/react-native-tabbar-interaction","last_synced_at":"2025-05-15T04:04:21.515Z","repository":{"id":39859871,"uuid":"143876278","full_name":"Mindinventory/react-native-tabbar-interaction","owner":"Mindinventory","description":"Tabbar Component For React-Native","archived":false,"fork":false,"pushed_at":"2025-05-09T08:33:47.000Z","size":4815,"stargazers_count":835,"open_issues_count":3,"forks_count":171,"subscribers_count":17,"default_branch":"main","last_synced_at":"2025-05-09T09:32:21.074Z","etag":null,"topics":["android","easy-to-use","ios","react-animation","react-native","react-native-component","react-native-library","react-native-navigation","react-tab","reactnative","reactnative-animation-challenges","rtl-support","tabbar","tabs"],"latest_commit_sha":null,"homepage":"https://www.mindinventory.com/react-native-app-development.php","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mindinventory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-08-07T13:21:43.000Z","updated_at":"2025-05-09T08:31:53.000Z","dependencies_parsed_at":"2024-06-18T18:14:00.349Z","dependency_job_id":"f5928a20-0e7e-4046-be3e-ba0934144630","html_url":"https://github.com/Mindinventory/react-native-tabbar-interaction","commit_stats":null,"previous_names":["mindinventory/react-native-tab-bar-interaction"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2Freact-native-tabbar-interaction","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2Freact-native-tabbar-interaction/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2Freact-native-tabbar-interaction/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2Freact-native-tabbar-interaction/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mindinventory","download_url":"https://codeload.github.com/Mindinventory/react-native-tabbar-interaction/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270641,"owners_count":22042858,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","easy-to-use","ios","react-animation","react-native","react-native-component","react-native-library","react-native-navigation","react-tab","reactnative","reactnative-animation-challenges","rtl-support","tabbar","tabs"],"created_at":"2024-11-20T16:56:19.578Z","updated_at":"2025-05-15T04:04:21.499Z","avatar_url":"https://github.com/Mindinventory.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Tabbar Interaction  [![](https://img.shields.io/npm/v/@mindinventory/react-native-tab-bar-interaction.svg)](https://www.npmjs.com/package/@mindinventory/react-native-tab-bar-interaction)\n\nBeautiful Tabbar Interaction with Sliding Inset FABs,\nmade for React Native with RTL support.\n\nCheck it out on Béhance (https://www.behance.net/gallery/68043143/Tab-bar-interaction-with-animated-icons)\n\nCheck it out on Dribbble (https://dribbble.com/shots/4844696-Tab-bar-interaction-with-animated-icons)\n\n\u003cimg src=\"https://cdn.dribbble.com/users/1233499/screenshots/4844696/preview.gif\" \u003e\n\n# Installation\n\nusing npm:\n\n```\nnpm install @mindinventory/react-native-tab-bar-interaction\n```\n\nusing yarn:\n\n```\nyarn add @mindinventory/react-native-tab-bar-interaction\n```\n## Dependencies\n\n- `react-native-reanimated`\n\n### Supported platform\n\n- Android\n- Ios\n\n# Usage\n\n```js\n\nimport {\n  TabBar,\n  TabsType,\n} from \"@mindinventory/react-native-tab-bar-interaction\";\n...\n\nconst tabs = [\n  {\n    name: 'Home',\n    activeIcon: \u003cIcon name=\"home\" color=\"#fff\" size={25} /\u003e,\n    inactiveIcon: \u003cIcon name=\"home\" color=\"#4d4d4d\" size={25} /\u003e\n  },\n  {\n    name: 'list',\n    activeIcon: \u003cIcon name=\"list-ul\" color=\"#fff\" size={25} /\u003e,\n    inactiveIcon: \u003cIcon name=\"list-ul\" color=\"#4d4d4d\" size={25} /\u003e\n  },\n  {\n    name: 'camera',\n    activeIcon: \u003cIcon name=\"camera\" color=\"#fff\" size={25} /\u003e,\n    inactiveIcon: \u003cIcon name=\"camera\" color=\"#4d4d4d\" size={25} /\u003e\n  },\n  {\n    name: 'Notification',\n    activeIcon: \u003cIcon name=\"bell\" color=\"#fff\" size={25} /\u003e,\n    inactiveIcon: \u003cIcon name=\"bell\" color=\"#4d4d4d\" size={25} /\u003e\n  },\n  {\n    name: 'Profile',\n    activeIcon: \u003cIcon name=\"user\" color=\"#fff\" size={25} /\u003e,\n    inactiveIcon: \u003cIcon name=\"user\" color=\"#4d4d4d\" size={25} /\u003e\n  },\n\n];\n...\n\nreturn (\n  \u003cTabBar\n    tabs={tabs}       \n    containerWidth={350}    \n    onTabChange={(tab: TabsType, index: number) =\u003e console.log('Tab changed')}\n  /\u003e\n);\n\n```\n\n## Component props\n\n### Tabbar\n\n| prop                       | value    | required/optional | description                                                          |\n| -------------------------- | -------- | ----------------- | -------------------------------------------------------------------- |\n| tabs                       | array    | required          | It is user for showing icon and label.                               |\n| tabBarContainerBackground  | string   | optional          | Use for change tabBar container color.                               |            \n| onTabChange                | function | required          | Use to perform any action when click on tab.                         |\n| containerBottomSpace       | number   | optional          | Use to add space between tabBar container and from bottom of screen. |\n| containerWidth             | number   | required          | Use for set width of tabBar container                                |\n| containerTopRightRadius    | number   | optional          | Use for add top right radius on tabBar container                     |\n| containerTopLeftRadius     | number   | optional          | Use for add top left radius on tabBar container                      |\n| containerBottomLeftRadius  | number   | optional          | Use for add bottom left radius on tabBar container                   |\n| containerBottomRightRadius | number   | optional          | Use for add bottom right radius on tabBar container                  |\n| defaultActiveTabIndex      | number   | optional          | Use to set default active tab                                        |\n| transitionSpeed            | number   | optional          | Use to set transition speed                                          |\n| circleFillColor            | string   | optional          | Use to set background color for circle                               |\n\n### tabs\n\n| properties   | value     | required/optional | description                                  |\n| ------------ | --------- | ----------------- | -------------------------------------------- |\n| name         | string    | required          | use for showing tab label.                   |\n| activeIcon   | component | required          | Use for showing tab active icon/image.       |\n| inactiveIcon | component | required          | Use for showing tab inactiveIcon icon/image. |\n\n\n# LICENSE!\n\nReact-native-tabbar-interaction is [MIT-licensed](https://github.com/Mindinventory/react-native-tabbar-interaction/blob/master/LICENSE).\n\n# Let us know!\n\nWe’d be really happy if you send us links to your projects where you use our component. Just send an email to sales@mindinventory.com And do let us know if you have any questions or suggestion regarding our work.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindinventory%2Freact-native-tabbar-interaction","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmindinventory%2Freact-native-tabbar-interaction","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindinventory%2Freact-native-tabbar-interaction/lists"}