A simple and customizable React Native component to have a segmented control
npm install rn-segmented-control!npm
!SegmentedControl
React Native Segmented Control for both iOS, Android and Web 😎
``sh`
npm install rn-segmented-control
`sh`
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 | {} |
> :warning: all View styles or Text Styles passed as props overrides some default styles provided by the package. Make sure you use it properly :)
> :information_source: To apply your own shadowStyles use the tileStyle prop
`tsx
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 (
segments={['Label 1', 'Label 2']}
onChange={(index) => setTabIndex(index)}
currentIndex={tabIndex}
/>
);
}
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