{"id":3988,"url":"https://github.com/aksonov/react-native-tabs","last_synced_at":"2025-04-08T10:29:07.186Z","repository":{"id":57340658,"uuid":"43300825","full_name":"aksonov/react-native-tabs","owner":"aksonov","description":"React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)","archived":false,"fork":false,"pushed_at":"2017-12-19T13:53:29.000Z","size":260,"stargazers_count":727,"open_issues_count":29,"forks_count":114,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-04-01T09:20:26.131Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aksonov.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":"2015-09-28T12:55:08.000Z","updated_at":"2025-02-23T23:21:40.000Z","dependencies_parsed_at":"2022-09-13T11:32:04.370Z","dependency_job_id":null,"html_url":"https://github.com/aksonov/react-native-tabs","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aksonov%2Freact-native-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aksonov%2Freact-native-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aksonov%2Freact-native-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aksonov%2Freact-native-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aksonov","download_url":"https://codeload.github.com/aksonov/react-native-tabs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247823186,"owners_count":21002028,"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":[],"created_at":"2024-01-05T20:16:57.750Z","updated_at":"2025-04-08T10:29:07.167Z","avatar_url":"https://github.com/aksonov.png","language":"JavaScript","funding_links":[],"categories":["Components","组件","Others","JavaScript"],"sub_categories":["UI"],"readme":"# react-native-tabs\nReact Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)\n\n## Why I need to use it?\n- Decouple content views from tab bar\n- Platform-indepedent\n- Possibility to use Flux actions with react-native-router-flux to switch between content views\n- Suitable for both bottom tab bar as well as upper sectioned buttons (you just need to define style properly)\n- Custom views for each tab icon\n\n## How it works?\nComponent just iterates over all its children and makes them touchable ('name' is only required attribute of each child).\nselectedStyle property represents style should be applied for selected tabs. This property could be set for all tabs or for individual tab.\nselectedIconStyle represents style applied for selected tab.\nThe same, onSelect handler could be set globally for all tabs or/and for individual tab.\nYou can lock tab buttons (require user to use long press to actuate the button) by passing prop {locked: true}.\n\n## Example\nExample makes selected icon color red and change the state of example view. To switch to other views you may use react-native-router-flux component or own navigation controller\n![demo-2](https://cloud.githubusercontent.com/assets/1321329/10188030/adf5532c-675c-11e5-8447-227ec38fa24f.gif)\n\n```javascript\nimport React, { Component } from 'react';\nimport {\n  AppRegistry,\n  StyleSheet,\n  Text,\n  View,\n} from 'react-native';\n\nimport Tabs from 'react-native-tabs';\n\nclass Example extends Component {\n  constructor(props){\n    super(props);\n    this.state = {page:'second'};\n  }\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cTabs selected={this.state.page} style={{backgroundColor:'white'}}\n              selectedStyle={{color:'red'}} onSelect={el=\u003ethis.setState({page:el.props.name})}\u003e\n            \u003cText name=\"first\"\u003eFirst\u003c/Text\u003e\n            \u003cText name=\"second\" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}\u003eSecond\u003c/Text\u003e\n            \u003cText name=\"third\"\u003eThird\u003c/Text\u003e\n            \u003cText name=\"fourth\" selectedStyle={{color:'green'}}\u003eFourth\u003c/Text\u003e\n            \u003cText name=\"fifth\"\u003eFifth\u003c/Text\u003e\n        \u003c/Tabs\u003e\n          \u003cText style={styles.welcome}\u003e\n              Welcome to React Native\n          \u003c/Text\u003e\n          \u003cText style={styles.instructions}\u003e\n              Selected page: {this.state.page}\n          \u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n  welcome: {\n    fontSize: 20,\n    textAlign: 'center',\n    margin: 10,\n  },\n  instructions: {\n    textAlign: 'center',\n    color: '#333333',\n    marginBottom: 5,\n  },\n});\n\nAppRegistry.registerComponent('Example', () =\u003e Example);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faksonov%2Freact-native-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faksonov%2Freact-native-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faksonov%2Freact-native-tabs/lists"}