Skip to content

Commit 6b7f71a

Browse files
WrathChaosWrathChaos
committed
feat: forwarding ref and imperative onCheckboxPress handling to control another checkbox synthetically
1 parent 74b33d2 commit 6b7f71a

File tree

3 files changed

+303
-216
lines changed

3 files changed

+303
-216
lines changed

‎example/App.tsx‎

Lines changed: 188 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,198 @@
1-
import React from 'react';
2-
import {View, Text, StatusBar, SafeAreaView, Pressable} from 'react-native';
1+
import React, {useRef} from 'react';
2+
import {
3+
View,
4+
Text,
5+
StatusBar,
6+
SafeAreaView,
7+
Pressable,
8+
Alert,
9+
} from 'react-native';
310
import AppleHeader from 'react-native-apple-header';
411
import BottomSearchBar from 'react-native-bottom-search-bar';
512
// import BouncyCheckbox from 'react-native-bouncy-checkbox';
6-
import BouncyCheckbox from './lib/BouncyCheckbox';
13+
import BouncyCheckbox, {BouncyCheckboxHandle} from './lib/BouncyCheckbox';
714

8-
export default class App extends React.Component<any, any> {
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-
/>
27-
</View>
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>
15+
const App: React.FC = () => {
16+
const bouncyCheckboxRef = useRef<BouncyCheckboxHandle>(null);
17+
18+
return (
19+
<View style={{flex: 1}}>
20+
<StatusBar barStyle="dark-content" />
21+
<SafeAreaView style={{flex: 1}}>
22+
<AppleHeader
23+
dateTitle={'2024-04-06'}
24+
largeTitle={'Welcome'}
25+
onPress={() => {}}
26+
imageSource={{
27+
uri: 'https://images.unsplash.com/photo-1519865885898-a54a6f2c7eea?q=80&w=1358&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
28+
}}
29+
/>
30+
<View style={{margin: 16}}>
31+
<View style={{margin: 8}}>
32+
<BouncyCheckbox
33+
size={25}
34+
fillColor="red"
35+
TouchableComponent={Pressable}
36+
iconStyle={{borderColor: 'red'}}
37+
disableText={false}
38+
unFillColor="#FFFFFF"
39+
text="Custom Checkbox with Pressable Component"
40+
onPress={(isChecked: boolean) => {
41+
console.log(isChecked);
42+
}}
43+
/>
44+
</View>
45+
<View style={{margin: 8}}>
46+
<BouncyCheckbox
47+
disabled
48+
isChecked={false}
49+
iconStyle={{borderColor: 'blue', borderRadius: 10}}
50+
unFillColor="white"
51+
text="Custom Disabled Checkbox Example"
52+
onPress={(isChecked: boolean) => {
53+
console.log(isChecked);
54+
}}
55+
/>
56+
</View>
57+
<View style={{margin: 8}}>
58+
<BouncyCheckbox
59+
text="Call my mom 😇"
60+
onPress={(isChecked: boolean) => {
61+
console.log(isChecked);
62+
}}
63+
/>
64+
</View>
65+
<View style={{margin: 8}}>
66+
<BouncyCheckbox
67+
isChecked
68+
text="Get groceries"
69+
onPress={(isChecked: boolean) => {
70+
console.log(isChecked);
71+
}}
72+
/>
73+
</View>
74+
<View style={{margin: 8}}>
75+
<BouncyCheckbox
76+
isChecked
77+
text="Pay the bills"
78+
onPress={(isChecked: boolean) => {
79+
console.log(isChecked);
80+
}}
81+
/>
82+
</View>
83+
<View style={{margin: 8}}>
84+
<BouncyCheckbox
85+
text="Take out of the trash 💩"
86+
onPress={(isChecked: boolean) => {
87+
console.log(isChecked);
88+
}}
89+
/>
8990
</View>
91+
<View style={{margin: 8}}>
92+
<BouncyCheckbox
93+
disableText={false}
94+
text="Buy tickets for concert 🎉 🎊"
95+
onPress={(isChecked: boolean) => {
96+
console.log(isChecked);
97+
}}
98+
/>
99+
</View>
100+
<View style={{margin: 8}}>
101+
<BouncyCheckbox
102+
isChecked
103+
text="Try new gym routine"
104+
textStyle={{
105+
color: 'red',
106+
textDecorationLine: 'none',
107+
}}
108+
onPress={(isChecked: boolean) => {
109+
console.log(isChecked);
110+
}}
111+
/>
112+
</View>
113+
<View style={{margin: 8}}>
114+
<BouncyCheckbox
115+
isChecked
116+
text="Do a load of laundry"
117+
onPress={(isChecked: boolean) => {
118+
console.log(isChecked);
119+
}}
120+
/>
121+
</View>
122+
</View>
123+
<View
124+
style={{
125+
marginTop: 16,
126+
}}>
127+
<Text
128+
style={{
129+
marginLeft: 24,
130+
fontSize: 24,
131+
fontWeight: '700',
132+
}}>
133+
Checkbox Only
134+
</Text>
90135
<View
91136
style={{
92137
marginTop: 16,
138+
width: '100%',
139+
flexDirection: 'row',
140+
justifyContent: 'space-evenly',
93141
}}>
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>
142+
<BouncyCheckbox
143+
size={50}
144+
isChecked
145+
iconImageStyle={{width: 18, height: 18}}
146+
disableText
147+
onPress={() => {}}
148+
/>
149+
<BouncyCheckbox
150+
disableText
151+
fillColor="#f54b42"
152+
size={50}
153+
iconImageStyle={{width: 18, height: 18}}
154+
iconStyle={{borderColor: '#f54b42'}}
155+
onPress={() => {}}
156+
/>
157+
<BouncyCheckbox
158+
isChecked
159+
disableText
160+
fillColor="#4287f5"
161+
size={50}
162+
iconImageStyle={{width: 18, height: 18}}
163+
iconStyle={{borderColor: '#4287f5'}}
164+
onPress={() => {}}
165+
/>
166+
<BouncyCheckbox
167+
ref={bouncyCheckboxRef}
168+
disableText
169+
fillColor="#9342f5"
170+
size={50}
171+
iconImageStyle={{width: 18, height: 18}}
172+
iconStyle={{borderColor: '#9342f5'}}
173+
onPress={isChecked => {
174+
Alert.alert(`Checked:: ${isChecked}`);
175+
}}
176+
/>
177+
<BouncyCheckbox
178+
isChecked
179+
disableText
180+
fillColor="green"
181+
size={50}
182+
iconImageStyle={{width: 18, height: 18}}
183+
iconStyle={{borderColor: 'green'}}
184+
onPress={() => {
185+
if (bouncyCheckboxRef.current) {
186+
bouncyCheckboxRef.current.onCheckboxPress();
187+
}
188+
}}
189+
/>
156190
</View>
157-
<BottomSearchBar />
158-
</SafeAreaView>
159-
</View>
160-
);
161-
}
162-
}
191+
</View>
192+
<BottomSearchBar />
193+
</SafeAreaView>
194+
</View>
195+
);
196+
};
197+
198+
export default App;

0 commit comments

Comments
 (0)