{"id":17675334,"url":"https://github.com/numandev1/react-native-curved-bottom-tabbar","last_synced_at":"2025-05-12T13:46:34.742Z","repository":{"id":45849718,"uuid":"285485208","full_name":"numandev1/react-native-curved-bottom-tabbar","owner":"numandev1","description":"Curved Bottom Tabbar React Native","archived":false,"fork":false,"pushed_at":"2022-10-02T19:28:15.000Z","size":2426,"stargazers_count":27,"open_issues_count":4,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-31T22:41:34.541Z","etag":null,"topics":["curved","curved-bottom-sheet","tabbar"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/numandev1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"nomi9995","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"http://buymeacoffee.com/numan.dev"}},"created_at":"2020-08-06T05:49:18.000Z","updated_at":"2024-10-29T22:05:36.000Z","dependencies_parsed_at":"2022-09-14T12:31:25.945Z","dependency_job_id":null,"html_url":"https://github.com/numandev1/react-native-curved-bottom-tabbar","commit_stats":null,"previous_names":["nomi9995/react-native-curved-bottom-tabbar"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numandev1%2Freact-native-curved-bottom-tabbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numandev1%2Freact-native-curved-bottom-tabbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numandev1%2Freact-native-curved-bottom-tabbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numandev1%2Freact-native-curved-bottom-tabbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/numandev1","download_url":"https://codeload.github.com/numandev1/react-native-curved-bottom-tabbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253750181,"owners_count":21958264,"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":["curved","curved-bottom-sheet","tabbar"],"created_at":"2024-10-24T07:10:47.735Z","updated_at":"2025-05-12T13:46:34.698Z","avatar_url":"https://github.com/numandev1.png","language":"JavaScript","funding_links":["https://github.com/sponsors/nomi9995","http://buymeacoffee.com/numan.dev","https://www.buymeacoffee.com/numan.dev"],"categories":[],"sub_categories":[],"readme":"### Would you like to support me?\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://github.com/numandev1?tab=followers\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/followers/numandev1?label=Follow%20%40numandev1\u0026style=social\" height=\"36\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.youtube.com/channel/UCYCUspfN7ZevgCj3W5GlFAw\"\u003e\u003cimg src=\"https://img.shields.io/youtube/channel/subscribers/UCYCUspfN7ZevgCj3W5GlFAw?style=social\" height=\"36\" /\u003e\u003ca/\u003e\n\u003c/br\u003e\n\u003ca href=\"https://www.buymeacoffee.com/numan.dev\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" \u003e\u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n# react-native-reanimated-curved-tab-bar\n\n###\n\n### react-native-reanimated, react-native-gesture-handler ARE peerDependencies\n\n###\n\nBuilt with [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler) and [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated).\n\nFully native 60 FPS animations.\n\n| ![](gifs/1.gif) | ![](gifs/2.gif) | ![](gifs/3.gif) |\n| :-------------: | :-------------: | :-------------: |\n\n## Getting started\n\n`$ npm install react-native-curved-bottom-tabbar --save`\n\nor\n\n`$ yarn add react-native-curved-bottom-tabbar`\n\nRequierd Dependencies: [react-native-gesture-handler](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html) and [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated).\n\n## Basic Usage\n\n```javascript\nimport ReanimatedCurvedTabBar from \"react-native-curved-bottom-tabbar\";\n\n// TODO:\n\u003cView style={styles.con}\u003e\n  \u003cReanimatedCurveTabBar\n    // ** Required\n    height={230}\n    // Array of components (icons) []\n    // ** Required\n    iconsArray={[...Array(ARRAY_LENGTH)].map((item, index) =\u003e (\n      \u003cView style={styles.icon}\u003e\n        \u003cText\u003e{index + 1}\u003c/Text\u003e\n      \u003c/View\u003e\n    ))}\n    // Return icon number\n    onPress={(btnNum) =\u003e console.log(btnNum)}\n    allowDropAnime={true}\n  /\u003e\n\u003c/View\u003e;\n```\n\n##\n\n## With Screens Navigation\n\n```javascript\n\u003cView style={styles.con}\u003e\n  \u003cReanimatedCurveTabBar\n    // ** Required\n    height={230}\n    // ** Required\n    iconsArray={[...Array(ARRAY_LENGTH)].map((item, index) =\u003e (\n      \u003cView style={styles.icon}\u003e\n        \u003cText\u003e{index + 1}\u003c/Text\u003e\n      \u003c/View\u003e\n    ))}\n    onPress={(btnNum) =\u003e console.log(btnNum)}\n    // Array of Screens\n    screensArray={[...Array(ARRAY_LENGTH)].map((item, index) =\u003e (\n      \u003cView\n        style={{\n          width,\n          height,\n          backgroundColor: \"eee\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n        }}\n      \u003e\n        \u003cText\u003e{index + 1}\u003c/Text\u003e\n      \u003c/View\u003e\n    ))}\n    allowDropAnime={true}\n  /\u003e\n\u003c/View\u003e\n```\n\n##\n\n## As react-navigation/bottom-tabs's \"tabBar\"\n\n```javascript\n\u003cNavigationContainer\u003e\n  \u003cTab.Navigator\n    tabBar={(props) =\u003e (\n      \u003cReanimatedCurveTabBar\n        // ** Required\n        {...props}\n        // ** Required\n        reactNaviagtionBar={true}\n        // ** Required\n        height={200}\n        // ** Required\n        iconsArray={[...Array(ARRAY_LENGTH)].map((item, index) =\u003e (\n          \u003cView style={styles.icon}\u003e\n            \u003cText\u003e{index + 1}\u003c/Text\u003e\n          \u003c/View\u003e\n        ))}\n        allowDropAnime={true}\n      /\u003e\n    )}\n  \u003e\n    // Your Screens Here // ** Screens name property must be 1 - screens /\n    iconsArray length // ** Screens number equal to iconsArray length // For\n    more info look in Example\n  \u003c/Tab.Navigator\u003e\n\u003c/NavigationContainer\u003e\n```\n\n##\n\n## Advanced Usage\n\n```javascript\n\n        \u003cReanimatedCurveTabBar\n\n          height={230}\n\n          iconsArray={[...Array(ARRAY_LENGTH)].map((item, index) =\u003e\n            (\u003cView style={styles.icon}\u003e\n              \u003cText\u003e{index + 1}\u003c/Text\u003e\n            \u003c/View\u003e)\n          )}\n\n          onPress={(btnNum) =\u003e console.log(btnNum)}\n\n          topGap={15}\n\n          tabColor={'white'}\n          backgroundColor={'firebrick'}\n\n          duration={300}\n\n          sidesRadius={1}\n\n          marginBottom={23}\n\n          scaleYCircle={1.4}\n\n          iconTranslateY={-5}\n          lockTranslateYAnime={true}\n\n          iconScale={1.4}\n          lockScaleAnime={true}\n\n          iconDropY={30}\n          allowDropAnime={true}\n          dropWithFirst={false}\n\n        /\u003e\n      \u003c/View\u003e\n```\n\n## Props\n\n| name                | required | default      | description                                                                               | type    |\n| ------------------- | -------- | ------------ | ----------------------------------------------------------------------------------------- | ------- |\n| height              | yes      | 15           | Nav bar height                                                                            | Number  |\n| iconsArray          | yes      | 0            | [\u003cComponent1\u003e, ...\u003cComponent7\u003e] // MAX iS 7!                                              | Array   |\n| screensArray        | no       | 0            | [\u003cComponent1\u003e, ...\u003cComponent7\u003e] // MAX iS 7!                                              | Array   |\n| onPress             | no       |              | Return the number of the pressed icon (1-7)                                               | Method  |\n| reactNaviagtionBar  | no       |              | Use as react-navigation/bottom-tabs's \"tabBar\" property                                   | Boolean |\n| topGap              | no       | 0            | Top Gap height                                                                            | Number  |\n| tabColor            | no       | 'white'      | Tabs color                                                                                | Color   |\n| backgroundColor     | no       | 'dodgerblue' | Background color                                                                          | Color   |\n| duration            | no       | 300          | Animation duration                                                                        | Number  |\n| sidesRadius         | no       | 1            | multipling the default sides radius 0.1 - 1                                               | Number  |\n| marginBottom        | no       | 23           | Icons marginBottom (distance from ground). recommended values depends on component height | Number  |\n| scaleYCircle        | no       | 1.4          | Glich animation in the bottom of picked icon. Recommended values: 0.7 - 1.4               | Number  |\n| iconTranslateY      | no       | -10          | Picked icon translateY Animation. - =\u003e top ; + =\u003e bottom                                  | Number  |\n| lockTranslateYAnime | no       |              | Active icon translateY animation                                                          | Boolean |\n| iconScale           | no       | 1.4          | Picked icon scaling animation                                                             | Number  |\n| lockScaleAnime      | no       |              | Active icon scaling animation                                                             | Boolean |\n| iconDropY           | no       | 30           | Icons drop down animation                                                                 | Number  |\n| allowDropAnime      | no       |              | Active Icons drop down animation                                                          | Boolean |\n| allowDropAnime      | no       |              | First icon will also drop down                                                            | Boolean |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnumandev1%2Freact-native-curved-bottom-tabbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnumandev1%2Freact-native-curved-bottom-tabbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnumandev1%2Freact-native-curved-bottom-tabbar/lists"}