Skip to content

Commit 79c831b

Browse files
jasurkurbanovjasurkurbanov
committed
Additional Props added and README modified
1 parent a661f3b commit 79c831b

File tree

3 files changed

+119
-129
lines changed

3 files changed

+119
-129
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: 107 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,153 @@
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, StyleSheet } from 'react-native'
4+
import Icon from 'react-native-dynamic-vector-icons'
65

76
class BouncyCheckbox extends Component {
87
constructor(props) {
9-
super(props);
8+
super(props)
109
this.state = {
1110
checked: false,
12-
springValue: new Animated.Value(1),
13-
};
11+
springValue: new Animated.Value(1)
12+
}
1413
}
1514

1615
componentDidMount() {
17-
this.setState({ checked: this.props.isChecked });
16+
this.setState({ checked: this.props.isChecked })
1817
}
1918

2019
spring = () => {
21-
const { useNativeDriver } = this.props;
22-
const { checked, springValue } = this.state;
20+
const { useNativeDriver } = this.props
21+
const { checked, springValue } = this.state
2322
this.setState({ checked: !checked }, () => {
24-
springValue.setValue(0.7);
23+
springValue.setValue(0.7)
2524
Animated.spring(springValue, {
2625
toValue: 1,
2726
friction: 3,
28-
useNativeDriver,
29-
}).start();
27+
useNativeDriver
28+
}).start()
3029
// Outside of the onPress function
31-
const { onPress } = this.props;
32-
if (onPress) onPress(this.state.checked);
33-
});
34-
};
30+
const { onPress } = this.props
31+
if (onPress) {
32+
onPress(this.state.checked)
33+
}
34+
})
35+
}
3536

3637
renderCheckIcon = () => {
37-
const { checked, springValue } = this.state;
38+
const { checked, springValue } = this.state
3839
const {
40+
size,
41+
fillColor,
42+
unfillColor,
43+
borderWidth,
44+
borderRadius,
45+
borderColor,
3946
iconName,
4047
iconSize,
4148
iconType,
4249
iconColor,
43-
fillColor,
4450
iconStyle,
45-
unfillColor,
46-
iconComponent,
47-
} = this.props;
51+
iconComponent
52+
} = this.props
4853
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-
};
54+
<Animated.View
55+
style={[
56+
{ transform: [{ scale: springValue }] },
57+
{
58+
width: size,
59+
height: size,
60+
borderWidth,
61+
borderRadius,
62+
alignItems: 'center',
63+
justifyContent: 'center',
64+
borderColor,
65+
backgroundColor: checked ? fillColor : unfillColor
66+
},
67+
iconStyle
68+
]}
69+
>
70+
{iconComponent || <Icon size={iconSize} name={iconName} type={iconType} color={iconColor} />}
71+
</Animated.View>
72+
)
73+
}
6574

6675
render() {
67-
const {
68-
text,
69-
fontSize,
70-
textColor,
71-
textStyle,
72-
fontFamily,
73-
disableTextDecoration,
74-
} = this.props;
75-
76+
const { checked } = this.state
77+
const { text, fontSize, color, textStyle, fontFamily, textDecoration } = this.props
7678
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-
);
79+
<TouchableOpacity style={styles.container} onPress={this.spring.bind(this, Easing.bounce)}>
80+
{this.renderCheckIcon()}
81+
<View style={styles.textContainer}>
82+
<Text
83+
style={[
84+
{
85+
fontSize,
86+
fontFamily,
87+
color,
88+
textDecorationLine: !textDecoration && checked ? 'line-through' : 'none'
89+
},
90+
textStyle
91+
]}
92+
>
93+
{text}
94+
</Text>
95+
</View>
96+
</TouchableOpacity>
97+
)
9698
}
9799
}
98100

101+
const styles = StyleSheet.create({
102+
container: {
103+
margin: 8,
104+
alignItems: 'center',
105+
flexDirection: 'row'
106+
},
107+
textContainer: { marginLeft: 16 }
108+
})
109+
99110
BouncyCheckbox.propTypes = {
111+
borderWidth: PropTypes.number,
112+
borderRadius: PropTypes.number,
113+
borderColor: PropTypes.string,
114+
color: PropTypes.string,
115+
size: PropTypes.number,
116+
unfillColor: PropTypes.string,
117+
useNativeDriver: PropTypes.bool,
100118
text: PropTypes.string,
119+
fillColor: PropTypes.string,
120+
fontFamily: PropTypes.string,
121+
textStyle: PropTypes.object,
122+
textDecoration: PropTypes.bool,
101123
isChecked: PropTypes.bool,
124+
onPress: PropTypes.func,
102125
fontSize: PropTypes.number,
103126
iconName: PropTypes.string,
104127
iconType: PropTypes.string,
105128
iconSize: PropTypes.number,
106129
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-
};
130+
iconStyle: PropTypes.object,
131+
iconComponent: PropTypes.element
132+
}
114133

115134
BouncyCheckbox.defaultProps = {
135+
size: 25,
136+
borderWidth: 1,
137+
borderRadius: 20,
138+
borderColor: '#ffc484',
116139
fontSize: 16,
117140
iconSize: 15,
118141
isChecked: false,
119-
iconName: "check",
120-
iconType: "Entypo",
121-
textColor: "#757575",
122-
fillColor: "#ffc484",
123-
iconColor: "#fdfdfd",
142+
iconName: 'check',
143+
iconType: 'Entypo',
144+
color: '#757575',
145+
fillColor: '#ffc484',
146+
iconColor: '#fdfdfd',
124147
useNativeDriver: true,
125-
text: "Call my mom 😇",
126-
unfillColor: "transparent",
127-
disableTextDecoration: false,
128-
};
148+
text: 'Call my mom 😇',
149+
unfillColor: 'transparent',
150+
textDecoration: false
151+
}
129152

130-
export default BouncyCheckbox;
153+
export default BouncyCheckbox

‎lib/src/BouncyCheckbox.style.js‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

0 commit comments

Comments
 (0)