{"id":26042677,"url":"https://github.com/nstr/native-tabs","last_synced_at":"2025-04-10T05:40:40.831Z","repository":{"id":57308336,"uuid":"110236999","full_name":"nstr/native-tabs","owner":"nstr","description":"React Native Tabs","archived":false,"fork":false,"pushed_at":"2020-02-14T14:06:29.000Z","size":16,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T06:54:39.424Z","etag":null,"topics":["react","react-components","react-native","reactjs"],"latest_commit_sha":null,"homepage":null,"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/nstr.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}},"created_at":"2017-11-10T10:52:58.000Z","updated_at":"2020-07-17T23:39:42.000Z","dependencies_parsed_at":"2022-09-07T03:11:15.267Z","dependency_job_id":null,"html_url":"https://github.com/nstr/native-tabs","commit_stats":null,"previous_names":["njnest/native-tabs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstr%2Fnative-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstr%2Fnative-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstr%2Fnative-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstr%2Fnative-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nstr","download_url":"https://codeload.github.com/nstr/native-tabs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248166135,"owners_count":21058474,"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":["react","react-components","react-native","reactjs"],"created_at":"2025-03-07T16:44:13.376Z","updated_at":"2025-04-10T05:40:40.810Z","avatar_url":"https://github.com/nstr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# native-tabs\n\nThis tiny package witch was built for React Native via Animated Views from own React Native elements without using external packages.\n\n* [Demo](#demo)\n* [Installation](#installation)\n* [Docs](#docs)\n* [Styles](#styles)\n* [Usage](#usage)\n\n## Demo\n\n1. NativeTabs without scroll with a small number of tabs.\n2. NativeTabs with scroll used for a large number of tabs or very wide tabs.\n\n\u003cimg src=\"https://s3-eu-west-1.amazonaws.com/njnest-opensource/npm/nativeTabs.gif\" width=\"300\"\u003e   \u003cimg src=\"https://s3-eu-west-1.amazonaws.com/njnest-opensource/npm/nativeTabsScroll.gif\" width=\"300\"\u003e\n\n\n## Installation\n\n```\nnpm i native-tabs\n```\n\n\n## Docs\n\nProperty | Type | Description\n:---|:---|:---\n`tabs` | required array | The array consists of objects which must have an id inside an object. More details about tab structure below.\n`activeTab` | required object | The object must have an id.\n`onTab` | required function | The function returns new active tab.\n`disabled` | bool | Disable `onTab` function.\n`styles` | object | An object of react native styles. More details below.\n\n## Tab Structure\n\nProperty | Type | Description\n:---|:---|:---\n`id` | `string` or `number` | By this id will be handling of active tab.\n`name` | `string` or `number` | The text inside of tab.\n`node` | React Node | Possible to render another react node instead of Text inside of a Tab. In this case `name` does not displayed.\n\n\n## Styles:\n\nProperty | Type | Description\n:---|:---|:---\n`wrap` | ViewPropTypes.style | Styles for the wrap View component. Useful for adding a border, shadow and etc.\n`tabs` | ViewPropTypes.style | Styles for the component of the whole list of tabs.\n`tab` | TouchableOpacity.propTypes.style | Styles for a tab.\n`tabText` | Text.propTypes.style | Styles for a text of a tab.\n`activeTab` | TouchableOpacity.propTypes.style | Styles for active tab.\n`activeTabText` | Text.propTypes.style | Styles for a text of active tab.\n`underline` | View.propTypes.style | Styles for a moving underline.\n\n## Usage:\n\n```jsx\nimport NativeTabs from 'native-tabs';\nimport { StyleSheet, Text, View } from 'react-native';\n\nconst items = [\n   {\n     id: 111,\n     name: \"lorem\"\n   },\n   {\n     id: 222,\n     name: \"ipsum\"\n   },\n   {\n     id: 333,\n     node: \u003cView\u003e\u003cText\u003edolor\u003c/Text\u003e\u003c/View\u003e\n   }\n];\n\nclass SomeComponent extends React.Component{\n  constructor(props) {\n    super(props);\n    this.state = {\n      activeTab: { id: 111 }\n    };\n    this.callBackFunction = this.callBackFunction.bind(this);\n  {\n  callBackFunction(tab) {\n    this.setState({\n      activeTab: tab\n    });\n  }\n  render() {\n    return \u003cNativeTabs tabs={items}\n            styles={{\n              wrap: styles.wrap,\n              tab: styles.tab,\n              tabText: styles.tabText,\n              underline: styles.underline\n            }}\n            activeTab={this.state.activeTab}\n            onTab={this.callBackFunction}/\u003e;\n  }\n}\n\nconst styles = StyleSheet.create({\n  wrap: {\n    backgroundColor: '#fff',\n    borderBottomColor: \"#eaeaea\",\n    borderBottomWidth: 1,\n  },\n  tab: {\n    flex: 1,\n    alignItems: 'center',\n    padding: 16,\n    paddingTop: 12,\n    paddingBottom: 12\n  },\n  tabText: {\n    width: \"100%\",\n    textAlign: \"center\"\n  },\n  underline: {\n    height: 3,\n    backgroundColor: \"#00D8BB\"\n  }\n});\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnstr%2Fnative-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnstr%2Fnative-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnstr%2Fnative-tabs/lists"}