[](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.