react-native-segmented-tabs(for Android/iOS) 🚀

A react native component with the same concept of react native's SegmantedControlIOS, Primarily built to support both IOS and Android. 💡

ScreenShots

Install

npm install react-native-segmented-tabs --save

Usage

Import

import SegmentedTabs from 'react-native-segmented-tabs';

class ConsumerComponent extends Component {

  constructor (props) {
    super(props);
    this.state = {
      selectIndex: 0
    }
  }

  _selectTabs = (index) => {
    this.setState({
      selectIndex: index
    });
  }

  render() {
      return (
          <View>
            <SegmentedTabs
              wrapStyle={styles.wrap}
              selectIndex={this.state.selectIndex} 
              onPress={this._selectTabs} 
              items={['日','周','月','年']}/>
          </View>
      );
  }
}

Props

Custom styling

      <SegmentedTabs wrapStyle={styles.tabsContainerStyle}
          tabStyle={styles.tabStyle}
          tabTextStyle={styles.tabTextStyle}
          tabHeight={30}
          tabWidth = {100}
          ...
          selectIndex={this.state.selectIndex} 
          onPress={this._selectTabs} />

      const styles = StyleSheet.create({
          tabsContainerStyle: {
            //custom styles
          }
      })

License

MIT