react-native-fully-customizable-segmented-control v1.0.1

Installation

Add the dependency:

npm i react-native-fully-customizable-segmented-control

Peer Dependencies

"react": ">= 16.x.x",
"react-native": ">= 0.55.x",

Usage

Import

import {CustomSegmentedControl} from "react-native-fully-customizable-segmented-control";

Fundamental Usage

const [selectedIndex, setSelectedIndex] = useState(0);


<View style={{ padding: 15 }}>
  <CustomSegmentedControl
    segments={["Segment1", "Segment2", "Segment3"]}
    selected={0}
    height={55}
    borderWidth={1}
    borderColor={"#9d9d9d"}
    borderRadius={15}
    selectedSegmentColor={"#0082ff"}
    unselectedSegmentsColor={"#e7e5e5"}
    selectedTextColor={"#fff"}
    unselectedTextColor={"#000"}
    textFontSize={20}
    onChangeSegment={(index) => setSelectedIndex(index)}
  />
  <View style={{ marginTop: 15 }}>
    {selectedIndex == 0 ? (
      <View
        style={{
          width: "100%",
          backgroundColor: "red",
          height: 100,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Text>{selectedIndex}</Text>
      </View>
    ) : selectedIndex == 1 ? (
      <View
        style={{
          width: "100%",
          backgroundColor: "blue",
          height: 100,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Text>{selectedIndex}</Text>
      </View>
    ) : selectedIndex == 2 ? (
      <View
        style={{
          width: "100%",
          backgroundColor: "green",
          height: 100,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Text>{selectedIndex}</Text>
      </View>
    ) : null}
  </View>
</View>

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

Future Plans

• LICENSE
• Animations

Change Log

Change log will be here !

Author

Talha Salt, me@talha.io

License

This library is available under the MIT license. See the LICENSE file for more info.