Skip to content

Commit 1e48577

Browse files
kirankalyan5kirankalyan5
committed
fix enabled prop typo
1 parent 815120b commit 1e48577

File tree

1 file changed

+101
-99
lines changed

1 file changed

+101
-99
lines changed

‎README.md

+101-99
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
# react-native-segmented-control-tab(for Android/iOS) 🚀
2+
23
[![npm](https://img.shields.io/npm/v/react-native-segmented-control-tab.svg?style=flat-square "npm version")](https://www.npmjs.com/package/react-native-segmented-control-tab)
34
[![Build Status](https://travis-ci.com/kirankalyan5/react-native-segmented-control-tab.svg?branch=master)](https://travis-ci.com/kirankalyan5/react-native-segmented-control-tab)
4-
[![Monthly Downloads](https://img.shields.io/npm/dm/react-native-segmented-control-tab.svg?style=flat-square )](https://npmjs.org/package/react-native-segmented-control-tab)
5+
[![Monthly Downloads](https://img.shields.io/npm/dm/react-native-segmented-control-tab.svg?style=flat-square)](https://npmjs.org/package/react-native-segmented-control-tab)
56
[![GitHub stars](https://img.shields.io/github/stars/kirankalyan5/react-native-segmented-control-tab.svg?style=flat)](https://npmjs.org/package/react-native-segmented-control-tab)
6-
[ ![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg?style=flat-square )](https://github.com/kirankalyan5/react-native-segmented-control-tab/pulls)
7+
[ ![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg?style=flat-square)](https://github.com/kirankalyan5/react-native-segmented-control-tab/pulls)
78

89
[![NPM](https://nodei.co/npm/react-native-segmented-control-tab.png?compact=true)](https://npmjs.org/package/react-native-segmented-control-tab)
910

10-
1111
A react native component with the same concept of react native's SegmantedControlIOS, Primarily built to support both IOS and Android. 💡
1212

1313
## ScreenShots
@@ -29,117 +29,119 @@ npm install react-native-segmented-control-tab --save
2929
## Usage
3030

3131
### IMPORTANT
32+
3233
This has been made into a controlled component from 3.0. Those who are familiar with 2.0, read below for the updated usage.
3334

3435
```javascript
35-
import SegmentedControlTab from 'react-native-segmented-control-tab'
36+
import SegmentedControlTab from "react-native-segmented-control-tab";
3637

3738
class ConsumerComponent extends Component {
38-
39-
constructor(){
40-
super()
41-
this.state = {
42-
selectedIndex: 0,
43-
};
44-
}
45-
46-
handleIndexChange = (index) => {
47-
this.setState({
48-
...this.state,
49-
selectedIndex: index,
50-
});
51-
}
52-
53-
render() {
54-
return (
55-
<View>
56-
<SegmentedControlTab
57-
values={['First', 'Second', 'Third']}
58-
selectedIndex={this.state.selectedIndex}
59-
onTabPress={this.handleIndexChange}
60-
/>
61-
</View>
62-
);
63-
}
39+
constructor() {
40+
super();
41+
this.state = {
42+
selectedIndex: 0
43+
};
44+
}
45+
46+
handleIndexChange = index => {
47+
this.setState({
48+
...this.state,
49+
selectedIndex: index
50+
});
51+
};
52+
53+
render() {
54+
return (
55+
<View>
56+
<SegmentedControlTab
57+
values={["First", "Second", "Third"]}
58+
selectedIndex={this.state.selectedIndex}
59+
onTabPress={this.handleIndexChange}
60+
/>
61+
</View>
62+
);
63+
}
6464
}
6565
```
66+
6667
## Props
67-
Name | Description | Default | Type
68-
------|-------------|----------|-----------
69-
values | titles of tabs | `['One', 'Two', 'Three']` | array
70-
selectedIndex | index of tab item to be selected initially| [0] | number
71-
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)
72-
enable | Boolean to enable or disable the component | true | bool
73-
multiple | Boolean which enables the multiple selection option | false | bool
74-
borderRadius | borderRadius of whole tab | 5 | number
75-
tabsContainerStyle | external styles can be passed to override the default styles of the segmentedControl wrapper| base styles added in SegmentedControlTab.js | object(styles)
76-
tabsContainerDisableStyle | Custom style that can be passed when `enable` is set to false | default style `opacity: 0.6` | object(styles)
77-
tabStyle | external styles can be passed to override the default styles of the tabs| base styles added in SegmentedControlTab.js | object(styles)
78-
tabTextStyle | external styles can be passed to override the default styles of the tab title| base styles added in SegmentedControlTab.js | object(styles)
79-
activeTabStyle | external styles can be passed to override the default styles of the active tab| base styles added in SegmentedControlTab.js | object(styles)
80-
activeTabTextStyle | external styles can be passed to override the default styles of the active tab text| base styles added in SegmentedControlTab.js | object(styles)
81-
badges | badges values to display | `[1, 2, 3]` | array
82-
tabBadgeContainerStyle | external style can be passed to override the default style of the badge container | base styles added in SegmentedControlTab.js | object(styles)
83-
activeTabBadgeContainerStyle | external style can be passed to override the default style of the active badge container | base styles added in SegmentedControlTab.js | object(styles)
84-
tabBadgeStyle | external style can be passed to override the default style of the badge text | base styles added in SegmentedControlTab.js | object(styles)
85-
activeTabBadgeStyle | external style can be passed to override the default style of the active badge text | base styles added in SegmentedControlTab.js | object(styles)
86-
onTabPress | call-back function when a tab is selected | () => {} | func
87-
allowFontScaling | whether the segment & badge text should allow font scaling (default matches React Native default) | true | bool
88-
accessible | enables accessibility for each tab | true | bool
89-
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
90-
activeTabOpacity | Opacity value to customize tab press | 1 | number
9168

69+
| Name | Description | Default | Type |
70+
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ------------------------- |
71+
| values | titles of tabs | `['One', 'Two', 'Three']` | array |
72+
| selectedIndex | index of tab item to be selected initially | [0] | number |
73+
| 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) |
74+
| enabled | Boolean to enable or disable the component | true | bool |
75+
| multiple | Boolean which enables the multiple selection option | false | bool |
76+
| borderRadius | borderRadius of whole tab | 5 | number |
77+
| tabsContainerStyle | external styles can be passed to override the default styles of the segmentedControl wrapper | base styles added in SegmentedControlTab.js | object(styles) |
78+
| tabsContainerDisableStyle | Custom style that can be passed when `enable` is set to false | default style `opacity: 0.6` | object(styles) |
79+
| tabStyle | external styles can be passed to override the default styles of the tabs | base styles added in SegmentedControlTab.js | object(styles) |
80+
| tabTextStyle | external styles can be passed to override the default styles of the tab title | base styles added in SegmentedControlTab.js | object(styles) |
81+
| activeTabStyle | external styles can be passed to override the default styles of the active tab | base styles added in SegmentedControlTab.js | object(styles) |
82+
| activeTabTextStyle | external styles can be passed to override the default styles of the active tab text | base styles added in SegmentedControlTab.js | object(styles) |
83+
| badges | badges values to display | `[1, 2, 3]` | array |
84+
| tabBadgeContainerStyle | external style can be passed to override the default style of the badge container | base styles added in SegmentedControlTab.js | object(styles) |
85+
| activeTabBadgeContainerStyle | external style can be passed to override the default style of the active badge container | base styles added in SegmentedControlTab.js | object(styles) |
86+
| tabBadgeStyle | external style can be passed to override the default style of the badge text | base styles added in SegmentedControlTab.js | object(styles) |
87+
| activeTabBadgeStyle | external style can be passed to override the default style of the active badge text | base styles added in SegmentedControlTab.js | object(styles) |
88+
| onTabPress | call-back function when a tab is selected | () => {} | func |
89+
| allowFontScaling | whether the segment & badge text should allow font scaling (default matches React Native default) | true | bool |
90+
| accessible | enables accessibility for each tab | true | bool |
91+
| 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 |
92+
| activeTabOpacity | Opacity value to customize tab press | 1 | number |
9293

9394
## Custom styling
94-
```javascript
95-
<SegmentedControlTab tabsContainerStyle={styles.tabsContainerStyle}
96-
tabStyle={styles.tabStyle}
97-
tabTextStyle={styles.tabTextStyle}
98-
activeTabStyle={styles.activeTabStyle}
99-
activeTabTextStyle={styles.activeTabTextStyle}
100-
selectedIndex={1}
101-
allowFontScaling={false}
102-
values={['First', 'Second', 'Third']}
103-
onPress= {index => this.setState({selected:index})}
104-
/>
105-
106-
const styles = StyleSheet.create({
107-
tabsContainerStyle: {
108-
//custom styles
109-
},
110-
tabStyle: {
111-
//custom styles
112-
},
113-
tabTextStyle: {
114-
//custom styles
115-
},
116-
activeTabStyle: {
117-
//custom styles
118-
},
119-
activeTabTextStyle: {
120-
//custom styles
121-
},
122-
tabBadgeContainerStyle: {
123-
//custom styles
124-
},
125-
activeTabBadgeContainerStyle: {
126-
//custom styles
127-
},
128-
tabBadgeStyle: {
129-
//custom styles
130-
},
131-
activeTabBadgeStyle: {
132-
//custom styles
133-
}
134-
135-
})
136-
137-
```
95+
96+
```javascript
97+
<SegmentedControlTab
98+
tabsContainerStyle={styles.tabsContainerStyle}
99+
tabStyle={styles.tabStyle}
100+
tabTextStyle={styles.tabTextStyle}
101+
activeTabStyle={styles.activeTabStyle}
102+
activeTabTextStyle={styles.activeTabTextStyle}
103+
selectedIndex={1}
104+
allowFontScaling={false}
105+
values={["First", "Second", "Third"]}
106+
onPress={index => this.setState({ selected: index })}
107+
/>;
108+
109+
const styles = StyleSheet.create({
110+
tabsContainerStyle: {
111+
//custom styles
112+
},
113+
tabStyle: {
114+
//custom styles
115+
},
116+
tabTextStyle: {
117+
//custom styles
118+
},
119+
activeTabStyle: {
120+
//custom styles
121+
},
122+
activeTabTextStyle: {
123+
//custom styles
124+
},
125+
tabBadgeContainerStyle: {
126+
//custom styles
127+
},
128+
activeTabBadgeContainerStyle: {
129+
//custom styles
130+
},
131+
tabBadgeStyle: {
132+
//custom styles
133+
},
134+
activeTabBadgeStyle: {
135+
//custom styles
136+
}
137+
});
138+
```
138139

139140
## P.S.
141+
140142
🙏 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.😊
141143
If you have any idea in implementing this further, let me know or you can update it and raise a PR.😊🚀
142144

143145
## License
144-
*MIT*
145146

147+
_MIT_

0 commit comments

Comments
 (0)