Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aksonov/react-native-tabs
React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)
https://github.com/aksonov/react-native-tabs
Last synced: 6 days ago
JSON representation
React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)
- Host: GitHub
- URL: https://github.com/aksonov/react-native-tabs
- Owner: aksonov
- License: apache-2.0
- Created: 2015-09-28T12:55:08.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-19T13:53:29.000Z (almost 7 years ago)
- Last Synced: 2024-11-21T15:14:37.204Z (22 days ago)
- Language: JavaScript
- Size: 254 KB
- Stars: 727
- Watchers: 24
- Forks: 115
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-tabs ★687 - React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons) (Components / UI)
- awesome-reactnative-ui - react-native-tabs - independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)|<ul><li>Last updated : This week</li><li>Stars : 695</li><li>Open issues : 28</li></ul>|| (Others)
- awesome-react-native - react-native-tabs ★687 - React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons) (Components / UI)
- awesome-reactnative-ui - react-native-tabs - independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)|<ul><li>Last updated : This week</li><li>Stars : 695</li><li>Open issues : 28</li></ul>|| (Others)
- awesome-react-native - react-native-tabs
- my-awesome - react-native-tabs - React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons) (JavaScript)
- awesome-react-native - react-native-tabs ★687 - React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons) (Components / UI)
- awesome-react-native-ui - react-native-tabs ★474 - React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons) (Components / UI)
- awesome-react-native - react-native-tabs ★687 - React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons) (Components / UI)
README
# react-native-tabs
React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)
## Why I need to use it?
- Decouple content views from tab bar
- Platform-indepedent
- Possibility to use Flux actions with react-native-router-flux to switch between content views
- Suitable for both bottom tab bar as well as upper sectioned buttons (you just need to define style properly)
- Custom views for each tab icon
## How it works?
Component just iterates over all its children and makes them touchable ('name' is only required attribute of each child).
selectedStyle property represents style should be applied for selected tabs. This property could be set for all tabs or for individual tab.
selectedIconStyle represents style applied for selected tab.
The same, onSelect handler could be set globally for all tabs or/and for individual tab.
You can lock tab buttons (require user to use long press to actuate the button) by passing prop {locked: true}.
## Example
Example 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
```javascript
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';
import Tabs from 'react-native-tabs';
class Example extends Component {
constructor(props){
super(props);
this.state = {page:'second'};
}
render() {
return (
this.setState({page:el.props.name})}>
First
Second
Third
Fourth
Fifth
Welcome to React Native
Selected page: {this.state.page}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('Example', () => Example);
```