https://github.com/wrathchaos/react-native-segmented-control-2
🚀 React Native Segmented Control, Pure Javascript for iOS and Android
https://github.com/wrathchaos/react-native-segmented-control-2
android app-dev app-development apple application development freakycoder google ios javascript kuray mobile react react-native reactjs segment segmented-control typescript
Last synced: about 2 months ago
JSON representation
🚀 React Native Segmented Control, Pure Javascript for iOS and Android
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-segmented-control-2
- Owner: WrathChaos
- Created: 2022-06-05T14:18:21.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-09-08T14:49:19.000Z (2 months ago)
- Last Synced: 2025-09-08T15:19:13.890Z (2 months ago)
- Topics: android, app-dev, app-development, apple, application, development, freakycoder, google, ios, javascript, kuray, mobile, react, react-native, reactjs, segment, segmented-control, typescript
- Language: TypeScript
- Homepage: https://freakycoder.com
- Size: 5.61 MB
- Stars: 52
- Watchers: 2
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-segmented-control-2)
[](https://www.npmjs.com/package/react-native-segmented-control-2)
[](https://www.npmjs.com/package/react-native-segmented-control-2)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
# Installation
Add the dependency:
```bash
npm i react-native-segmented-control-2
```
## Peer Dependencies
Zero Dependency 🥳
# Usage
## Import
```jsx
import SegmentedControl from "react-native-segmented-control-2";
```
## Fundamental Usage
```jsx
console.log("Index: ", index)}
/>
```
As controlled component:
```jsx
const [index, setIndex] = useState(0)
return (
)
```
## Customized Usage
```jsx
console.log("Index: ", index)}
/>
```
### Any Component Usage
You can use the segmented control with any component.
All you need to do is that put any component into the `tabs` props.
Please check out the `example` for its usage
## Example Project 😍
You can checkout the example project 🥰
Simply run
- `npm i`
- `react-native run-ios/android`
should work of the example project.
# Configuration - Props
## Fundamentals
| Property | Type | Default | Description |
| -------- | :------: | :-------: | ---------------------------------------------------- |
| tabs | any[] | undefined | set the array for tabs |
| onChange | function | undefined | set your own logic when the tab is pressed / changed |
| value | number | undefined | value of index if used as a controlled component |
## Customization (Optionals)
| Property | Type | Default | Description |
|------------------|:---------:|:-------:|------------------------------------------------------------|
| style | ViewStyle | default | set or override the style object for the main container |
| initialIndex | number | 0 | set the initial index |
| activeTextColor | string | #000 | change the active tab's text color |
| activeTabColor | string | #FFF | change the active tab's color |
| gap | number | 0 | set extra spacing for animation horizontal value |
| tabStyle | ViewStyle | default | set or override the style object for the tab |
| selectedTabStyle | ViewStyle | default | set or override the style object for the selected tab |
| activeTextStyle | TextStyle | default | set or override the style object for the active tab's text |
| textStyle | TextStyle | default | set or override the style object for tab's text |
## Future Plans
- [x] ~~LICENSE~~
- [x] ~~Controller component support~~ (Thanks to @madox2 (https://github.com/WrathChaos/react-native-segmented-control-2/pull/6))
- [x] ~~Getting rid of screen width and manual width dependencies~~ (Thanks to @philo23 (https://github.com/WrathChaos/react-native-segmented-control-2/pull/7)
- [ ] Write an article about the lib on Medium
## Credits
Heavily inspired by these libraries:
- [react-native-segmented-control/segmented-control](https://github.com/react-native-segmented-control/segmented-control)
- [Karthik-B-06/react-native-segmented-control](https://github.com/Karthik-B-06/react-native-segmented-control)
I created this library because they're really not maintain actively and this is a pure javascript written library with a lot of customizations and better code structure
## Author
FreakyCoder, kurayogun@gmail.com
## License
React Native Segmented Control 2 is available under the MIT license. See the LICENSE file for more info.