rinordreshaj / react-native-animated-segment-control Goto Github PK

View Code? Open in Web Editor NEW

Animated Segment Control for React Native (iOS and Android)

JavaScript 54.65% Java 8.51% Objective-C 24.54% Starlark 12.30%

react-native-animated-segment-control's Introduction

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.