{"id":15040694,"url":"https://github.com/sevvaleygul0/react-native-big-tab-bar","last_synced_at":"2025-04-14T18:33:55.985Z","repository":{"id":42631382,"uuid":"299110898","full_name":"sevvaleygul0/react-native-big-tab-bar","owner":"sevvaleygul0","description":"You can update your tab bar as an image or number, you can use with the selected one. Big tab bar is a fully customizable :)","archived":false,"fork":false,"pushed_at":"2024-11-18T23:08:35.000Z","size":43578,"stargazers_count":8,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T13:38:38.945Z","etag":null,"topics":["bar","big-tab-bar","image-tab-bar","library","react-native","react-native-big-tab-bar","react-native-library","tabbar","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/sevvaleygul0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null}},"created_at":"2020-09-27T20:12:00.000Z","updated_at":"2023-07-26T14:28:10.000Z","dependencies_parsed_at":"2023-02-09T19:45:40.729Z","dependency_job_id":null,"html_url":"https://github.com/sevvaleygul0/react-native-big-tab-bar","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":"WrathChaos/react-native-typescript-library-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sevvaleygul0%2Freact-native-big-tab-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sevvaleygul0%2Freact-native-big-tab-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sevvaleygul0%2Freact-native-big-tab-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sevvaleygul0%2Freact-native-big-tab-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sevvaleygul0","download_url":"https://codeload.github.com/sevvaleygul0/react-native-big-tab-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248937162,"owners_count":21186176,"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":["bar","big-tab-bar","image-tab-bar","library","react-native","react-native-big-tab-bar","react-native-library","tabbar","typescript"],"created_at":"2024-09-24T20:44:56.067Z","updated_at":"2025-04-14T18:33:55.944Z","avatar_url":"https://github.com/sevvaleygul0.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"react native big tab bar logo\" src=\"assets/big-tab-bar-logo.png\" width=\"1050\"/\u003e\n\n# Demo\n\n\u003ctable\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n  \u003cimg alt=\"React Native Typescript Library Starter\"\n        src=\"assets/Screenshots/screenshot-number-example.png\"\n         /\u003e\n  \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n  \u003cimg alt=\"React Native Typescript Library Starter\"\n        src=\"assets/Screenshots/screenshot-image-example.png\" /\u003e\n\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n  \u003cimg alt=\"React Native Typescript Library Starter\"\n        src=\"assets/Gif/big-tab-bar.gif\" /\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n# Installation\n\nAdd the dependency:\n\n```ruby\nnpm i react-native-big-tab-bar\n```\n\n## Import\n\n```jsx\nimport BigTabBar from \"react-native-big-tab-bar\";\n```\n\n## Data Model\n\n```\nexport type ITabBar = {\nid: number;\ntext: string;\nnumber?: number;\nimage?: any;\n};\n```\n\n## Example Data\n\n```jsx\n[\n  {\n    id: 0,\n    bottomText: \"Monday\",\n    innerText: \"8\",\n  },\n  {\n    id: 1,\n    bottomText: \"Tuesday\",\n    image: {\n      uri: \"https://image.winudf.com/v2/image/Y29tLnNnbS5iZWFjaHdhbGxwYXBlcmhkX3NjcmVlbnNob3RzXzJfZjRhOGQ4MzQ/screen-2.jpg?fakeurl=1\u0026type=.jpg\",\n    },\n  },\n  {\n    id: 2,\n    bottomText: \"Wednesday\",\n    innerText: \"14\",\n  },\n  {\n    id: 3,\n    bottomText: \"Thursday\",\n    image: { uri: \"https://images2.alphacoders.com/468/4682.jpg\" },\n  },\n];\n```\n\n## Example Usage\n\n```jsx\n\u003cBigTabBar tabs={tabs} /\u003e\n```\n\n## Configuration - Props\n\n| Property                |   Type   |  Default  | Description                                                                               |\n| ----------------------- | :------: | :-------: | ----------------------------------------------------------------------------------------- |\n| tabs                    |  array   |           | Set your tab bar items                                                                    |\n| itemStyle               |  style   |  default  | set your custom item button style                                                         |\n| height                  |  number  |    120    | set your custom item height value                                                         |\n| width                   |  number  |    72     | set your custom item width value                                                          |\n| bottomTextStyle         |  style   |  default  | set your custom text style                                                                |\n| selectedItem            |  number  |     0     | set your initial item                                                                     |\n| innerContainerHeight    |  number  |    50     | set the height of the inner container                                                     |\n| innerContainerWeight    |  number  |    50     | set the width of the inner container                                                      |\n| activeBackgroundColor   |  string  | \"#F5C812\" | set your active background color                                                          |\n| inActiveBackgroundColor |  string  | \"#faeed9\" | set the background color when it is inactive                                              |\n| inActiveTextColor       |  string  | \"#6e685f\" | set the text color when it is inactive                                                    |\n| activeTextColor         |  string  |  \"#fff\"   | set the text color when it is active                                                      |\n| ImageComponent          |  Image   |   Image   | set on your own Image Component                                                           |\n| imageStyle              |  style   |  default  | set your custom image style                                                               |\n| innerActiveTextColor    |  string  | \"#F5C812\" | if there are numbers in the inner container, you can change the color when it is active   |\n| innerInActiveTextColor  |  string  | \"#F5C812\" | if there are numbers in the inner container, you can change the color when it is inactive |\n| innerTextStyle          |  style   |  default  | set your custom text style                                                                |\n| onPress                 | function | undefined | set your own function when onPress                                                        |\n| onChange                | function | undefined | set your own function when onChange                                                       |\n\n## Author\n\nSevval Eygul, sevvalleygull@gmail.com\n\n## License\n\nReact Native Big Tab Bar 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%2Fsevvaleygul0%2Freact-native-big-tab-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsevvaleygul0%2Freact-native-big-tab-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsevvaleygul0%2Freact-native-big-tab-bar/lists"}