Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Karthik-B-06/react-native-segmented-control
🎉 React Native Segmented Control 🎮 for both iOS, Android and Web
https://github.com/Karthik-B-06/react-native-segmented-control
react-native segmented-control typescript
Last synced: 3 months ago
JSON representation
🎉 React Native Segmented Control 🎮 for both iOS, Android and Web
- Host: GitHub
- URL: https://github.com/Karthik-B-06/react-native-segmented-control
- Owner: Karthik-B-06
- License: mit
- Created: 2020-07-11T11:03:51.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-30T02:35:18.000Z (almost 2 years ago)
- Last Synced: 2024-03-14T23:06:55.419Z (11 months ago)
- Topics: react-native, segmented-control, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/rn-segmented-control
- Size: 32.5 MB
- Stars: 274
- Watchers: 4
- Forks: 30
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
React Native Segmented Control
[](https://www.npmjs.com/package/rn-segmented-control)
[](https://www.npmjs.com/package/rn-segmented-control)
[](https://badgen.net/npm/types/tslib)
React Native Segmented Control for both iOS, Android and Web 😎
## :anchor: Installation
```sh
npm install rn-segmented-control
```
```sh
yarn add rn-segmented-control
```
## :arrows_counterclockwise: Dependencies
Make sure you have [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs) and [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) installed and configured.
## :wrench: 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 | {} |
> :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
## :mag: Usage
```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 (
setTabIndex(index)}
currentIndex={tabIndex}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
box: {
marginHorizontal: 16,
marginVertical: 16,
},
});
```
### Working Examples
Check the expo example app [here](https://github.com/Karthik-B-06/react-native-segmented-control/tree/main/example).
## :iphone: iOS and Android working Example.
## :desktop_computer: Web
## :v: Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## :man: Author
[Karthik B](https://twitter.com/_iam_karthik)
## :clipboard: License
MIT