Skip to content

Commit a47fabd

Browse files
WrathChaosWrathChaos
committed
Version 2/
1 parent 5c69dfd commit a47fabd

File tree

5 files changed

+6483
-6048
lines changed

5 files changed

+6483
-6048
lines changed

‎example/App.tsx‎

Lines changed: 74 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from "react";
2-
import { View, Image, StatusBar, SafeAreaView } from "react-native";
2+
import { View, StatusBar, SafeAreaView } from "react-native";
33
import AppleHeader from "react-native-apple-header";
44
import BottomSearchBar from "react-native-bottom-search-bar";
5-
import BouncyCheckbox from "react-native-bouncy-checkbox";
5+
import BouncyCheckbox from "./lib/BouncyCheckbox";
66

77
const App = () => {
88
return (
@@ -11,48 +11,78 @@ const App = () => {
1111
<SafeAreaView style={{ flex: 1 }}>
1212
<AppleHeader />
1313
<View style={{ margin: 16 }}>
14-
<BouncyCheckbox
15-
borderColor="red"
16-
borderWidth={2}
17-
borderRadius={5}
18-
fillColor="red"
19-
unfillColor="#FFFFFF"
20-
// iconComponent={<IconDog color={"red"} width={12} strokeWidth={3} />}
21-
textColor="#333"
22-
size={25}
23-
disableTextDecoration={true}
24-
fontSize={16}
25-
text="asdasd"
26-
/>
27-
<BouncyCheckbox
28-
isChecked={false}
29-
disabled
30-
textColor="#000"
31-
unfillColor="white"
32-
borderRadius={10}
33-
// iconComponent={
34-
// <Image
35-
// style={{ height: 10, width: 10 }}
36-
// source={require("./assets/checkmark.png")}
37-
// />
38-
// }
39-
text="Custom Icon Example"
40-
/>
41-
<BouncyCheckbox
42-
onPress={(checked) => {
43-
alert(checked);
44-
}}
45-
/>
46-
<BouncyCheckbox text="Get groceries" />
47-
<BouncyCheckbox isChecked text="Pay the bills" />
48-
<BouncyCheckbox text="Take out of the trash 💩" />
49-
<BouncyCheckbox text="Buy tickets for concert 🎉 🎊" />
50-
<BouncyCheckbox
51-
isChecked
52-
disableTextDecoration
53-
text="Try new gym routine"
54-
/>
55-
<BouncyCheckbox isChecked text="Do a load of laundry" />
14+
<View style={{ margin: 8 }}>
15+
<BouncyCheckbox isChecked disableText onPress={() => {}} />
16+
</View>
17+
<View style={{ margin: 8 }}>
18+
<BouncyCheckbox
19+
size={25}
20+
fillColor="red"
21+
iconStyle={{ borderColor: "red" }}
22+
unfillColor="#FFFFFF"
23+
text="Custom Checkbox"
24+
onPress={(isChecked: boolean) => {}}
25+
/>
26+
</View>
27+
<View style={{ margin: 8 }}>
28+
<BouncyCheckbox
29+
disabled
30+
isChecked={false}
31+
iconStyle={{ borderColor: "blue", borderRadius: 10 }}
32+
unfillColor="white"
33+
borderRadius={10}
34+
text="Custom Disabled Checkbox Example"
35+
onPress={(isChecked: boolean) => {}}
36+
/>
37+
</View>
38+
<View style={{ margin: 8 }}>
39+
<BouncyCheckbox
40+
text="Call my mom 😇"
41+
onPress={(checked: boolean) => {
42+
alert(checked);
43+
}}
44+
/>
45+
</View>
46+
<View style={{ margin: 8 }}>
47+
<BouncyCheckbox
48+
text="Get groceries"
49+
onPress={(isChecked: boolean) => {}}
50+
/>
51+
</View>
52+
<View style={{ margin: 8 }}>
53+
<BouncyCheckbox
54+
isChecked
55+
text="Pay the bills"
56+
onPress={(isChecked: boolean) => {}}
57+
/>
58+
</View>
59+
<View style={{ margin: 8 }}>
60+
<BouncyCheckbox
61+
text="Take out of the trash 💩"
62+
onPress={(isChecked: boolean) => {}}
63+
/>
64+
</View>
65+
<View style={{ margin: 8 }}>
66+
<BouncyCheckbox
67+
text="Buy tickets for concert 🎉 🎊"
68+
onPress={(isChecked: boolean) => {}}
69+
/>
70+
</View>
71+
<View style={{ margin: 8 }}>
72+
<BouncyCheckbox
73+
isChecked
74+
text="Try new gym routine"
75+
textStyle={{ color: "red", textDecorationLine: "none" }}
76+
onPress={(isChecked: boolean) => {}}
77+
/>
78+
</View>
79+
<View style={{ margin: 8 }}>
80+
<BouncyCheckbox
81+
isChecked
82+
text="Do a load of laundry"
83+
onPress={(isChecked: boolean) => {}}
84+
/>
85+
</View>
5686
</View>
5787
<BottomSearchBar />
5888
</SafeAreaView>

‎example/lib/BouncyCheckbox.style.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { ViewStyle, TextStyle, ImageStyle, StyleSheet } from "react-native";
2+
3+
interface Style {
4+
container: ViewStyle;
5+
textContainer: ViewStyle;
6+
}
7+
8+
export const _iconContainer = (
9+
size: number,
10+
checked: boolean,
11+
fillColor: string,
12+
unfillColor: string,
13+
): ViewStyle => {
14+
return {
15+
width: size,
16+
height: size,
17+
borderWidth: 1,
18+
borderColor: "#ffc484",
19+
borderRadius: size / 2,
20+
alignItems: "center",
21+
justifyContent: "center",
22+
backgroundColor: checked ? fillColor : unfillColor,
23+
};
24+
};
25+
26+
export const _textStyle = (checked: boolean): TextStyle => {
27+
return {
28+
fontSize: 16,
29+
color: "#757575",
30+
textDecorationLine: checked ? "line-through" : "none",
31+
};
32+
};
33+
34+
export const _iconImageStyle = (checked: boolean): ImageStyle => ({
35+
width: 10,
36+
height: 10,
37+
display: checked ? "flex" : "none",
38+
});
39+
40+
export default StyleSheet.create<Style>({
41+
container: {
42+
alignSelf: "baseline",
43+
alignItems: "center",
44+
flexDirection: "row",
45+
},
46+
textContainer: {
47+
marginLeft: 16,
48+
},
49+
});

‎example/lib/BouncyCheckbox.tsx‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import * as React from "react";
2+
import {
3+
Text,
4+
View,
5+
Image,
6+
Easing,
7+
Animated,
8+
TouchableOpacity,
9+
TouchableOpacityProps,
10+
} from "react-native";
11+
import styles, {
12+
_textStyle,
13+
_iconContainer,
14+
_iconImageStyle,
15+
} from "./BouncyCheckbox.style";
16+
17+
export interface ISource {
18+
source: string | { uri: string };
19+
}
20+
21+
export interface IBouncyCheckboxProps extends TouchableOpacityProps {
22+
style?: any;
23+
size?: number;
24+
text?: string;
25+
color?: string;
26+
iconStyle?: any;
27+
textStyle?: any;
28+
fillColor?: string;
29+
iconComponent?: any;
30+
isChecked?: boolean;
31+
unfillColor?: string;
32+
borderColor?: string;
33+
borderWidth?: number;
34+
disableText?: boolean;
35+
borderRadius?: number;
36+
ImageComponent?: any;
37+
iconImageStyle?: any;
38+
bounceEffect?: number;
39+
bounceFriction?: number;
40+
useNativeDriver?: boolean;
41+
checkIconImageSource?: ISource;
42+
onPress: (isChecked: boolean) => void;
43+
}
44+
45+
interface IState {
46+
checked: boolean;
47+
springValue: Animated.Value;
48+
}
49+
50+
const defaultCheckImage = require("./check.png");
51+
52+
class BouncyCheckbox extends React.Component<IBouncyCheckboxProps, IState> {
53+
constructor(props: IBouncyCheckboxProps) {
54+
super(props);
55+
this.state = {
56+
checked: false,
57+
springValue: new Animated.Value(1),
58+
};
59+
}
60+
61+
componentDidMount() {
62+
this.setState({ checked: this.props.isChecked || false });
63+
}
64+
65+
springBounceAnimation = () => {
66+
const {
67+
useNativeDriver = true,
68+
bounceEffect = 1,
69+
bounceFriction = 3,
70+
} = this.props;
71+
const { checked, springValue } = this.state;
72+
this.setState({ checked: !checked }, () => {
73+
springValue.setValue(0.7);
74+
Animated.spring(springValue, {
75+
toValue: bounceEffect,
76+
friction: bounceFriction,
77+
useNativeDriver,
78+
}).start();
79+
this.props.onPress && this.props.onPress(this.state.checked);
80+
});
81+
};
82+
83+
renderCheckIcon = () => {
84+
const { checked, springValue } = this.state;
85+
const {
86+
size = 25,
87+
iconStyle,
88+
iconComponent,
89+
iconImageStyle,
90+
fillColor = "#ffc484",
91+
ImageComponent = Image,
92+
unfillColor = "transparent",
93+
checkIconImageSource = defaultCheckImage,
94+
} = this.props;
95+
return (
96+
<Animated.View
97+
style={[
98+
{ transform: [{ scale: springValue }] },
99+
_iconContainer(size, checked, fillColor, unfillColor),
100+
iconStyle,
101+
]}
102+
>
103+
{iconComponent || (
104+
<ImageComponent
105+
source={checkIconImageSource}
106+
style={[_iconImageStyle(checked), iconImageStyle]}
107+
/>
108+
)}
109+
</Animated.View>
110+
);
111+
};
112+
113+
renderCheckboxText = () => {
114+
const { textStyle, text, disableText = false } = this.props;
115+
return (
116+
!disableText && (
117+
<View style={styles.textContainer}>
118+
<Text style={[_textStyle(this.state.checked), textStyle]}>
119+
{text}
120+
</Text>
121+
</View>
122+
)
123+
);
124+
};
125+
126+
render() {
127+
const { style } = this.props;
128+
return (
129+
<TouchableOpacity
130+
{...this.props}
131+
style={[styles.container, style]}
132+
onPress={this.springBounceAnimation.bind(this, Easing.bounce)}
133+
>
134+
{this.renderCheckIcon()}
135+
{this.renderCheckboxText()}
136+
</TouchableOpacity>
137+
);
138+
}
139+
}
140+
141+
export default BouncyCheckbox;

‎example/lib/check.png‎

675 Bytes
Loading

0 commit comments

Comments
 (0)