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