React Native Animated Segmented Control 🚀
Animated segment control for react native.
Installation
npm install --save react-native-animated-segment-control
yarn add react-native-animated-segment-control
Usage
import SegmentContorl from 'react-native-animated-segment-control';
render() {
return (
<View style={styles.mainContainer}>
<SegmentControl
values={['Segment1', 'Segment2', 'Segment3']}
onChange={(currentIndex) => {}}
disable={false}
selectedIndex={1}
/>
</View>
)
}Properties
| Prop | Type | Description |
|---|---|---|
disable |
Boolean |
Enable / Disable the entire component. Default is false. |
values |
Array(String) |
The labels for the control's segment buttons, in order. |
onChange |
function |
Callback that is called when the user taps a segment. |
selectedIndex |
Number |
Index of the selected segment. |
offsetHeight |
Number |
Active Segment's offset height. |
style |
Styles |
Styles props of segment control. |
segmentControlStyle |
Styles |
Styles props of segment control. |
activeSegmentStyle |
Styles |
Styles props of active segment view. |
selectedTextStyle |
Styles |
Selected Segment's text style. |
unSelectedTextStyle |
Styles |
Unselected Segment's text style. |
License
MIT