React Native Segmented Control
React Native Segmented Control for both iOS, Android and Web
â Installation
npm install rn-segmented-controlyarn 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 ownshadowStylesuse 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