Skip to content

Commit 97633e5

Browse files
WrathChaosWrathChaos
committed
feat: better example and synthetic checkbox controllering example
1 parent 6b7f71a commit 97633e5

File tree

9 files changed

+325
-243
lines changed

9 files changed

+325
-243
lines changed

‎example/App.tsx‎

Lines changed: 232 additions & 171 deletions
Large diffs are not rendered by default.

‎example/lib/BouncyCheckbox.tsx‎

Lines changed: 17 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -5,72 +5,15 @@ import React, {
55
useEffect,
66
useImperativeHandle,
77
} from 'react';
8-
import {
9-
View,
10-
Text,
11-
Image,
12-
Animated,
13-
StyleProp,
14-
ViewStyle,
15-
Pressable,
16-
PressableProps,
17-
TextStyle,
18-
ImageStyle,
19-
ImageSourcePropType,
20-
} from 'react-native';
8+
import {View, Text, Image, Animated, Pressable} from 'react-native';
219
import useBounceAnimation from './hooks/useBounceAnimation';
22-
import useStateWIthCallback from './helpers/useStateWIthCallback';
10+
import useStateWithCallback from './helpers/useStateWithCallback';
2311
import styles from './BouncyCheckbox.style';
24-
25-
const AnimationValues = {
26-
BounceIn: 0.9,
27-
BounceOut: 1,
28-
VelocityIn: 0.1,
29-
VelocityOut: 0.4,
30-
BouncinessIn: 20,
31-
BouncinessOut: 20,
32-
};
33-
34-
type BasePressableProps = Pick<
35-
PressableProps,
36-
Exclude<keyof PressableProps, 'onPress' | 'onLongPress'>
37-
>;
38-
39-
export interface BouncyCheckboxProps extends BasePressableProps {
40-
size?: number;
41-
text?: string;
42-
testID?: string;
43-
fillColor?: string;
44-
isChecked?: boolean;
45-
unFillColor?: string;
46-
disableText?: boolean;
47-
bounceEffect?: number;
48-
bounceFriction?: number;
49-
useNativeDriver?: boolean;
50-
bounceEffectIn?: number;
51-
bounceEffectOut?: number;
52-
bounceVelocityIn?: number;
53-
bounceVelocityOut?: number;
54-
bouncinessIn?: number;
55-
bouncinessOut?: number;
56-
ImageComponent?: any;
57-
TouchableComponent?: any;
58-
iconComponent?: React.ReactNode;
59-
textComponent?: React.ReactNode;
60-
iconStyle?: StyleProp<ViewStyle>;
61-
innerIconStyle?: StyleProp<ViewStyle>;
62-
style?: StyleProp<ViewStyle>;
63-
textStyle?: StyleProp<TextStyle>;
64-
iconImageStyle?: StyleProp<ImageStyle>;
65-
textContainerStyle?: StyleProp<ViewStyle>;
66-
checkIconImageSource?: ImageSourcePropType;
67-
onPress?: (checked: boolean) => void;
68-
onLongPress?: (checked: boolean) => void;
69-
}
70-
71-
export interface BouncyCheckboxHandle {
72-
onCheckboxPress: () => void;
73-
}
12+
import {
13+
AnimationValues,
14+
BouncyCheckboxHandle,
15+
BouncyCheckboxProps,
16+
} from './BouncyCheckbox.type';
7417

7518
const BouncyCheckbox: React.ForwardRefRenderFunction<
7619
BouncyCheckboxHandle,
@@ -81,7 +24,6 @@ const BouncyCheckbox: React.ForwardRefRenderFunction<
8124
iconStyle,
8225
iconComponent,
8326
iconImageStyle,
84-
isChecked,
8527
innerIconStyle,
8628
text,
8729
textComponent,
@@ -95,6 +37,7 @@ const BouncyCheckbox: React.ForwardRefRenderFunction<
9537
ImageComponent = Image,
9638
unFillColor = 'transparent',
9739
disableText = false,
40+
isChecked = undefined,
9841
checkIconImageSource = require('./check.png'),
9942
bounceEffectIn = AnimationValues.BounceIn,
10043
bounceEffectOut = AnimationValues.BounceOut,
@@ -106,7 +49,7 @@ const BouncyCheckbox: React.ForwardRefRenderFunction<
10649
...rest
10750
} = props;
10851

109-
const [checked, setChecked] = useStateWIthCallback(isChecked || false);
52+
const [checked, setChecked] = useStateWithCallback(isChecked || false);
11053

11154
const {bounceAnimation, syntheticBounceAnimation, bounceValue} =
11255
useBounceAnimation();
@@ -136,16 +79,19 @@ const BouncyCheckbox: React.ForwardRefRenderFunction<
13679
syntheticBounceAnimation,
13780
]);
13881

139-
useImperativeHandle(ref, () => ({onCheckboxPress}), [onCheckboxPress]);
140-
141-
const handleLongPress = () => {
82+
const onCheckboxLongPress = useCallback(() => {
14283
if (!onLongPress) {
14384
return;
14485
}
14586
setChecked(!checked, newCheckedValue => {
14687
onLongPress && onLongPress(newCheckedValue);
14788
});
148-
};
89+
}, [checked, onLongPress, setChecked]);
90+
91+
useImperativeHandle(ref, () => ({onCheckboxPress, onCheckboxLongPress}), [
92+
onCheckboxPress,
93+
onCheckboxLongPress,
94+
]);
14995

15096
const renderCheckIcon = () => {
15197
const scaleAnimation = {transform: [{scale: bounceValue}]};
@@ -193,7 +139,7 @@ const BouncyCheckbox: React.ForwardRefRenderFunction<
193139
bounceAnimation(bounceEffectOut, bounceVelocityOut, bouncinessOut);
194140
}}
195141
onPress={onCheckboxPress}
196-
onLongPress={handleLongPress}
142+
onLongPress={onCheckboxLongPress}
197143
{...rest}>
198144
{renderCheckIcon()}
199145
{renderCheckboxText()}

‎example/lib/BouncyCheckbox.type.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import {
2+
ImageSourcePropType,
3+
ImageStyle,
4+
PressableProps,
5+
StyleProp,
6+
TextStyle,
7+
ViewStyle,
8+
} from 'react-native';
9+
import React from 'react';
10+
11+
export const AnimationValues = {
12+
BounceIn: 0.9,
13+
BounceOut: 1,
14+
VelocityIn: 0.1,
15+
VelocityOut: 0.4,
16+
BouncinessIn: 20,
17+
BouncinessOut: 20,
18+
};
19+
20+
export type BasePressableProps = Pick<
21+
PressableProps,
22+
Exclude<keyof PressableProps, 'onPress' | 'onLongPress'>
23+
>;
24+
25+
export interface BouncyCheckboxProps extends BasePressableProps {
26+
size?: number;
27+
text?: string;
28+
testID?: string;
29+
fillColor?: string;
30+
isChecked?: boolean;
31+
unFillColor?: string;
32+
disableText?: boolean;
33+
bounceEffect?: number;
34+
bounceFriction?: number;
35+
useNativeDriver?: boolean;
36+
bounceEffectIn?: number;
37+
bounceEffectOut?: number;
38+
bounceVelocityIn?: number;
39+
bounceVelocityOut?: number;
40+
bouncinessIn?: number;
41+
bouncinessOut?: number;
42+
ImageComponent?: any;
43+
TouchableComponent?: any;
44+
iconComponent?: React.ReactNode;
45+
textComponent?: React.ReactNode;
46+
iconStyle?: StyleProp<ViewStyle>;
47+
innerIconStyle?: StyleProp<ViewStyle>;
48+
style?: StyleProp<ViewStyle>;
49+
textStyle?: StyleProp<TextStyle>;
50+
iconImageStyle?: StyleProp<ImageStyle>;
51+
textContainerStyle?: StyleProp<ViewStyle>;
52+
checkIconImageSource?: ImageSourcePropType;
53+
onPress?: (checked: boolean) => void;
54+
onLongPress?: (checked: boolean) => void;
55+
}
56+
57+
export interface BouncyCheckboxHandle {
58+
onCheckboxPress: () => void;
59+
onCheckboxLongPress: () => void;
60+
}

‎example/lib/helpers/useStateWIthCallback.ts‎ renamed to ‎example/lib/helpers/useStateWithCallback.ts‎

File renamed without changes.

‎example/lib/hooks/useBounceAnimation.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {Animated} from 'react-native';
22
import {useState} from 'react';
33

44
const useBounceAnimation = () => {
5-
const [bounceValue, setBounceValue] = useState(new Animated.Value(1));
5+
const [bounceValue] = useState(new Animated.Value(1));
66

77
const bounceAnimation = (
88
value: number,

‎example/lib/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export {default} from './BouncyCheckbox';
2+
export * from './BouncyCheckbox';
3+
export * from './BouncyCheckbox.type';

‎example/package-lock.json‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
1111
},
1212
"dependencies": {
13+
"@freakycoder/react-native-bounceable": "^1.0.3",
1314
"react": "18.1.0",
1415
"react-native": "0.70.10",
1516
"react-native-apple-header": "^1.0.1",

‎example/yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1193,6 +1193,11 @@
11931193
minimatch "^3.0.4"
11941194
strip-json-comments "^3.1.1"
11951195

1196+
"@freakycoder/react-native-bounceable@^1.0.3":
1197+
version "1.0.3"
1198+
resolved "https://registry.npmjs.org/@freakycoder/react-native-bounceable/-/react-native-bounceable-1.0.3.tgz"
1199+
integrity sha512-+iMq2tnqxCwFjitbPUz9nZ+VfJ8OU9waIlDJAAsoq1229QEwCmERCNy5zVtDsz75q3i4FLXX/n7fimdMzmP21A==
1200+
11961201
"@freakycoder/react-native-helpers@>= 2.1.0":
11971202
version "2.3.0"
11981203
resolved "https://registry.npmjs.org/@freakycoder/react-native-helpers/-/react-native-helpers-2.3.0.tgz"

0 commit comments

Comments
 (0)