Skip to content

Commit 42ac402

Browse files
WrathChaosWrathChaos
committed
README is updated
1 parent fb145ee commit 42ac402

File tree

5 files changed

+132
-111
lines changed

5 files changed

+132
-111
lines changed

‎README.md‎

Lines changed: 29 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,7 @@ Add the dependency:
2727
npm i react-native-bouncy-checkbox
2828
```
2929

30-
## Peer Dependencies
31-
32-
###### IMPORTANT! You need install them.
33-
34-
```
35-
"react": ">= 16.x.x",
36-
"react-native": ">= 0.55.x",
37-
"react-native-vector-icons": ">= 6.6.0",
38-
"react-native-dynamic-vector-icons": ">= 0.2.1"
39-
```
30+
## Zero Dependency!
4031

4132
## Import
4233

@@ -46,7 +37,7 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
4637

4738
# Usage
4839

49-
## Basic (Default) Usage
40+
## Basic Usage
5041

5142
```js
5243
<BouncyCheckbox />
@@ -60,6 +51,7 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
6051
textColor="#000"
6152
fillColor="red"
6253
text="Buy tickets for concert 🎉 🎊"
54+
onPress={(checked) => console.log("Checked: ", checked)}
6355
/>
6456
```
6557

@@ -74,7 +66,7 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
7466
fontFamily="JosefinSans-Regular"
7567
onPress={(checked) => console.log("Checked: ", checked)}
7668
iconComponent={
77-
<Image
69+
<FastImage
7870
style={{ height: 10, width: 10 }}
7971
source={require("./assets/checkmark.png")}
8072
/>
@@ -84,36 +76,35 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
8476

8577
### Configuration - Props
8678

87-
| Property | Type | Default | Description |
88-
| --------------------- | :-------: | :------------: | ----------------------------------------------------------- |
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 |
97-
| text | string | Call my mom 😇 | set the checkbox's text |
98-
| textColor | color | #757575 | change the text's color |
99-
| fontFamily | string | default | set your own font family |
100-
| fontSize | number | 16 | change the text's font size |
101-
| fillColor | color | #f09f48 | change the checkbox's filled color |
102-
| textStyle | object | default | set your own text style |
103-
| textDecoration | boolean | false | enable/disable text decoration for Text |
104-
| onPress | function | null | set your own onPress functionality after the bounce effect |
105-
| iconSize | number | 15 | change the react-native-vector-icons' size |
106-
| iconName | string | check | change the react-native-vector-icons' name |
107-
| iconType | string | Entypo | change the react-native-vector-icons' type |
108-
| iconColor | string | #fdfdfd | change the react-native-vector-icons' color |
109-
| iconComponent | component | Icon | set your own icon component |
110-
| iconStyle | object | default | set your own icon style |
79+
| Property | Type | Default | Description |
80+
| ---------------- | :-------: | :------------: | ----------------------------------------------------------- |
81+
| borderWidth | number | 1 | border width of the checkbox |
82+
| borderRadius | number | 20 | border radius of the checkbox |
83+
| borderColor | string | #ffc484 | border color of the checkbox |
84+
| color | string | #757575 | color of the text |
85+
| size | number | 25 | size of `width` and `height` of the checkbox |
86+
| isChecked | boolean | false | set the default checkbox value |
87+
| unfillColor | color | transparent | change the checkbox's un-filled color when it's not checked |
88+
| useNativeDriver | boolean | true | enable/disable the useNativeDriver for animation |
89+
| text | string | Call my mom 😇 | set the checkbox's text |
90+
| textColor | color | #757575 | change the text's color |
91+
| fontFamily | string | default | set your own font family |
92+
| fontSize | number | 16 | change the text's font size |
93+
| fillColor | color | #f09f48 | change the checkbox's filled color |
94+
| textStyle | object | default | set your own text style |
95+
| textDecoration | boolean | false | enable/disable text decoration for Text |
96+
| onPress | function | null | set your own onPress functionality after the bounce effect |
97+
| iconComponent | component | Icon | set your own icon component |
98+
| iconStyle | object | default | set your own icon style |
99+
| checkImageSource | image | default | set your own check icon image |
100+
| checkImageWidth | number | 10 | change the check icon's width |
101+
| checkImageHeight | number | 10 | change the check icon's height |
102+
| ImageComponent | component | Image | set your own Image component instead of RN's default Image |
111103

112104
### Future Plans
113105

114106
- [x] ~~LICENSE~~
115-
- [ ] Remove item feature
116-
- [ ] Re-sort the list availability feature
107+
- [x] ~~Typescript Challange!~~
117108
- [ ] Write an article about the lib on Medium
118109

119110
## Author

lib/src/BouncyCheckbox.style.ts renamed to lib/BouncyCheckbox.style.ts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ViewStyle, TextStyle, StyleSheet } from "react-native";
1+
import { ViewStyle, TextStyle, ImageStyle, StyleSheet } from "react-native";
22

33
interface Style {
44
container: ViewStyle;
@@ -12,7 +12,7 @@ export const _iconContainer = (
1212
borderColor: string,
1313
checked: boolean,
1414
fillColor: string,
15-
unfillColor: string
15+
unfillColor: string,
1616
): ViewStyle => {
1717
return {
1818
width: size,
@@ -31,7 +31,7 @@ export const _textStyle = (
3131
color: string,
3232
fontFamily: string,
3333
fontSize: number,
34-
textDecoration: string
34+
textDecoration: string,
3535
): TextStyle => {
3636
return {
3737
fontSize,
@@ -41,6 +41,14 @@ export const _textStyle = (
4141
};
4242
};
4343

44+
export const _iconImageStyle = (
45+
checkImageWidth: number,
46+
checkImageHeight: number,
47+
): ImageStyle => ({
48+
width: checkImageWidth,
49+
height: checkImageHeight,
50+
});
51+
4452
export default StyleSheet.create<Style>({
4553
container: {
4654
margin: 8,

lib/src/BouncyCheckbox.tsx renamed to lib/BouncyCheckbox.tsx

Lines changed: 60 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,53 @@
11
import * as React 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";
2+
import {
3+
Animated,
4+
Easing,
5+
Text,
6+
TouchableOpacity,
7+
View,
8+
Image,
9+
} from "react-native";
10+
import styles, {
11+
_textStyle,
12+
_iconContainer,
13+
_iconImageStyle,
14+
} from "./BouncyCheckbox.style";
615

7-
export interface IBouncyCheckboxProps {}
16+
export interface IBouncyCheckboxProps {
17+
size: number;
18+
text: string;
19+
color: string;
20+
iconStyle: any;
21+
textStyle: any;
22+
iconName: string;
23+
iconSize: number;
24+
iconType: string;
25+
fillColor: string;
26+
fontSize: number;
27+
iconColor: string;
28+
fontFamily: string;
29+
iconComponent: any;
30+
isChecked: boolean;
31+
unfillColor: string;
32+
borderColor: string;
33+
borderWidth: number;
34+
borderRadius: number;
35+
ImageComponent: any;
36+
checkImageSource: any;
37+
textDecoration: string;
38+
checkImageWidth: number;
39+
checkImageHeight: number;
40+
useNativeDriver: boolean;
41+
onPress: (isChecked: boolean) => void;
42+
}
843

944
interface IState {
1045
checked: boolean;
1146
springValue: Animated.Value;
1247
}
1348

49+
const defaultCheckImage = require("./check.png");
50+
1451
class BouncyCheckbox extends React.Component<IBouncyCheckboxProps, IState> {
1552
constructor(props: IBouncyCheckboxProps) {
1653
super(props);
@@ -25,7 +62,7 @@ class BouncyCheckbox extends React.Component<IBouncyCheckboxProps, IState> {
2562
}
2663

2764
spring = () => {
28-
const { useNativeDriver } = this.props;
65+
const { useNativeDriver = true } = this.props;
2966
const { checked, springValue } = this.state;
3067
this.setState({ checked: !checked }, () => {
3168
springValue.setValue(0.7);
@@ -34,7 +71,7 @@ class BouncyCheckbox extends React.Component<IBouncyCheckboxProps, IState> {
3471
friction: 3,
3572
useNativeDriver,
3673
}).start();
37-
// Outside of the onPress function
74+
// ? Outside of the onPress function
3875
const { onPress } = this.props;
3976
if (onPress) {
4077
onPress(this.state.checked);
@@ -45,18 +82,18 @@ class BouncyCheckbox extends React.Component<IBouncyCheckboxProps, IState> {
4582
renderCheckIcon = () => {
4683
const { checked, springValue } = this.state;
4784
const {
48-
size,
49-
fillColor,
50-
unfillColor,
51-
borderWidth,
52-
borderRadius,
53-
borderColor,
54-
iconName,
55-
iconSize,
56-
iconType,
57-
iconColor,
85+
size = 25,
5886
iconStyle,
5987
iconComponent,
88+
borderWidth = 1,
89+
borderRadius = 20,
90+
checkImageWidth = 10,
91+
checkImageHeight = 10,
92+
fillColor = "#ffc484",
93+
ImageComponent = Image,
94+
borderColor = "#ffc484",
95+
unfillColor = "transparent",
96+
checkImageSource = defaultCheckImage,
6097
} = this.props;
6198
return (
6299
<Animated.View
@@ -75,11 +112,9 @@ class BouncyCheckbox extends React.Component<IBouncyCheckboxProps, IState> {
75112
]}
76113
>
77114
{iconComponent || (
78-
<Icon
79-
size={iconSize}
80-
name={iconName}
81-
type={iconType}
82-
color={iconColor}
115+
<ImageComponent
116+
source={checkImageSource}
117+
style={_iconImageStyle(checkImageWidth, checkImageHeight)}
83118
/>
84119
)}
85120
</Animated.View>
@@ -88,12 +123,12 @@ class BouncyCheckbox extends React.Component<IBouncyCheckboxProps, IState> {
88123

89124
render() {
90125
const {
91-
text,
92-
fontSize,
93-
color,
94126
textStyle,
95127
fontFamily,
128+
fontSize = 16,
96129
textDecoration,
130+
color = "#757575",
131+
text = "Call my mom 😇",
97132
} = this.props;
98133
return (
99134
<TouchableOpacity
@@ -122,47 +157,4 @@ class BouncyCheckbox extends React.Component<IBouncyCheckboxProps, IState> {
122157
}
123158
}
124159

125-
BouncyCheckbox.propTypes = {
126-
color: PropTypes.string,
127-
size: PropTypes.number,
128-
text: PropTypes.string,
129-
onPress: PropTypes.func,
130-
isChecked: PropTypes.bool,
131-
fontSize: PropTypes.number,
132-
iconName: PropTypes.string,
133-
iconType: PropTypes.string,
134-
iconSize: PropTypes.number,
135-
fillColor: PropTypes.string,
136-
textStyle: PropTypes.object,
137-
iconColor: PropTypes.string,
138-
iconStyle: PropTypes.object,
139-
fontFamily: PropTypes.string,
140-
borderColor: PropTypes.string,
141-
unfillColor: PropTypes.string,
142-
borderWidth: PropTypes.number,
143-
borderRadius: PropTypes.number,
144-
textDecoration: PropTypes.bool,
145-
useNativeDriver: PropTypes.bool,
146-
iconComponent: PropTypes.element,
147-
};
148-
149-
BouncyCheckbox.defaultProps = {
150-
size: 25,
151-
fontSize: 16,
152-
iconSize: 15,
153-
borderWidth: 1,
154-
color: "#757575",
155-
borderRadius: 20,
156-
isChecked: false,
157-
iconName: "check",
158-
iconType: "Entypo",
159-
fillColor: "#ffc484",
160-
iconColor: "#fdfdfd",
161-
useNativeDriver: true,
162-
textDecoration: false,
163-
borderColor: "#ffc484",
164-
text: "Call my mom 😇",
165-
unfillColor: "transparent",
166-
};
167-
168160
export default BouncyCheckbox;

‎lib/check.png‎

675 Bytes
Loading

‎package.json‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-bouncy-checkbox",
3-
"version": "0.2.2",
3+
"version": "1.0.0",
44
"description": "Fully customizable animated bouncy checkbox for React Native",
55
"keywords": [
66
"bouncy",
@@ -21,14 +21,44 @@
2121
],
2222
"homepage": "https://www.freakycoder.com",
2323
"bugs": "https://github.com/WrathChaos/react-native-bouncy-checkbox/issues",
24-
"main": "./lib/src/BouncyCheckbox.js",
24+
"main": "./build/dist/BouncyCheckbox.js",
2525
"repository": "git@github.com:WrathChaos/react-native-bouncy-checkbox.git",
2626
"author": "Kuray (FreakyCoder) <kurayogun@gmail.com>",
2727
"license": "MIT",
28+
"scripts": {
29+
"build": "cd lib && tsc && cp ../package.json ../build/dist/ && Echo Build completed!",
30+
"format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
31+
"lint": "tslint -p tsconfig.json",
32+
"version": "npm run format && git add -A src",
33+
"postversion": "git push && git push --tags"
34+
},
2835
"peerDependencies": {
2936
"react": ">= 16.x.x",
3037
"react-native": ">= 0.55.x",
3138
"react-native-vector-icons": ">= 6.6.0",
3239
"react-native-dynamic-vector-icons": ">= 0.2.1"
40+
},
41+
"devDependencies": {
42+
"@types/react": "^16.9.22",
43+
"@types/react-native": "^0.63.0",
44+
"react-native-typescript-transformer": "^1.2.13",
45+
"typescript": "^3.7.4",
46+
"@react-native-community/eslint-config": "^0.0.5",
47+
"eslint": "^6.8.0",
48+
"eslint-config-airbnb": "^18.2.0",
49+
"husky": "^4.2.5",
50+
"lint-staged": "^10.2.11",
51+
"prettier": "^2.0.5"
52+
},
53+
"husky": {
54+
"hooks": {
55+
"pre-commit": "lint-staged"
56+
}
57+
},
58+
"lint-staged": {
59+
"./src/*.{js,jsx,ts,tsx}": [
60+
"npx prettier --write",
61+
"eslint src/*.js --fix-dry-run"
62+
]
3363
}
3464
}

0 commit comments

Comments
 (0)