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
• Installation
• Docs
• Styles
• 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:

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"
  }
});