https://github.com/nstr/native-tabs
React Native Tabs
https://github.com/nstr/native-tabs
react react-components react-native reactjs
Last synced: about 1 year ago
JSON representation
React Native Tabs
- Host: GitHub
- URL: https://github.com/nstr/native-tabs
- Owner: nstr
- License: mit
- Created: 2017-11-10T10:52:58.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-02-14T14:06:29.000Z (over 6 years ago)
- Last Synced: 2025-03-24T06:54:39.424Z (over 1 year ago)
- Topics: react, react-components, react-native, reactjs
- Language: JavaScript
- Size: 15.6 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# native-tabs
This tiny package witch was built for React Native via Animated Views from own React Native elements without using external packages.
* [Demo](#demo)
* [Installation](#installation)
* [Docs](#docs)
* [Styles](#styles)
* [Usage](#usage)
## Demo
1. NativeTabs without scroll with a small number of tabs.
2. NativeTabs with scroll used for a large number of tabs or very wide tabs.
## Installation
```
npm i native-tabs
```
## Docs
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:
```jsx
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: dolor
}
];
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 ;
}
}
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"
}
});
```