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.

:desktop_computer: Web

: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