https://github.com/lelandrichardson/react-native-segmented-view

Segmented View for React Native (with animation)
https://github.com/lelandrichardson/react-native-segmented-view

Last synced: 3 days ago
JSON representation

Segmented View for React Native (with animation)

• Host: GitHub
• URL: https://github.com/lelandrichardson/react-native-segmented-view
• Owner: lelandrichardson
• License: mit
• Created: 2015-05-08T03:33:57.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2019-05-02T10:32:01.000Z (over 5 years ago)
• Last Synced: 2025-01-03T13:12:33.717Z (10 days ago)
• Language: JavaScript
• Size: 7.81 KB
• Stars: 187
• Watchers: 6
• Forks: 36
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-segmented-view ★159 - Segmented View for React Native (with animation) (Components / UI)
• awesome-reactnative-ui - react-native-segmented-view
• awesome-react-native - react-native-segmented-view ★159 - Segmented View for React Native (with animation) (Components / UI)
• awesome-reactnative-ui - react-native-segmented-view
• awesome-react-native - react-native-segmented-view ★159 - Segmented View for React Native (with animation) (Components / UI)
• awesome-react-native-ui - react-native-segmented-view ★113 - Segmented View for React Native (with animation) (Components / UI)
• awesome-react-native - react-native-segmented-view ★159 - Segmented View for React Native (with animation) (Components / UI)

README

        
# react-native-segmented-view

Segmented View for React Native (with animation)

## Demo

![demo](http://media.giphy.com/media/3oEduLBXWcHSxdN8UE/giphy.gif)

![stretch demo](http://media.giphy.com/media/3oEdv2mvoLWdWmxeik/giphy.gif)

## Example

     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