Installation

Add the dependency:

npm i react-native-segmented-control-2

Peer Dependencies

Zero Dependency 🥳

Usage

Import

import SegmentedControl from "react-native-segmented-control-2";

Fundamental Usage

<SegmentedControl
  tabs={["Label 1", "Label 2", "Label 3"]}
  onChange={(index: number) => console.log("Index: ", index)}
/>

As controlled component:

const [index, setIndex] = useState(0)
return (
  <SegmentedControl
    tabs={["Label 1", "Label 2", "Label 3"]}
    onChange={setIndex}
    value={index}
  />
)

Customized Usage

<SegmentedControl
  style={{ marginTop: 32, backgroundColor: "#ffe0e0" }}
  activeTabColor="#ff2929"
  activeTextColor="#fff"
  tabs={["Label 1", "Label 2", "Label 3"]}
  onChange={(index: number) => 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

Customization (Optionals)

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
• 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, [email protected]

License

React Native Segmented Control 2 is available under the MIT license. See the LICENSE file for more info.