Add the dependency:
npm i react-native-fully-customizable-segmented-control
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
import {CustomSegmentedControl} from "react-native-fully-customizable-segmented-control";
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>
You can checkout the example project ๐ฅฐ
Simply run
npm i
react-native run-ios/android
should work of the example project.
Property | Type | Default | Description |
---|---|---|---|
segments | array | ['first','second','third'] | set segmented control's text array |
selected | number | 0 | set segmented control's default selected value |
height | number | 50 | set segmented control's height |
textFontSize | number | 20 | set segmented control's text font size |
borderWidth | number | 1 | set segmented control's border with(if u dont wanna border u can pass 0 ) |
borderColor | string | "#9d9d9d" | set segmented control's border color |
borderRadius | number | 15 | set segmented control's radius |
selectedSegmentColor | string | "#0082ff" | set selected segment's background color |
unselectedSegmentsColor | string | "#e7e5e5" | set unselected segment's background color |
selectedTextColor | string | "#fff" | set selected segment's text color |
unselectedTextColor | string | "#000" | set unselected segment's text color |
onChangeSegment | function | null | returns when segment change index |
-
LICENSE - Animations
Change log will be here !
Talha Salt, [email protected]
This library is available under the MIT license. See the LICENSE file for more info.