Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
May 8, 2015
Jun 12, 2015
May 8, 2015
Jan 16, 2017

README.md

react-native-segmented-view

Segmented View for React Native (with animation)

Demo

demo

stretch demo

Example

<SegmentedView
    titles={["First", "Second", "Third"]}
    index={this.state.index}
    stretch
    onPress={index => this.setState({ index })}
/>

API (props)

  • titles: (array) => an array of renderables, or arbitrary data if you specify a renderTitle function
  • index: (number) => the index of the selected title
  • stretch: (bool) => whether or not the titles fill in the space inbetween each other
  • onPress: (function(index:number)) => event when a title is tapped, with the index of the title passed in
  • renderTitle: (function(title: any, index:number)) => if specified, this function will be called for each
  • duration: (number) => the length (in ms) of the animation of the bar from one title to the other when it gets selected
  • onTransitionStart: (function) => called when a transition animation starts
  • onTransitionEnd: (function) => called when a transition animation ends
  • barColor: (string) => the color of the highlight bar
  • barPosition: (string) => the position of the highlight bar.
  • underlayColor: (string) => the underlay color of a title block
  • selectedTitleStyle: (object) => the style of the selected title block
  • titleStyle: (object) => the style of a normal (unselected) title block
You can’t perform that action at this time.