Skip to content

Commit 868e445

Browse files
WrathChaosWrathChaos
committed
feat: new bouncy checkbox fundamental lib is ready
1 parent 947ea6a commit 868e445

File tree

122 files changed

+32195
-5038
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

122 files changed

+32195
-5038
lines changed

‎example/App.tsx‎

Lines changed: 154 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -3,169 +3,160 @@ import {View, Text, StatusBar, SafeAreaView, Pressable} from 'react-native';
33
import AppleHeader from 'react-native-apple-header';
44
import BottomSearchBar from 'react-native-bottom-search-bar';
55
// import BouncyCheckbox from 'react-native-bouncy-checkbox';
6-
import BouncyCheckbox from "./build/dist/BouncyCheckbox";
6+
import BouncyCheckbox from './lib/BouncyCheckbox';
7+
78
export default class App extends React.Component<any, any> {
8-
render() {
9-
return (
10-
<View style={{flex: 1}}>
11-
<StatusBar barStyle="dark-content" />
12-
<SafeAreaView style={{flex: 1}}>
13-
<AppleHeader />
14-
<View style={{margin: 16}}>
15-
<View style={{margin: 8}}>
16-
<BouncyCheckbox
17-
size={25}
18-
fillColor="red"
19-
TouchableComponent={Pressable}
20-
textStyle={{fontFamily: 'JosefinSans-Regular'}}
21-
iconStyle={{borderColor: 'red'}}
22-
disableText={false}
23-
unfillColor="#FFFFFF"
24-
text="Custom Checkbox with Pressable Component"
25-
onPress={(isChecked: boolean) => {}}
26-
/>
27-
</View>
28-
<View style={{margin: 8}}>
29-
<BouncyCheckbox
30-
disabled
31-
isChecked={false}
32-
iconStyle={{borderColor: 'blue', borderRadius: 10}}
33-
textStyle={{fontFamily: 'JosefinSans-Regular'}}
34-
unfillColor="white"
35-
text="Custom Disabled Checkbox Example"
36-
onPress={(isChecked: boolean) => {}}
37-
/>
38-
</View>
39-
<View style={{margin: 8}}>
40-
<BouncyCheckbox
41-
text="Call my mom 😇"
42-
textStyle={{fontFamily: 'JosefinSans-Regular'}}
43-
onPress={(checked: boolean) => {}}
44-
/>
45-
</View>
46-
<View style={{margin: 8}}>
47-
<BouncyCheckbox
48-
isChecked
49-
text="Get groceries"
50-
textStyle={{fontFamily: 'JosefinSans-Regular'}}
51-
onPress={(isChecked: boolean) => {}}
52-
/>
53-
</View>
54-
<View style={{margin: 8}}>
55-
<BouncyCheckbox
56-
isChecked
57-
text="Pay the bills"
58-
textStyle={{fontFamily: 'JosefinSans-Regular'}}
59-
onPress={(isChecked: boolean) => {}}
60-
/>
61-
</View>
62-
<View style={{margin: 8}}>
63-
<BouncyCheckbox
64-
text="Take out of the trash 💩"
65-
textStyle={{fontFamily: 'JosefinSans-Regular'}}
66-
onPress={(isChecked: boolean) => {}}
67-
/>
68-
</View>
69-
<View style={{margin: 8}}>
70-
<BouncyCheckbox
71-
disableText={false}
72-
text="Buy tickets for concert 🎉 🎊"
73-
textStyle={{fontFamily: 'JosefinSans-Regular'}}
74-
onPress={(isChecked: boolean) => {}}
75-
/>
76-
</View>
77-
<View style={{margin: 8}}>
78-
<BouncyCheckbox
79-
isChecked
80-
text="Try new gym routine"
81-
textStyle={{
82-
fontFamily: 'JosefinSans-Regular',
83-
color: 'red',
84-
textDecorationLine: 'none',
85-
}}
86-
onPress={(isChecked: boolean) => {}}
87-
/>
88-
</View>
89-
<View style={{margin: 8}}>
90-
<BouncyCheckbox
91-
isChecked
92-
text="Do a load of laundry"
93-
textStyle={{fontFamily: 'JosefinSans-Regular'}}
94-
onPress={(isChecked: boolean) => {}}
95-
/>
96-
</View>
97-
</View>
98-
<View
99-
style={{
100-
marginTop: 16,
101-
}}>
102-
<Text
103-
style={{
104-
marginLeft: 24,
105-
fontSize: 24,
106-
fontWeight: '700',
107-
fontFamily: 'JosefinSans-Regular',
108-
}}>
109-
Checkbox Only
110-
</Text>
111-
<View
112-
style={{
113-
marginTop: 16,
114-
width: '100%',
115-
flexDirection: 'row',
116-
justifyContent: 'space-evenly',
117-
}}>
118-
<BouncyCheckbox
119-
size={50}
120-
isChecked
121-
iconImageStyle={{width: 18, height: 18}}
122-
disableText
123-
onPress={() => {}}
124-
/>
125-
<BouncyCheckbox
126-
disableText
127-
fillColor="#f54b42"
128-
size={50}
129-
iconImageStyle={{width: 18, height: 18}}
130-
iconStyle={{borderColor: '#f54b42'}}
131-
onPress={() => {}}
132-
/>
133-
<BouncyCheckbox
134-
isChecked
135-
disableText
136-
fillColor="#4287f5"
137-
size={50}
138-
iconImageStyle={{width: 18, height: 18}}
139-
iconStyle={{borderColor: '#4287f5'}}
140-
onPress={() => {}}
141-
/>
142-
<BouncyCheckbox
143-
ref={touchable => (this.touchable = touchable)}
144-
disableText
145-
fillColor="#9342f5"
146-
size={50}
147-
iconImageStyle={{width: 18, height: 18}}
148-
iconStyle={{borderColor: '#9342f5'}}
149-
onPress={() => {
150-
alert('hello');
151-
}}
152-
/>
153-
<BouncyCheckbox
154-
isChecked
155-
disableText
156-
fillColor="green"
157-
size={50}
158-
iconImageStyle={{width: 18, height: 18}}
159-
iconStyle={{borderColor: 'green'}}
160-
onPress={() => {
161-
this.touchable?.props.onPress();
162-
}}
163-
/>
164-
</View>
165-
</View>
166-
<BottomSearchBar />
167-
</SafeAreaView>
9+
render() {
10+
return (
11+
<View style={{flex: 1}}>
12+
<StatusBar barStyle="dark-content" />
13+
<SafeAreaView style={{flex: 1}}>
14+
<AppleHeader />
15+
<View style={{margin: 16}}>
16+
<View style={{margin: 8}}>
17+
<BouncyCheckbox
18+
size={25}
19+
fillColor="red"
20+
TouchableComponent={Pressable}
21+
iconStyle={{borderColor: 'red'}}
22+
disableText={false}
23+
unfillColor="#FFFFFF"
24+
text="Custom Checkbox with Pressable Component"
25+
onPress={(isChecked: boolean) => {}}
26+
/>
16827
</View>
169-
);
170-
}
28+
<View style={{margin: 8}}>
29+
<BouncyCheckbox
30+
disabled
31+
isChecked={false}
32+
iconStyle={{borderColor: 'blue', borderRadius: 10}}
33+
unfillColor="white"
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+
/>
43+
</View>
44+
<View style={{margin: 8}}>
45+
<BouncyCheckbox
46+
isChecked
47+
text="Get groceries"
48+
onPress={(isChecked: boolean) => {}}
49+
/>
50+
</View>
51+
<View style={{margin: 8}}>
52+
<BouncyCheckbox
53+
isChecked
54+
text="Pay the bills"
55+
onPress={(isChecked: boolean) => {}}
56+
/>
57+
</View>
58+
<View style={{margin: 8}}>
59+
<BouncyCheckbox
60+
text="Take out of the trash 💩"
61+
onPress={(isChecked: boolean) => {}}
62+
/>
63+
</View>
64+
<View style={{margin: 8}}>
65+
<BouncyCheckbox
66+
disableText={false}
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={{
76+
color: 'red',
77+
textDecorationLine: 'none',
78+
}}
79+
onPress={(isChecked: boolean) => {}}
80+
/>
81+
</View>
82+
<View style={{margin: 8}}>
83+
<BouncyCheckbox
84+
isChecked
85+
text="Do a load of laundry"
86+
onPress={(isChecked: boolean) => {}}
87+
/>
88+
</View>
89+
</View>
90+
<View
91+
style={{
92+
marginTop: 16,
93+
}}>
94+
<Text
95+
style={{
96+
marginLeft: 24,
97+
fontSize: 24,
98+
fontWeight: '700',
99+
}}>
100+
Checkbox Only
101+
</Text>
102+
<View
103+
style={{
104+
marginTop: 16,
105+
width: '100%',
106+
flexDirection: 'row',
107+
justifyContent: 'space-evenly',
108+
}}>
109+
<BouncyCheckbox
110+
size={50}
111+
isChecked
112+
iconImageStyle={{width: 18, height: 18}}
113+
disableText
114+
onPress={() => {}}
115+
/>
116+
<BouncyCheckbox
117+
disableText
118+
fillColor="#f54b42"
119+
size={50}
120+
iconImageStyle={{width: 18, height: 18}}
121+
iconStyle={{borderColor: '#f54b42'}}
122+
onPress={() => {}}
123+
/>
124+
<BouncyCheckbox
125+
isChecked
126+
disableText
127+
fillColor="#4287f5"
128+
size={50}
129+
iconImageStyle={{width: 18, height: 18}}
130+
iconStyle={{borderColor: '#4287f5'}}
131+
onPress={() => {}}
132+
/>
133+
<BouncyCheckbox
134+
ref={touchable => (this.touchable = touchable)}
135+
disableText
136+
fillColor="#9342f5"
137+
size={50}
138+
iconImageStyle={{width: 18, height: 18}}
139+
iconStyle={{borderColor: '#9342f5'}}
140+
onPress={() => {
141+
alert('hello');
142+
}}
143+
/>
144+
<BouncyCheckbox
145+
isChecked
146+
disableText
147+
fillColor="green"
148+
size={50}
149+
iconImageStyle={{width: 18, height: 18}}
150+
iconStyle={{borderColor: 'green'}}
151+
onPress={() => {
152+
this.touchable?.props.onPress();
153+
}}
154+
/>
155+
</View>
156+
</View>
157+
<BottomSearchBar />
158+
</SafeAreaView>
159+
</View>
160+
);
161+
}
171162
}

0 commit comments

Comments
 (0)