{"id":17867963,"url":"https://github.com/unix/react-native-smartbar","last_synced_at":"2025-03-21T11:31:17.973Z","repository":{"id":57340229,"uuid":"67404030","full_name":"unix/react-native-smartbar","owner":"unix","description":"Maybe this is the best tabbar , support android and ios !","archived":false,"fork":false,"pushed_at":"2017-07-27T15:03:30.000Z","size":343,"stargazers_count":29,"open_issues_count":0,"forks_count":6,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-19T22:46:48.224Z","etag":null,"topics":["android","bar","ios","react-naitve","smartbar","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/unix.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":null,"support":null}},"created_at":"2016-09-05T08:47:45.000Z","updated_at":"2020-07-22T02:32:03.000Z","dependencies_parsed_at":"2022-08-26T04:31:04.337Z","dependency_job_id":null,"html_url":"https://github.com/unix/react-native-smartbar","commit_stats":null,"previous_names":["wittbulter/react-native-smartbar"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unix%2Freact-native-smartbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unix%2Freact-native-smartbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unix%2Freact-native-smartbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unix%2Freact-native-smartbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unix","download_url":"https://codeload.github.com/unix/react-native-smartbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244790652,"owners_count":20510781,"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","bar","ios","react-naitve","smartbar","tabbar"],"created_at":"2024-10-28T09:56:20.549Z","updated_at":"2025-03-21T11:31:17.660Z","avatar_url":"https://github.com/unix.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `react-native-smartbar`\nMaybe this is the best tabbar. [中文](https://github.com/WittBulter/react-native-smartbar/blob/master/README_CN.md)\n\n\u003e### **Install**  \n\n```sh\n* install with npm\nsudo npm i react-native-smartbar --save\n```\n\n\u003e### **Get Started**  \n\n- DEMO\n\n    ![Witt Bulter](http://obqqxnnm4.bkt.clouddn.com/demo.gif?imageView2/1/w/140/h/280)\n\n- toggle the bar\n\n    ![Witt Bulter](http://obqqxnnm4.bkt.clouddn.com/demo-2.gif?imageView2/1/w/140/h/280)\n\n- only image\n\n    If you just want to show the image, do not fill in [text(TabBar.Item)]\n![Witt Bulter](http://obqqxnnm4.bkt.clouddn.com/demo-3.png?imageView1/1/w/500/h/110)\n- only text\n\n    If you just want to show the text, do not fill in [image(TabBar.Item)]\n ![Witt Bulter](http://obqqxnnm4.bkt.clouddn.com/demo-4.png?imageView1/1/w/500/h/110)\n\n\n\n\u003e### **documentation**    \n\n- TabBar\n\n| attribute   | type   | required | description                  | example                       |\n| ----------- | ------ | -------- | ---------------------------- | ----------------------------- |\n| activeColor | string | false    | active color                 | activeColor={'#FE985B'}       |\n| toggleBar   | bool   | false    | hide and show                | toggleBar={this.state.toggle} |\n| height      | number | false    | default value = 45px         | height={50}                   |\n| index       | number | false    | jump index and default index | index={this.state.index}      |\n| style       | style  | false    | footer bar style             | style={{height: 500}}         |\n\n\n- TabBar.Item\n\n| attribute    | type   | required | description      | example                           |\n| ------------ | ------ | -------- | ---------------- | --------------------------------- |\n| icon         | image  | false    | default icon     | icon={require('./img/abc.png')}   |\n| selectedIcon | image  | false    | active icon      | icon={require('./img/abc_2.png')} |\n| text         | string | false    | default text     | text={'List'}                     |\n| style        | style  | false    | footer bar style | style={{height: 500}}             |\n\n\n\n\u003e### **Features**   \n\n1. Show and hide\n    \n    ```javascript\n        \u003cTabBar\n               // ...\n                ref={tabbar=\u003e this.tabbar=tabbar}\n        \u003e\n\n        // you can pass the handle to the next page\n        // toggle \n        this.tabbar.toggleBar()\n     \n        // OR set bool\n        this.tabbar.toggleBar(true)\n        this.tabbar.toggleBar(false)\n    ```\n    \n    OR ...\n    \n    ```javascript\n    // use redux\n       \u003cTabBar\n              // ...\n               toggleBar={this.state.toggle}\n       \u003e\n    \n       // toggle \n       componentWillReceiveProps (nextProps){\n       \t\tthis.setState({\n       \t\t\ttoggle: nextProps.toggle\n       \t\t})\n       }\n        \n    ```\n\n2. Jump \n    ```javascript\n        \u003cTabBar\n               // ...\n                ref={tabbar=\u003e this.tabbar=tabbar}\n        \u003e\n     \n        // jump\n        this.tabbar.jumpToIndex(index)\n     \n    ```\n    OR ...\n    \n    ```javascript\n       \u003cTabBar\n              // ...\n               index={this.state.index}\n       \u003e\n    \n       // jump \n       componentWillReceiveProps (nextProps){\n            this.setState({\n                index: nextProps.index\n            })\n       }\n        \n    ```\n\n3. Customize\n\n    You can customize any style !\n    ```javascript\n       \u003cTabBar\n              // ...\n               style={{...}}\n       \u003e\n           \u003cTabBar.Item\n               // ...\n               style={{...}}\n            \u003e\n               \u003cIndex /\u003e\n            \u003c/TabBar.Item\u003e    \n       \u003c/TabBar\u003e\n        \n    ```\n\n\n\u003e### **Example**  \n \n    see /example\n\n\u003e### **Support**      \n\n- MAIL   `(# = @) =\u003e nanazuimeng123#gmail.com`\n- [ISSUES](https://github.com/WittBulter/react-native-smartbar/issues)\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funix%2Freact-native-smartbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funix%2Freact-native-smartbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funix%2Freact-native-smartbar/lists"}