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	Default	Description
disable	Boolean	false	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	0	Index of the selected segment.
offsetHeight	Number	3	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