โ 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
๐ License
MIT