/react-native-segmented-view

Segmented View for React Native (with animation)

Primary LanguageJavaScriptMIT LicenseMIT

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