Skip to content

RinorDreshaj/react-native-animated-segment-control

 
 

Repository files navigation

React Native Animated Segmented Control 🚀

Animated segment control for react native.

Demo

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

About

Animated Segment Control for React Native (iOS and Android)

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 54.7%
  • Objective-C 24.5%
  • Starlark 12.3%
  • Java 8.5%