Skip to content

Commit 5c5bfca

Browse files
WrathChaosWrathChaos
committed
new: Example is completed with its header, horizontal and vertical examples
1 parent 1a9fe42 commit 5c5bfca

File tree

2 files changed

+160
-16
lines changed

2 files changed

+160
-16
lines changed

‎example/App.tsx‎

Lines changed: 159 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,180 @@
11
import React from "react";
2-
import { SafeAreaView } from "react-native";
2+
import { View, Text, SafeAreaView } from "react-native";
3+
import AppleHeader from "react-native-apple-header";
34
import BouncyCheckboxGroup, {
45
ICheckboxButton,
56
} from "./lib/BouncyCheckboxGroup";
67

8+
const _iconStyle = (borderColor: string) => ({
9+
height: 50,
10+
width: 50,
11+
borderRadius: 25,
12+
borderColor: borderColor,
13+
});
14+
715
const styles = {
8-
container: { flex: 1, alignItems: "center", justifyContent: "center" },
9-
iconStyle: { height: 50, width: 50, borderRadius: 25 },
16+
container: { marginTop: 24 },
17+
verticalStyle: { marginTop: 16 },
18+
textStyle: { textDecorationLine: "none" },
1019
iconImageStyle: { height: 20, width: 20 },
1120
};
1221

1322
const staticData: ICheckboxButton[] = [
1423
{
1524
id: 0,
16-
iconStyle: styles.iconStyle,
25+
fillColor: "#ff7473",
26+
unfillColor: "#fbbfbb",
27+
iconStyle: _iconStyle("#fbbfbb"),
28+
iconImageStyle: styles.iconImageStyle,
29+
},
30+
{
31+
id: 1,
32+
fillColor: "#5567e9",
33+
unfillColor: "#afb5f5",
34+
iconStyle: _iconStyle("#afb5f5"),
35+
iconImageStyle: styles.iconImageStyle,
36+
},
37+
{
38+
id: 2,
39+
fillColor: "#a98ae7",
40+
unfillColor: "#cab6f4",
41+
iconStyle: _iconStyle("#cab6f4"),
42+
iconImageStyle: styles.iconImageStyle,
43+
},
44+
{
45+
id: 3,
46+
fillColor: "#fcb779",
47+
unfillColor: "#ffd1a7",
48+
iconStyle: _iconStyle("#ffd1a7"),
49+
iconImageStyle: styles.iconImageStyle,
50+
},
51+
{
52+
id: 4,
53+
fillColor: "#2be055",
54+
unfillColor: "#cbf2d5",
55+
iconStyle: _iconStyle("#cbf2d5"),
56+
iconImageStyle: styles.iconImageStyle,
57+
},
58+
];
59+
60+
const verticalStaticData: ICheckboxButton[] = [
61+
{
62+
id: 0,
63+
text: "Watermelon",
64+
fillColor: "#ff7473",
65+
unfillColor: "#fbbfbb",
66+
iconStyle: _iconStyle("#fbbfbb"),
67+
textStyle: styles.textStyle,
68+
style: styles.verticalStyle,
69+
iconImageStyle: styles.iconImageStyle,
70+
},
71+
{
72+
id: 1,
73+
text: "Ultramarine Blue",
74+
fillColor: "#5567e9",
75+
unfillColor: "#afb5f5",
76+
iconStyle: _iconStyle("#afb5f5"),
77+
textStyle: styles.textStyle,
78+
style: styles.verticalStyle,
79+
iconImageStyle: styles.iconImageStyle,
80+
},
81+
{
82+
id: 2,
83+
text: "Soft Purple",
84+
fillColor: "#a98ae7",
85+
unfillColor: "#cab6f4",
86+
iconStyle: _iconStyle("#cab6f4"),
87+
textStyle: styles.textStyle,
88+
style: styles.verticalStyle,
89+
iconImageStyle: styles.iconImageStyle,
90+
},
91+
{
92+
id: 3,
93+
text: "Takao",
94+
fillColor: "#fcb779",
95+
unfillColor: "#ffd1a7",
96+
iconStyle: _iconStyle("#ffd1a7"),
97+
textStyle: styles.textStyle,
98+
style: styles.verticalStyle,
99+
iconImageStyle: styles.iconImageStyle,
100+
},
101+
{
102+
id: 4,
103+
text: "Malachite",
104+
fillColor: "#2be055",
105+
unfillColor: "#cbf2d5",
106+
iconStyle: _iconStyle("#cbf2d5"),
107+
textStyle: styles.textStyle,
108+
style: styles.verticalStyle,
17109
iconImageStyle: styles.iconImageStyle,
18110
},
19-
{ id: 1, iconStyle: styles.iconStyle, iconImageStyle: styles.iconImageStyle },
20-
{ id: 2, iconStyle: styles.iconStyle, iconImageStyle: styles.iconImageStyle },
21-
{ id: 3, iconStyle: styles.iconStyle, iconImageStyle: styles.iconImageStyle },
22-
{ id: 4, iconStyle: styles.iconStyle, iconImageStyle: styles.iconImageStyle },
23111
];
24112

25113
const App = () => {
26-
return (
27-
<SafeAreaView style={styles.container}>
28-
<BouncyCheckboxGroup
29-
data={staticData}
30-
onChange={(selectedItem: ICheckboxButton) => {
31-
console.log("SelectedItem: ", JSON.stringify(selectedItem));
114+
const imageSource = {
115+
uri:
116+
"https://images.unsplash.com/photo-1499482125586-91609c0b5fd4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80",
117+
};
118+
119+
const horizontalCheckboxGroupContainer = () => (
120+
<>
121+
<View style={{ marginLeft: 32 }}>
122+
<Text style={{ color: "#a8a8ac", fontWeight: "500", fontSize: 16 }}>
123+
Pick your favorite color
124+
</Text>
125+
</View>
126+
<View
127+
style={{
128+
marginTop: 16,
129+
alignItems: "center",
130+
justifyContent: "center",
32131
}}
33-
/>
34-
</SafeAreaView>
132+
>
133+
<BouncyCheckboxGroup
134+
data={staticData}
135+
onChange={(selectedItem: ICheckboxButton) => {
136+
console.log("SelectedItem: ", JSON.stringify(selectedItem));
137+
}}
138+
/>
139+
</View>
140+
</>
141+
);
142+
143+
const verticalCheckboxGroupContainer = () => (
144+
<>
145+
<View style={{ marginLeft: 32, marginTop: 24 }}>
146+
<Text style={{ color: "#a8a8ac", fontWeight: "500", fontSize: 16 }}>
147+
Pick your favorite color (Horizontal Style)
148+
</Text>
149+
</View>
150+
<View
151+
style={{
152+
marginTop: 16,
153+
marginLeft: 32,
154+
justifyContent: "center",
155+
}}
156+
>
157+
<BouncyCheckboxGroup
158+
data={verticalStaticData}
159+
style={{ flexDirection: "column" }}
160+
onChange={(selectedItem: ICheckboxButton) => {
161+
console.log("SelectedItem: ", JSON.stringify(selectedItem));
162+
}}
163+
/>
164+
</View>
165+
</>
166+
);
167+
168+
return (
169+
<>
170+
<SafeAreaView>
171+
<AppleHeader imageSource={imageSource} />
172+
<View style={styles.container}>
173+
{horizontalCheckboxGroupContainer()}
174+
{verticalCheckboxGroupContainer()}
175+
</View>
176+
</SafeAreaView>
177+
</>
35178
);
36179
};
37180

‎example/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"dependencies": {
1313
"react": "17.0.2",
1414
"react-native": "0.66.0",
15+
"react-native-apple-header": "^0.1.1",
1516
"react-native-bouncy-checkbox": "^2.1.5"
1617
},
1718
"devDependencies": {

0 commit comments

Comments
 (0)