Skip to content

Commit f56e785

Browse files
WrathChaosWrathChaos
authored
Merge pull request #13 from jasurkurbanovinit/master
Additional Props added and README modified
2 parents 8f1f578 + f5a7c73 commit f56e785

File tree

3 files changed

+129
-121
lines changed

3 files changed

+129
-121
lines changed

‎README.md‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -86,24 +86,28 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
8686

8787
| Property | Type | Default | Description |
8888
| --------------------- | :-------: | :------------: | ----------------------------------------------------------- |
89+
| borderWidth | number | 1 | border width of the checkbox |
90+
| borderRadius | number | 20 | border radius of the checkbox |
91+
| borderColor | string | #ffc484 | border color of the checkbox |
92+
| color | string | #757575 | color of the text |
93+
| size | number | 25 | size of `width` and `height` of the checkbox |
94+
| isChecked | boolean | false | set the default checkbox value |
95+
| unfillColor | color | transparent | change the checkbox's un-filled color when it's not checked |
96+
| useNativeDriver | boolean | true | enable/disable the useNativeDriver for animation |
8997
| text | string | Call my mom 😇 | set the checkbox's text |
9098
| textColor | color | #757575 | change the text's color |
9199
| fontFamily | string | default | set your own font family |
92100
| fontSize | number | 16 | change the text's font size |
93-
| isChecked | boolean | false | set the default checkbox value |
94-
| checkboxSize | number | 25 | change the checkbox's size |
95101
| fillColor | color | #f09f48 | change the checkbox's filled color |
96-
| unfillColor | color | transparent | change the checkbox's un-filled color when it's not checked |
97-
| iconComponent | component | Icon | set your own icon component |
102+
| textStyle | object | default | set your own text style |
103+
| textDecoration | boolean | false | enable/disable text decoration for Text |
98104
| onPress | function | null | set your own onPress functionality after the bounce effect |
99105
| iconSize | number | 15 | change the react-native-vector-icons' size |
100106
| iconName | string | check | change the react-native-vector-icons' name |
101107
| iconType | string | Entypo | change the react-native-vector-icons' type |
102108
| iconColor | string | #fdfdfd | change the react-native-vector-icons' color |
103-
| disableTextDecoration | boolean | false | enable/disable text decoration for Text |
104-
| useNativeDriver | boolean | true | enable/disable the useNativeDriver for animation |
105-
| textStyle | style | default | set your own text style |
106-
| iconStyle | style | default | set your own icon style |
109+
| iconComponent | component | Icon | set your own icon component |
110+
| iconStyle | object | default | set your own icon style |
107111

108112
### Future Plans
109113

‎lib/src/BouncyCheckbox.js‎

Lines changed: 89 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,135 @@
1-
import React, { Component } from "react";
2-
import PropTypes from "prop-types";
3-
import { Animated, Easing, Text, TouchableOpacity, View } from "react-native";
4-
import Icon from "react-native-dynamic-vector-icons";
5-
import styles, { _iconContainer, _textStyle } from "./BouncyCheckbox.style";
1+
import React, { Component } from 'react'
2+
import PropTypes from 'prop-types'
3+
import { Animated, Easing, Text, TouchableOpacity, View} from 'react-native'
4+
import Icon from 'react-native-dynamic-vector-icons'
5+
import styles, { _iconContainer, _textStyle } from "./BouncyCheckbox.style"
66

77
class BouncyCheckbox extends Component {
88
constructor(props) {
9-
super(props);
9+
super(props)
1010
this.state = {
1111
checked: false,
12-
springValue: new Animated.Value(1),
13-
};
12+
springValue: new Animated.Value(1)
13+
}
1414
}
1515

1616
componentDidMount() {
17-
this.setState({ checked: this.props.isChecked });
17+
this.setState({ checked: this.props.isChecked })
1818
}
1919

2020
spring = () => {
21-
const { useNativeDriver } = this.props;
22-
const { checked, springValue } = this.state;
21+
const { useNativeDriver } = this.props
22+
const { checked, springValue } = this.state
2323
this.setState({ checked: !checked }, () => {
24-
springValue.setValue(0.7);
24+
springValue.setValue(0.7)
2525
Animated.spring(springValue, {
2626
toValue: 1,
2727
friction: 3,
28-
useNativeDriver,
29-
}).start();
28+
useNativeDriver
29+
}).start()
3030
// Outside of the onPress function
31-
const { onPress } = this.props;
32-
if (onPress) onPress(this.state.checked);
33-
});
34-
};
31+
const { onPress } = this.props
32+
if (onPress) {
33+
onPress(this.state.checked)
34+
}
35+
})
36+
}
3537

3638
renderCheckIcon = () => {
37-
const { checked, springValue } = this.state;
39+
const { checked, springValue } = this.state
3840
const {
41+
size,
42+
fillColor,
43+
unfillColor,
44+
borderWidth,
45+
borderRadius,
46+
borderColor,
3947
iconName,
4048
iconSize,
4149
iconType,
4250
iconColor,
43-
fillColor,
4451
iconStyle,
45-
unfillColor,
46-
iconComponent,
47-
} = this.props;
52+
iconComponent
53+
} = this.props
4854
return (
49-
<Animated.View
50-
style={[ { transform: [{ scale: springValue }] },
51-
_iconContainer(checked, fillColor, unfillColor), iconStyle,
52-
]}
53-
>
54-
{iconComponent || (
55-
<Icon
56-
size={iconSize}
57-
name={iconName}
58-
type={iconType}
59-
color={iconColor}
60-
/>
61-
)}
62-
</Animated.View>
63-
);
64-
};
55+
<Animated.View
56+
style={[
57+
{ transform: [{ scale: springValue }] },
58+
_iconContainer(size, borderWidth, borderRadius, borderColor, checked, fillColor, unfillColor),
59+
iconStyle
60+
]}
61+
>
62+
{iconComponent || <Icon size={iconSize} name={iconName} type={iconType} color={iconColor} />}
63+
</Animated.View>
64+
)
65+
}
6566

6667
render() {
67-
const {
68-
text,
69-
fontSize,
70-
textColor,
71-
textStyle,
72-
fontFamily,
73-
disableTextDecoration,
74-
} = this.props;
75-
68+
const { checked } = this.state
69+
const { text, fontSize, color, textStyle, fontFamily, textDecoration } = this.props
7670
return (
77-
<TouchableOpacity
78-
style={styles.container}
79-
onPress={this.spring.bind(this, Easing.bounce)}
80-
>
81-
{this.renderCheckIcon()}
82-
<View style={styles.textContainer}>
83-
<Text
84-
style={[_textStyle(
85-
this.state.checked,
86-
textColor,
87-
fontFamily,
88-
fontSize,
89-
disableTextDecoration
90-
), textStyle ]}>
91-
{text}
92-
</Text>
93-
</View>
94-
</TouchableOpacity>
95-
);
71+
<TouchableOpacity style={styles.container} onPress={this.spring.bind(this, Easing.bounce)}>
72+
{this.renderCheckIcon()}
73+
<View style={styles.textContainer}>
74+
<Text
75+
style={[_textStyle(
76+
this.state.checked,
77+
color,
78+
fontFamily,
79+
fontSize,
80+
textDecoration,
81+
), textStyle ]}>
82+
{text}
83+
</Text>
84+
85+
</View>
86+
</TouchableOpacity>
87+
)
9688
}
9789
}
9890

91+
9992
BouncyCheckbox.propTypes = {
93+
borderWidth: PropTypes.number,
94+
borderRadius: PropTypes.number,
95+
borderColor: PropTypes.string,
96+
color: PropTypes.string,
97+
size: PropTypes.number,
98+
unfillColor: PropTypes.string,
99+
useNativeDriver: PropTypes.bool,
100100
text: PropTypes.string,
101+
fillColor: PropTypes.string,
102+
fontFamily: PropTypes.string,
103+
textStyle: PropTypes.object,
104+
textDecoration: PropTypes.bool,
101105
isChecked: PropTypes.bool,
106+
onPress: PropTypes.func,
102107
fontSize: PropTypes.number,
103108
iconName: PropTypes.string,
104109
iconType: PropTypes.string,
105110
iconSize: PropTypes.number,
106111
iconColor: PropTypes.string,
107-
textColor: PropTypes.string,
108-
fillColor: PropTypes.string,
109-
fontFamily: PropTypes.string,
110-
unfillColor: PropTypes.string,
111-
useNativeDriver: PropTypes.bool,
112-
disableTextDecoration: PropTypes.bool,
113-
};
112+
iconStyle: PropTypes.object,
113+
iconComponent: PropTypes.element
114+
}
114115

115116
BouncyCheckbox.defaultProps = {
117+
size: 25,
118+
borderWidth: 1,
119+
borderRadius: 20,
120+
borderColor: '#ffc484',
116121
fontSize: 16,
117122
iconSize: 15,
118123
isChecked: false,
119-
iconName: "check",
120-
iconType: "Entypo",
121-
textColor: "#757575",
122-
fillColor: "#ffc484",
123-
iconColor: "#fdfdfd",
124+
iconName: 'check',
125+
iconType: 'Entypo',
126+
color: '#757575',
127+
fillColor: '#ffc484',
128+
iconColor: '#fdfdfd',
124129
useNativeDriver: true,
125-
text: "Call my mom 😇",
126-
unfillColor: "transparent",
127-
disableTextDecoration: false,
128-
};
130+
text: 'Call my mom 😇',
131+
unfillColor: 'transparent',
132+
textDecoration: false
133+
}
129134

130-
export default BouncyCheckbox;
135+
export default BouncyCheckbox

‎lib/src/BouncyCheckbox.style.js‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,36 @@
1-
export const _iconContainer = (checked, fillColor, unfillColor) => {
2-
return {
3-
width: 25,
4-
height: 25,
5-
borderWidth: 1,
6-
borderRadius: 20,
7-
alignItems: "center",
8-
borderColor: "#ffc484",
9-
justifyContent: "center",
10-
backgroundColor: checked ? fillColor : unfillColor,
11-
};
1+
export const _iconContainer = (size, borderWidth, borderRadius, borderColor, checked, fillColor, unfillColor) => {
2+
return {
3+
width: size,
4+
height: size,
5+
borderWidth,
6+
borderRadius,
7+
alignItems: 'center',
8+
justifyContent: 'center',
9+
borderColor,
10+
backgroundColor: checked ? fillColor : unfillColor
11+
};
1212
};
1313

1414
export const _textStyle = (
15-
checked,
16-
textColor,
17-
fontFamily,
18-
fontSize,
19-
disableTextDecoration
20-
) => {
21-
return {
22-
fontSize,
15+
checked,
16+
color,
2317
fontFamily,
24-
color: textColor,
25-
textDecorationLine:
26-
!disableTextDecoration && checked ? "line-through" : "none",
27-
};
18+
fontSize,
19+
textDecoration
20+
) => {
21+
return {
22+
fontSize,
23+
fontFamily,
24+
color ,
25+
textDecorationLine:!textDecoration && checked ? "line-through" : "none",
26+
};
2827
};
2928

3029
export default {
31-
container: {
32-
margin: 8,
33-
alignItems: "center",
34-
flexDirection: "row",
35-
},
36-
textContainer: { marginLeft: 16 },
30+
container: {
31+
margin: 8,
32+
alignItems: "center",
33+
flexDirection: "row",
34+
},
35+
textContainer: { marginLeft: 16 },
3736
};

0 commit comments

Comments
 (0)