Skip to content

Commit 94b8a64

Browse files
jkdrangeljkdrangel
authored
Merge pull request #40 from tyson90/master
Added text container style props for better customization
2 parents d629ed5 + f874e34 commit 94b8a64

File tree

4 files changed

+78
-66
lines changed

4 files changed

+78
-66
lines changed

‎README.md‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -68,35 +68,37 @@ const options = [
6868
### Props
6969

7070
| Prop | Type | Default | Required | Note |
71-
| ------------------------- | ----------------------- | ----------- | -------- | -------------------------------------------------------------------------------- |
72-
| options | array | null | true | Items array to render. Each item has a label and a value and optionals icons |
73-
| options[].label | string | null | true | Label from each item |
74-
| options[].value | string | null | true | Value from each item |
75-
| options[].customIcon | Jsx element ou Function | null | false | Optional custom icon from each item |
76-
| options[].imageIcon | string | null | false | Source from a image icon form each item. Has the same color then label in render |
77-
| options[].activeColor | string | null | false | Color from each item when is selected |
78-
| initial | number | 0 | true | Item selected in initial render |
79-
| value | number | undefined | false | The switch value (will call onPress) |
80-
| onPress | function | console.log | true | Callback function called after change value. |
81-
| disableValueChangeOnPress | bool | false | false | Disables the onPress call when the value is manually changed |
82-
| fontSize | number | null | false | Font size from labels. If null default fontSize of the app is used. |
83-
| selectedColor | string | '#fff' | false | Color text of the item selected |
84-
| buttonColor | string | '#BCD635' | false | Color bg of the item selected |
85-
| textColor | string | '#000' | false | Color text of the not selecteds items |
86-
| backgroundColor | string | '#ffffff' | false | Color bg of the component |
87-
| borderColor | string | '#c9c9c9' | false | Border Color of the component |
88-
| borderRadius | number | 50 | false | Border Radius of the component |
89-
| hasPadding | bool | false | false | Indicate if item has padding |
90-
| animationDuration | number | 250 | false | Duration of the animation |
91-
| valuePadding | number | 1 | false | Size of padding |
92-
| height | number | 40 | false | Height of component |
93-
| bold | bool | false | false | Indicate if text has fontWeight bold |
94-
| textStyle | object | {} | false | Text style |
95-
| selectedTextStyle | object | {} | false | Selected text style |
96-
| imageStyle | object | {} | false | Image style |
97-
| style | object | {} | false | Container style |
98-
| returnObject | bool | false | false | Indicate if onPress function return an option instead of option.value |
99-
| disabled | bool | false | false | Disables the switch |
71+
| ------------------------- | ----------------------- | ----------- | -------- | -------------------------------------------------------------------------------- |
72+
| options | array | null | true | Items array to render. Each item has a label and a value and optionals icons |
73+
| options[].label | string | null | true | Label from each item |
74+
| options[].value | string | null | true | Value from each item |
75+
| options[].customIcon | Jsx element ou Function | null | false | Optional custom icon from each item |
76+
| options[].imageIcon | string | null | false | Source from a image icon form each item. Has the same color then label in render |
77+
| options[].activeColor | string | null | false | Color from each item when is selected |
78+
| initial | number | 0 | true | Item selected in initial render |
79+
| value | number | undefined | false | The switch value (will call onPress) |
80+
| onPress | function | console.log | true | Callback function called after change value. |
81+
| disableValueChangeOnPress | bool | false | false | Disables the onPress call when the value is manually changed |
82+
| fontSize | number | null | false | Font size from labels. If null default fontSize of the app is used. |
83+
| selectedColor | string | '#fff' | false | Color text of the item selected |
84+
| buttonColor | string | '#BCD635' | false | Color bg of the item selected |
85+
| textColor | string | '#000' | false | Color text of the not selecteds items |
86+
| backgroundColor | string | '#ffffff' | false | Color bg of the component |
87+
| borderColor | string | '#c9c9c9' | false | Border Color of the component |
88+
| borderRadius | number | 50 | false | Border Radius of the component |
89+
| hasPadding | bool | false | false | Indicate if item has padding |
90+
| animationDuration | number | 250 | false | Duration of the animation |
91+
| valuePadding | number | 1 | false | Size of padding |
92+
| height | number | 40 | false | Height of component |
93+
| bold | bool | false | false | Indicate if text has fontWeight bold |
94+
| textStyle | object | {} | false | Text style |
95+
| selectedTextStyle | object | {} | false | Selected text style |
96+
| textContainerStyle | object | {} | false | Style for text (and icon) container (TouchableOpacity) |
97+
| selectedTextContainerStyle | object | {} | false | Style for selected text (and icon) container (TouchableOpacity) |
98+
| imageStyle | object | {} | false | Image style |
99+
| style | object | {} | false | Container style |
100+
| returnObject | bool | false | false | Indicate if onPress function return an option instead of option.value |
101+
| disabled | bool | false | false | Disables the switch |
100102

101103
### Authors
102104

‎index.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ declare module "react-native-switch-selector" {
3434
bold?: boolean;
3535
textStyle?: TextStyle | RegisteredStyle<TextStyle>;
3636
selectedTextStyle?: TextStyle | RegisteredStyle<TextStyle>;
37+
textCStyle?: TextStyle | RegisteredStyle<TextStyle>;
38+
selectedTextContainerStyle?: TextStyle | RegisteredStyle<TextStyle>;
3739
imageStyle?: ImageStyle | RegisteredStyle<ImageStyle>;
3840
style?: ViewStyle | RegisteredStyle<ViewStyle>;
3941
returnObject?: boolean;

‎index.js‎

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,8 @@ export default class SwitchSelector extends Component {
127127
style,
128128
textStyle,
129129
selectedTextStyle,
130+
textContainerStyle,
131+
selectedTextContainerStyle,
130132
imageStyle,
131133
textColor,
132134
selectedColor,
@@ -141,46 +143,50 @@ export default class SwitchSelector extends Component {
141143
disabled
142144
} = this.props;
143145

144-
const options = this.props.options.map((element, index) => (
145-
<TouchableOpacity
146-
key={index}
147-
disabled={disabled}
148-
style={styles.button}
149-
onPress={() => this.toggleItem(index)}
150-
>
151-
{typeof element.customIcon === "function"
152-
? element.customIcon(this.state.selected == index)
153-
: element.customIcon}
154-
{element.imageIcon && (
155-
<Image
156-
source={element.imageIcon}
146+
const options = this.props.options.map((element, index) => {
147+
const is_selected = this.state.selected == index;
148+
149+
return (
150+
<TouchableOpacity
151+
key={index}
152+
disabled={disabled}
153+
style={[styles.button, is_selected ? selectedTextContainerStyle : textContainerStyle]}
154+
onPress={() => this.toggleItem(index)}
155+
>
156+
{typeof element.customIcon === "function"
157+
? element.customIcon(is_selected)
158+
: element.customIcon}
159+
{element.imageIcon && (
160+
<Image
161+
source={element.imageIcon}
162+
style={[
163+
{
164+
height: 30,
165+
width: 30,
166+
tintColor:
167+
is_selected ? selectedColor : textColor
168+
},
169+
imageStyle
170+
]}
171+
/>
172+
)}
173+
<Text
157174
style={[
158175
{
159-
height: 30,
160-
width: 30,
161-
tintColor:
162-
this.state.selected == index ? selectedColor : textColor
176+
fontSize,
177+
fontWeight: bold ? "bold" : "normal",
178+
textAlign: "center",
179+
color: is_selected ? selectedColor : textColor,
180+
backgroundColor: "transparent"
163181
},
164-
imageStyle
182+
is_selected ? selectedTextStyle : textStyle
165183
]}
166-
/>
167-
)}
168-
<Text
169-
style={[
170-
{
171-
fontSize,
172-
fontWeight: bold ? "bold" : "normal",
173-
textAlign: "center",
174-
color: this.state.selected == index ? selectedColor : textColor,
175-
backgroundColor: "transparent"
176-
},
177-
this.state.selected == index ? selectedTextStyle : textStyle
178-
]}
179-
>
180-
{element.label}
181-
</Text>
182-
</TouchableOpacity>
183-
));
184+
>
185+
{element.label}
186+
</Text>
187+
</TouchableOpacity>
188+
)
189+
});
184190

185191
return (
186192
<View style={[{ flexDirection: "row" }, style]}>
@@ -248,6 +254,8 @@ SwitchSelector.defaultProps = {
248254
style: {},
249255
textStyle: {},
250256
selectedTextStyle: {},
257+
textContainerStyle: {},
258+
selectedTextContainerStyle: {},
251259
imageStyle: {},
252260
textColor: "#000000",
253261
selectedColor: "#FFFFFF",

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-switch-selector",
3-
"version": "1.1.14",
3+
"version": "1.1.15",
44
"description": "Switch Selector to React Native.",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)