SegmentedControl React Native Segmented Control for both iOS, Android and Web ๐
npm install rn-segmented-control
yarn add rn-segmented-control
Make sure you have React Native Reanimated and React Native Gesture Handler installed and configured.
| 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 :)
i๏ธ To apply your own
shadowStylesuse the tileStyle prop
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, }, });
Check the expo example app here.
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT