Need help with react-native-segmented-control-tab?
Click the โ€œchatโ€ button below for chat support from the developer who created it, or find similar developers for support.

About the developer

kirankalyan5
503 Stars 113 Forks MIT License 206 Commits 13 Opened issues

Description

react-native-segmented-control-tab(for Android/iOS)

Services available

!
?

Need anything else?

Contributors list

react-native-segmented-control-tab(for Android/iOS) ๐Ÿš€

npm Build Status Monthly Downloads GitHub stars PRs Welcome

NPM

A react native component with the same concept of react native's SegmantedControlIOS, Primarily built to support both IOS and Android. ๐Ÿ’ก

ScreenShots

Android

Demo

iOS

Demo

Install

npm install react-native-segmented-control-tab --save

Usage

IMPORTANT

This has been made into a controlled component from 3.0. Those who are familiar with 2.0, read below for the updated usage.

import SegmentedControlTab from "react-native-segmented-control-tab";

class ConsumerComponent extends Component { constructor() { super(); this.state = { selectedIndex: 0 }; }

handleIndexChange = index => { this.setState({ ...this.state, selectedIndex: index }); };

render() { return ( ); } }

Props

| Name | Description | Default | Type | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ------------------------- | | values | titles of tabs |

['One', 'Two', 'Three']
| array | | selectedIndex | index of tab item to be selected initially | [0] | number | | selectedIndices | Array of indices of tab items to be selected initially - when multiple prop is true else it will take selectedIndex | [0] | arrayOf(PropTypes.number) | | enabled | Boolean to enable or disable the component | true | bool | | multiple | Boolean which enables the multiple selection option | false | bool | | borderRadius | borderRadius of whole tab | 5 | number | | tabsContainerStyle | external styles can be passed to override the default styles of the segmentedControl wrapper | base styles added in SegmentedControlTab.js | object(styles) | | tabsContainerDisableStyle | Custom style that can be passed when
enable
is set to false | default style
opacity: 0.6
| object(styles) | | tabStyle | external styles can be passed to override the default styles of the tabs | base styles added in SegmentedControlTab.js | object(styles) | | firstTabStyle | external styles can be passed to override the default styles of the first tab | base styles added in SegmentedControlTab.js | object(styles) | | lastTabStyle | external styles can be passed to override the default styles of the last tab | base styles added in SegmentedControlTab.js | object(styles) | | tabTextStyle | external styles can be passed to override the default styles of the tab title | base styles added in SegmentedControlTab.js | object(styles) | | activeTabStyle | external styles can be passed to override the default styles of the active tab | base styles added in SegmentedControlTab.js | object(styles) | | activeTabTextStyle | external styles can be passed to override the default styles of the active tab text | base styles added in SegmentedControlTab.js | object(styles) | | badges | badges values to display |
[1, 2, 3]
| array | | tabBadgeContainerStyle | external style can be passed to override the default style of the badge container | base styles added in SegmentedControlTab.js | object(styles) | | activeTabBadgeContainerStyle | external style can be passed to override the default style of the active badge container | base styles added in SegmentedControlTab.js | object(styles) | | tabBadgeStyle | external style can be passed to override the default style of the badge text | base styles added in SegmentedControlTab.js | object(styles) | | activeTabBadgeStyle | external style can be passed to override the default style of the active badge text | base styles added in SegmentedControlTab.js | object(styles) | | onTabPress | call-back function when a tab is selected | () => {} | func | | allowFontScaling | whether the segment & badge text should allow font scaling (default matches React Native default) | true | bool | | accessible | enables accessibility for each tab | true | bool | | accessibilityLabels | Reads out the given text on each tab press when voice over is enabled. If not set, uses the text passed in as values in props as a fallback | ['Label 1', 'Label 2', 'Label 3'] | array | | activeTabOpacity | Opacity value to customize tab press | 1 | number |

Custom styling

 this.setState({ selected: index })}
/>;

const styles = StyleSheet.create({ tabsContainerStyle: { //custom styles }, tabStyle: { //custom styles }, firstTabStyle: { //custom styles }, lastTabStyle: { //custom styles }, tabTextStyle: { //custom styles }, activeTabStyle: { //custom styles }, activeTabTextStyle: { //custom styles }, tabBadgeContainerStyle: { //custom styles }, activeTabBadgeContainerStyle: { //custom styles }, tabBadgeStyle: { //custom styles }, activeTabBadgeStyle: { //custom styles } });

P.S.

๐Ÿ™ credits to all the other devs who had built the similar concept, had referred some of the their components on the github, to get a fair idea ๐Ÿ’ก to build this.๐Ÿ˜Š If you have any idea in implementing this further, let me know or you can update it and raise a PR.๐Ÿ˜Š๐Ÿš€

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.