Skip to content

lelandrichardson/react-native-segmented-view

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Segmented View for React Native (with animation)

Resources

License

Stars

Watchers

Forks

Packages

No packages published