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	{}
renderTile	Render a custom tile component	NO	Function	undefined

⚠️ 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

ℹ️ renderTile takes a function with style, transform and width. You can use these to style your custom tile to look the same as the default style (e.g. if you just wanted to change the animation)

🔍 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