React Native Segmented Control

React Native Segmented Control for both iOS, Android and Web 😎

⚓ Installation

npm install rn-segmented-control

yarn add rn-segmented-control

🔄 Dependencies

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

🔧 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	{}

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

ℹ️ To apply your own shadowStyles use the tileStyle prop

🔍 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.

📱 iOS and Android working Example.

🖥️ Web

✌️ Contributing

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

👨 Author

Karthik B

📋 License

MIT