Skip to content

Commit 7b16cfe

Browse files
committed
Better UX, inside icon is customizable now
1 parent 41f3898 commit 7b16cfe

File tree

3 files changed

+26
-17
lines changed

3 files changed

+26
-17
lines changed

README.md

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
<img alt="React Native Bouncy Checkbox" src="assets/logo.png" width="1050"/>
22

3-
43
[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-bouncy-checkbox)
54

6-
75
[![Fully customizable animated bouncy checkbox for React Native](https://img.shields.io/badge/-Fully%20customizable%20animated%20bouncy%20checkbox%20for%20React%20Native-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-bouncy-checkbox)
86

9-
107
[![npm version](https://img.shields.io/npm/v/react-native-bouncy-checkbox.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-bouncy-checkbox)
118
[![npm](https://img.shields.io/npm/dt/react-native-bouncy-checkbox.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-bouncy-checkbox)
129
![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)
@@ -47,14 +44,14 @@ npm i react-native-bouncy-checkbox
4744
import BouncyCheckbox from "react-native-bouncy-checkbox";
4845
```
4946

50-
# Usage
47+
# Usage
5148

5249
## Basic (Default) Usage
50+
5351
```js
5452
<BouncyCheckbox />
5553
```
5654

57-
5855
## Basic Usage
5956

6057
```jsx
@@ -66,7 +63,6 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
6663
/>
6764
```
6865

69-
7066
## Advanced Custom Usage
7167

7268
```jsx
@@ -86,7 +82,6 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
8682
/>
8783
```
8884

89-
9085
### Configuration - Props
9186

9287
| Property | Type | Default | Description |
@@ -103,7 +98,10 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
10398
| unfillColor | color | transparent | change the checkbox's un-filled color when it's not checked |
10499
| iconComponent | component | Icon | set your own icon component |
105100
| onPress | function | null | set your own onPress functionality after the bounce effect |
106-
101+
| iconSize | number | 15 | change the react-native-vector-icons' size |
102+
| iconName | string | check | change the react-native-vector-icons' name |
103+
| iconType | string | Entypo | change the react-native-vector-icons' type |
104+
| iconColor | string | #fdfdfd | change the react-native-vector-icons' color |
107105

108106
### Future Plans
109107

lib/src/BouncyCheckbox.js

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,11 @@ class BouncyCheckbox extends Component {
3939
fillColor,
4040
borderRadius,
4141
unfillColor,
42-
iconComponent
42+
iconComponent,
43+
iconName,
44+
iconSize,
45+
iconType,
46+
iconColor
4347
} = this.props;
4448
return (
4549
<Animated.View
@@ -57,11 +61,10 @@ class BouncyCheckbox extends Component {
5761
>
5862
{iconComponent || (
5963
<Icon
60-
{...this.props}
61-
name="check"
62-
type="Entypo"
63-
size={15}
64-
color="white"
64+
size={iconSize}
65+
name={iconName}
66+
type={iconType}
67+
color={iconColor}
6568
/>
6669
)}
6770
</Animated.View>
@@ -104,7 +107,11 @@ BouncyCheckbox.propTypes = {
104107
checkboxSize: PropTypes.number,
105108
borderColor: PropTypes.string,
106109
fillColor: PropTypes.string,
107-
unfillColor: PropTypes.string
110+
unfillColor: PropTypes.string,
111+
iconName: PropTypes.string,
112+
iconSize: PropTypes.number,
113+
iconType: PropTypes.string,
114+
iconColor: PropTypes.string
108115
};
109116

110117
BouncyCheckbox.defaultProps = {
@@ -116,7 +123,11 @@ BouncyCheckbox.defaultProps = {
116123
textColor: "#757575",
117124
fillColor: "#ffc484",
118125
borderColor: "#ffc484",
119-
unfillColor: "transparent"
126+
unfillColor: "transparent",
127+
iconName: "check",
128+
iconSize: 15,
129+
iconType: "Entypo",
130+
iconColor: "#fdfdfd"
120131
};
121132

122133
export default BouncyCheckbox;

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-bouncy-checkbox",
3-
"version": "0.0.5",
3+
"version": "0.1.0",
44
"description": "Fully customizable animated bouncy checkbox for React Native",
55
"keywords": [
66
"bouncy",

0 commit comments

Comments
 (0)