react-native-segment-tab's Introduction

react-native-segment-tab(for Android/iOS)

segment-tab looks like ios component

Install

npm install react-native-segment-tab --save

Usage

  state = {
    selected: 0
  }
  render() {
    return (
      <View style={styles.container}>
        <SegmentTab
          data={['Day1', 'Day2', 'Day3']}
          selected={this.state.selected}
          onPress={ index => this.setState({selected: index})}
        />
        <SegmentTab
          style={{marginTop: 40}}
          activeColor='#4078bf'
          selected={this.state.selected}
          onPress={ index => this.setState({selected: index})}
          orientation='vertical'
        />
      </View>
    );
  }

Props

Name	Description	Default	Type
data	titles of tabs	`['One', 'Two', 'Three']`	array
titleSize	fontSize for each title	`14`	number
orientation	direction of tabs	`vertical` or `horizontal`	string
horizontalWidth	width of tab when tab is horizontal layout	`200`	number
horizontalHeight	height of tab when tab is horizontal layout	`40`	number
verticalWidth	width of tab when tab is vertical layout	`100`	number
verticallHeight	height of tab when tab is vertical layout	`120`	number
borderRadius	borderRadius of whole tab	5	number
borderColor	borderColor of whole tab	gray	string
activeColor	color of an active tab item	`red`	string
inActiveColor	color of an inActive tab item, it will be color of its parent's backgroundColor if is null	null	string
textActiveColor	text of color in active tab	inActiveColor	string
textInActiveColor	text of color in inactive tab	activeColor	string
selected	index of selected tab item	0	number
tyle	you can add external for tab	null	View.propTypes.style
onPress	call-back function for each item	() => {}	func

Notice:

Following idea of stateless component, react-native-segment-tab is designed without internal state, so you have to use selected and onPress props to response your interaction.
You'd better use the component with a wrapper view because segment-tab is a pure component.
If you have any question, just create issues or send email to me: [email protected].