react-native-segmented-tabs

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

Name	Description	Default	Type
selectIndex	index of tab item to be selected initially	0	number
Items	titles of tabs	['A', 'B', 'C']	array
borderRadius	borderRadius of whole tab	5	number
wrapStyle	external styles can be passed to override the default styles of the segmentedTabs wrapper	base styles added in SegmentedControlTab.js	object(styles)
onPress	call-back function when a tab is selected	(item) => {}	function
tabHeight	the height of each of items	30	number
tabWidth	the width of each of items	80	number
tabBgColor	the backgroundColor of each of items	'white'	string
tabActiveBgColor	the backgroundColor of active tab	'#383d45'	string
borderWidth	border width	1	number
borderColor	border color	'#383d45'	string
fontSize	font size	16	number
fontColor	font color	'#383d45'	string
tabActiveFontColor	font color of active item	'white'	string

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