Skip to content

Commit abad11a

Browse files
WrathChaosWrathChaos
committed
new: textContainerStyle prop is available for more customization possible
1 parent 8d476f9 commit abad11a

File tree

3 files changed

+33
-30
lines changed

3 files changed

+33
-30
lines changed

‎README.md‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@
2727

2828
Add the dependency:
2929

30+
<b>Zero Dependency</b>
31+
3032
### React Native
3133

3234
```ruby
@@ -73,25 +75,26 @@ import BouncyCheckbox from "react-native-bouncy-checkbox";
7375

7476
### Configuration - Props
7577

76-
| Property | Type | Default | Description |
77-
| -------------------- | :-------: | :------------: | ----------------------------------------------------------------------------------|
78-
| text | string | undefined | set the checkbox's text |
79-
| onPress | function | null | set your own onPress functionality after the bounce effect, callback receives the next `isChecked` boolean if disableBuiltInState is false |
80-
| disableText | boolean | false | if you want to use checkbox without text, you can enable it |
81-
| size | number | 25 | size of `width` and `height` of the checkbox |
82-
| style | style | default | set/override the container style |
83-
| textStyle | style | default | set/override the text style |
84-
| iconStyle | style | default | set/override the icon style |
85-
| isChecked | boolean | false | set the default checkbox value |
86-
| fillColor | color | #f09f48 | change the checkbox's filled color |
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-
| iconComponent | component | Icon | set your own icon component |
90-
| checkIconImageSource | image | default | set your own check icon image |
91-
| ImageComponent | component | Image | set your own Image component instead of RN's default Image |
92-
| bounceEffect | number | 1 | change the bounce effect |
93-
| bounceFriction | number | 3 | change the bounce friction |
94-
| disableBuiltInState | boolean | false | if you want to manually handle the `isChecked` prop and disable built in handling |
78+
| Property | Type | Default | Description |
79+
| -------------------- | :-------: | :---------: | ------------------------------------------------------------------------------------------------------------------------------------------ |
80+
| text | string | undefined | set the checkbox's text |
81+
| onPress | function | null | set your own onPress functionality after the bounce effect, callback receives the next `isChecked` boolean if disableBuiltInState is false |
82+
| disableText | boolean | false | if you want to use checkbox without text, you can enable it |
83+
| size | number | 25 | size of `width` and `height` of the checkbox |
84+
| style | style | default | set/override the container style |
85+
| textStyle | style | default | set/override the text style |
86+
| iconStyle | style | default | set/override the icon style |
87+
| isChecked | boolean | false | set the default checkbox value |
88+
| fillColor | color | #f09f48 | change the checkbox's filled color |
89+
| unfillColor | color | transparent | change the checkbox's un-filled color when it's not checked |
90+
| useNativeDriver | boolean | true | enable/disable the useNativeDriver for animation |
91+
| iconComponent | component | Icon | set your own icon component |
92+
| checkIconImageSource | image | default | set your own check icon image |
93+
| ImageComponent | component | Image | set your own Image component instead of RN's default Image |
94+
| bounceEffect | number | 1 | change the bounce effect |
95+
| bounceFriction | number | 3 | change the bounce friction |
96+
| disableBuiltInState | boolean | false | if you want to manually handle the `isChecked` prop and disable built in handling |
97+
| textContainerStyle | ViewStyle | default | set/override the text container style |
9598

9699
## Synthetic Press Functionality with Manual Check State
97100

@@ -150,9 +153,7 @@ const App = () => {
150153
isChecked={checkboxState}
151154
text="Synthetic Checkbox"
152155
disableBuiltInState
153-
onPress={() =>
154-
setCheckboxState(!checkboxState)
155-
}
156+
onPress={() => setCheckboxState(!checkboxState)}
156157
/>
157158
<RNBounceable
158159
style={{

‎lib/BouncyCheckbox.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import {
55
Image,
66
Easing,
77
Animated,
8+
StyleProp,
9+
ViewStyle,
810
TouchableOpacity,
911
TouchableOpacityProps,
1012
} from "react-native";
1113
import styles, { _textStyle, _iconContainer } from "./BouncyCheckbox.style";
1214

13-
export interface ISource {
14-
source: string | { uri: string };
15-
}
15+
type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
1616

1717
export interface IBouncyCheckboxProps extends TouchableOpacityProps {
1818
style?: any;
@@ -31,7 +31,8 @@ export interface IBouncyCheckboxProps extends TouchableOpacityProps {
3131
bounceFriction?: number;
3232
useNativeDriver?: boolean;
3333
disableBuiltInState?: boolean;
34-
checkIconImageSource?: ISource;
34+
checkIconImageSource?: Image;
35+
textContainerStyle?: CustomStyleProp;
3536
onPress: (isChecked?: boolean) => void;
3637
}
3738

@@ -121,16 +122,17 @@ class BouncyCheckbox extends React.Component<IBouncyCheckboxProps, IState> {
121122

122123
renderCheckboxText = () => {
123124
const {
124-
textStyle,
125125
text,
126-
disableBuiltInState,
127126
isChecked,
127+
textStyle,
128+
textContainerStyle,
129+
disableBuiltInState,
128130
disableText = false,
129131
} = this.props;
130132
const { checked } = this.state;
131133
return (
132134
!disableText && (
133-
<View style={styles.textContainer}>
135+
<View style={[styles.textContainer, textContainerStyle]}>
134136
<Text
135137
style={[
136138
_textStyle(disableBuiltInState ? isChecked! : checked),

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

0 commit comments

Comments
 (0)