Segmented View for React Native (with animation)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib More fixes on references Oct 12, 2016
.gitignore initial commit May 8, 2015
LICENSE Initial commit May 8, 2015
README.md updating readme Jun 12, 2015
index.js initial commit May 8, 2015
package.json v2.0.0 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