: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

: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