1.3.1 • Published 6 years ago
native-tabs v1.3.1
native-tabs
This tiny package was built for React Native via Animated Views from own React Native elements without of using of external packages.
Demo
- NativeTabs without scroll with a small number of tabs.
- NativeTabs with scroll used for a large number of tabs or very wide tabs.
Installation
npm i native-tabsDocs
| Property | Type | Description |
|---|---|---|
tabs | required array | The array consists of objects which must have an id inside an object. More details about tab structure below. |
activeTab | required object | The object must have an id. |
onTab | required function | The function returns new active tab. |
disabled | bool | Disable onTab function. |
styles | object | An object of react native styles. More details below. |
Tab Structure
| Property | Type | Description |
|---|---|---|
id | string or number | By this id will be handling of active tab. |
name | string or number | The text inside of tab. |
node | React Node | Possible to render another react node instead of Text inside of a Tab. In this case name does not displayed. |
Styles:
| Property | Type | Description |
|---|---|---|
wrap | ViewPropTypes.style | Styles for the wrap View component. Useful for adding a border, shadow and etc. |
tabs | ViewPropTypes.style | Styles for the component of the whole list of tabs. |
tab | TouchableOpacity.propTypes.style | Styles for a tab. |
tabText | Text.propTypes.style | Styles for a text of a tab. |
activeTab | TouchableOpacity.propTypes.style | Styles for active tab. |
activeTabText | Text.propTypes.style | Styles for a text of active tab. |
underline | View.propTypes.style | Styles for a moving underline. |
Usage:
import NativeTabs from 'native-tabs';
import { StyleSheet, Text, View } from 'react-native';
const items = [
{
id: 111,
name: "lorem"
},
{
id: 222,
name: "ipsum"
},
{
id: 333,
node: <View><Text>dolor</Text></View>
}
];
class SomeComponent extends React.Component{
constructor(props) {
super(props);
this.state = {
activeTab: { id: 111 }
};
this.callBackFunction = this.callBackFunction.bind(this);
{
callBackFunction(tab) {
this.setState({
activeTab: tab
});
}
render() {
return <NativeTabs tabs={items}
styles={{
wrap: styles.wrap,
tab: styles.tab,
tabText: styles.tabText,
underline: styles.underline
}}
activeTab={this.state.activeTab}
onTab={this.callBackFunction}/>;
}
}
const styles = StyleSheet.create({
wrap: {
backgroundColor: '#fff',
borderBottomColor: "#eaeaea",
borderBottomWidth: 1,
},
tab: {
flex: 1,
alignItems: 'center',
padding: 16,
paddingTop: 12,
paddingBottom: 12
},
tabText: {
width: "100%",
textAlign: "center"
},
underline: {
height: 3,
backgroundColor: "#00D8BB"
}
});