{"id":17700992,"url":"https://github.com/wrathchaos/react-native-bottom-bar","last_synced_at":"2025-04-13T15:52:37.045Z","repository":{"id":33274943,"uuid":"157380215","full_name":"WrathChaos/react-native-bottom-bar","owner":"WrathChaos","description":"Fully customizable BottomBar with unique design shape for React Native.","archived":false,"fork":false,"pushed_at":"2023-12-21T19:39:01.000Z","size":8027,"stargazers_count":76,"open_issues_count":4,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-05-01T14:28:56.962Z","etag":null,"topics":["android","apple","bottombar","customizable","expo","freakycoder","google","ios","javascript","kuray","library","react","react-native","reactnative","shape"],"latest_commit_sha":null,"homepage":"https://www.freakycoder.com","language":"JavaScript","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/WrathChaos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-11-13T12:55:02.000Z","updated_at":"2023-10-24T15:53:18.000Z","dependencies_parsed_at":"2024-01-13T21:24:04.343Z","dependency_job_id":"4f6a1b82-5802-4caa-ab7d-618ab800b522","html_url":"https://github.com/WrathChaos/react-native-bottom-bar","commit_stats":{"total_commits":112,"total_committers":6,"mean_commits":"18.666666666666668","dds":0.6339285714285714,"last_synced_commit":"ed4b1c6e0a19742c0a7fbf0474ac17227b1ddeba"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-bottom-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-bottom-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-bottom-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-bottom-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WrathChaos","download_url":"https://codeload.github.com/WrathChaos/react-native-bottom-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741148,"owners_count":21154249,"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","apple","bottombar","customizable","expo","freakycoder","google","ios","javascript","kuray","library","react","react-native","reactnative","shape"],"created_at":"2024-10-24T17:43:47.869Z","updated_at":"2025-04-13T15:52:37.026Z","avatar_url":"https://github.com/WrathChaos.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg alt=\"React Native Bottom Bar\" src=\"https://github.com/WrathChaos/react-native-bottom-bar/blob/master/assets/Screenshots/logo.png\" width=\"275\"/\u003e\n\n[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-button)\n\n[![Fully customizable, unique shaped bottom bar component for React Native.](https://img.shields.io/badge/-Fully%20customizable%2C%20unique%20shaped%20bottom%20bar%20component%20for%20React%20Native-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-button)\n\n[![npm version](https://img.shields.io/npm/v/react-native-bottom-bar.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-bottom-bar)\n[![npm](https://img.shields.io/npm/dt/react-native-bottom-bar.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-bottom-bar)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"React Native Bottom Bar\" src=\"https://github.com/WrathChaos/react-native-bottom-bar/blob/master/assets/Screenshots/original.png\" width=\"49.7%\"/\u003e\n\u003cimg alt=\"React Native Bottom Bar\" src=\"https://github.com/WrathChaos/react-native-bottom-bar/blob/master/assets/Screenshots/examples.png\" width=\"49.7%\"/\u003e\n\u003c/p\u003e\n\n## Installation\n\nAdd the dependency:\n\n### Pure React Native :\n\n```js\nnpm i react-native-bottom-bar\n```\n\n### Expo Version :\n\n```js\n\"react-native-bottom-bar\": \"WrathChaos/react-native-bottom-bar#expo\"\n```\n\n### Peer Dependencies :\n\nYou must install these dependencies!\n\n```js\n\"@freakycoder/react-native-helpers\": \"\u003e= 1.0.0\",\n\"react-native-androw\": \"\u003e= 0.0.31\",\n\"react-native-vector-icons\": \"\u003e= 6.0.0\",\n\"react-native-linear-gradient\": \"\u003e= 2.4.x\",\n\"react-native-dynamic-vector-icons\": \"\u003e= x.x.x\"\n```\n\n## Usage\n\n```jsx\n\u003cBottomBar\n  style={style}\n  shapeColor={shapeColor}\n  mainIcon={mainIcon}\n  mainIconColor={mainIconColor}\n  mainIconGradient={mainIconGradient}\n  mainIconComponent={mainIconComponent}\n  miniButtonsColor={miniButtonsColor}\n  firstIconComponent={firstIconComponent}\n  secondIconComponent={secondIconComponent}\n  thirdIconComponent={thirdIconComponent}\n  fourthIconComponent={fourthIconComponent}\n/\u003e\n```\n\n### Example Application\n\n- I just shared the example project on Expo, simply run on your device to check what it is:\n  [via Expo](https://exp.host/@freakycoder/examples) OR\n  [check the code](examples/App.js), and yes! :) all of the images, screenshots are directly taken\n  from the this example. Of course, you can simply clone the project and run the example on your own environment.\n\n### Configuration - Props\n\n##### BottomBar:\n\n| Property            |   Type    |                  Default                   | Description                                         |\n| ------------------- | :-------: | :----------------------------------------: | --------------------------------------------------- |\n| style               |   style   |                 container                  | use this to change the main BottomBar's style       |\n| shapeStyle          |   style   |                 bottom:89                  | use this to change the main BottomBar's Shape style |\n| shapeColor          |   color   |                  #FBFBFD                   | use this to change the unique shape's color         |\n| mainIcon            | component |                    icon                    | changes the main big button's icon type             |\n| mainIconColor       |   color   |                  #FFFFFF                   | changes the main big button's icon color            |\n| mainIconGradient    |   array   |               blue gradient                | changes the main big button's gradient color        |\n| mainIconComponent   | component | MainIconButton(Gradient Icon based button) | Make your own button on the main one                |\n| miniButtonsColor    |   color   |                    null                    | changes the mini buttons color with a single prop   |\n| firstIconComponent  | component |       MiniButton(simple icon button)       | renders your own component as a first button        |\n| secondIconComponent | component |       MiniButton(simple icon button)       | renders your own component as a second button       |\n| thirdIconComponent  | component |       MiniButton(simple icon button)       | renders your own component as a third button        |\n| fourthIconComponent | component |       MiniButton(simple icon button)       | renders your own component as a fourth button       |\n| disableFirstIcon    |  boolean  |                   false                    | disable the first icon button                       |\n| disableSecondIcon   |  boolean  |                   false                    | disable the second icon button                      |\n| disableThirdIcon    |  boolean  |                   false                    | disable the third icon button                       |\n| disableFourthIcon   |  boolean  |                   false                    | disable the fourth icon button                      |\n\n### Credits\n\nThank you [RN Typography Team](https://github.com/hectahertz/react-native-typography) for the ShowcaseScreen :) It has a great design.\n\n## Author\n\nFreakyCoder, kurayogun@gmail.com\n\n## License\n\nReact Native Bottom Bar Library is available under the MIT license. See the LICENSE file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-bottom-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwrathchaos%2Freact-native-bottom-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-bottom-bar/lists"}