React Native Segmented Control

![npm](https://badgen.net/badge/license/MIT/blue) [![npm](https://badgen.net/npm/dt/rn-segmented-control)](https://www.npmjs.com/package/rn-segmented-control) [![npm](https://badgen.net/npm/v/rn-segmented-control)](https://www.npmjs.com/package/rn-segmented-control) [![](https://badgen.net/npm/types/tslib)](https://badgen.net/npm/types/tslib) ![SegmentedControl](https://user-images.githubusercontent.com/35562287/149650171-3cd9c972-6cf5-4aef-989f-199820d5b0e6.gif) React Native Segmented Control for both iOS, Android and Web 😎

:anchor: Installation

npm install rn-segmented-control

yarn add rn-segmented-control

:arrows_counterclockwise: Dependencies

Make sure you have React Native Reanimated and React Native Gesture Handler installed and configured.

:wrench: Props

Name	Description	Required	Type	Default
segments	An array of labels for segments	YES	Array	[]
currentIndex	Index for the currently active segment	YES	Number	0
onChange	A callback Function with pressed segment index	YES	Function	() => {}
badgeValues	An array of badge value for segments.	NO	Array	[]
isRTL	Controls the toggle animation direction	NO	Boolean	false
containerMargin	The value used to determine the width	NO	Number	16
activeTextStyle	active text styles	NO	TextStyle	{}
inactiveTextStyle	inactive text styles.	NO	TextStyle	{}
segmentedControlWrapper	Style object for the Segmented Control.	NO	ViewStyle	{}
pressableWrapper	Style object for the Pressable Container	NO	ViewStyle	{}
tileStyle	Style object for the Absolute positioned tile	NO	ViewStyle	{}
activeBadgeStyle	Active Badge Style	NO	ViewStyle	{}
inactiveBadgeStyle	Inactive Badge Style	NO	ViewStyle	{}
badgeTextStyle	Badge text styles	NO	TextStyle	{}

:warning: all View styles or Text Styles passed as props overrides some default styles provided by the package. Make sure you use it properly :)

:information_source: To apply your own shadowStyles use the tileStyle prop

:mag: Usage

import SegmentedControl from 'rn-segmented-control';

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import SegmentedControl from './SegmentedControl';

export default function App() {
  const [tabIndex, setTabIndex] = React.useState(0);

  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <SegmentedControl
          containerMargin={16}
          segments={['Label 1', 'Label 2']}
          onChange={(index) => setTabIndex(index)}
          currentIndex={tabIndex}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  box: {
    marginHorizontal: 16,
    marginVertical: 16,
  },
});

Working Examples

Check the expo example app here.

:iphone: iOS and Android working Example.

SegmentedControl

:desktop_computer: Web

DesktopExample

:v: Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

:man: Author

Karthik B

:clipboard: License

MIT

Karthik-B-06 / react-native-segmented-control

readme