Skip to content

Commit feb99e8

Browse files
XantreDevXantreDev
committed
feat(cupertino-activity-indicator): draft of cupertino indicator
1 parent 45d3a4f commit feb99e8

File tree

7 files changed

+307
-77
lines changed

7 files changed

+307
-77
lines changed

‎example/src/App.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
IndeterminateMaterialCircularProgressIndicator,
77
} from 'react-native-skia-ui/material-circular-progress-indicator';
88
import { useSharedValue, withTiming } from 'react-native-reanimated';
9-
9+
import { CupertinoActivityIndicator } from 'react-native-skia-ui/cupertino-activity-indicator';
1010
export default function App() {
1111
const progress = useSharedValue(0);
1212
React.useEffect(() => {
@@ -33,6 +33,11 @@ export default function App() {
3333
strokeCap="round"
3434
value={progress}
3535
/>
36+
<CupertinoActivityIndicator
37+
color="black"
38+
progress={progress}
39+
radius={50}
40+
/>
3641
<Text>IndeterminateMaterialCircularProgressIndicator</Text>
3742
<IndeterminateMaterialCircularProgressIndicator
3843
size={40}
@@ -46,6 +51,7 @@ export default function App() {
4651
strokeWidth={8}
4752
strokeCap="round"
4853
/>
54+
<CupertinoActivityIndicator color="black" radius={50} />
4955
</View>
5056
);
5157
}

‎package.json

+8
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,13 @@
2121
"types": "./lib/typescript/src/material-circular-progress-indicator/index.d.ts",
2222
"react-native": "./src/material-circular-progress-indicator/index",
2323
"source": "./src/material-circular-progress-indicator/index"
24+
},
25+
"./cupertino-activity-indicator": {
26+
"import": "./lib/module/cupertino-activity-indicator/index",
27+
"require": "./lib/commonjs/cupertino-activity-indicator/index",
28+
"types": "./lib/typescript/src/cupertino-activity-indicator/index.d.ts",
29+
"react-native": "./src/cupertino-activity-indicator/index",
30+
"source": "./src/cupertino-activity-indicator/index"
2431
}
2532
},
2633
"files": [
@@ -30,6 +37,7 @@
3037
"ios",
3138
"cpp",
3239
"material-circular-progress-indicator",
40+
"cupertino-activity-indicator",
3341
"*.podspec",
3442
"!ios/build",
3543
"!android/build",

‎src/cupertino-activity-indicator/index.tsx

+182
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
import React from 'react';
2+
import type { Size, SkCanvas } from '@shopify/react-native-skia';
3+
import {
4+
Canvas,
5+
Picture,
6+
Skia,
7+
createPicture,
8+
} from '@shopify/react-native-skia';
9+
import {
10+
assertWorklet,
11+
rad2deg,
12+
type PlainValueOrAnimatedValue,
13+
} from '../utils';
14+
import Animated, {
15+
useAnimatedStyle,
16+
useDerivedValue,
17+
useSharedValue,
18+
type SharedValue,
19+
} from 'react-native-reanimated';
20+
import {
21+
useDuration,
22+
useToSharedValue,
23+
useToSharedValueOptional,
24+
} from '../hooks';
25+
import { StyleSheet } from 'react-native';
26+
27+
const _kDefaultIndicatorRadius = 10.0;
28+
29+
type DrawProps = {
30+
position: number;
31+
color: string;
32+
radius: number;
33+
progress: number;
34+
};
35+
36+
const _kAlphaValues = [47, 47, 47, 47, 72, 97, 122, 147];
37+
const _partiallyRevealedAlpha = 147;
38+
39+
const twoPi = Math.PI * 2;
40+
41+
/**
42+
*
43+
* @param color
44+
* @param alpha {number} 0-255
45+
* @returns
46+
*/
47+
const colorWithAlpha = (_color: string, alpha: number) => {
48+
'worklet';
49+
const color = Skia.Color(_color);
50+
color[3] *= alpha / 255;
51+
52+
return color;
53+
};
54+
55+
const draw = (canvas: SkCanvas, size: Size, props: DrawProps) => {
56+
'worklet';
57+
58+
const radius = props.radius ?? _kDefaultIndicatorRadius;
59+
const progress = props.progress ?? 1;
60+
const r = radius / _kDefaultIndicatorRadius;
61+
const width = r * 2;
62+
const _rect = {
63+
x: -width / 2,
64+
y: -radius,
65+
width,
66+
height: (radius / 3.0) * 2.0,
67+
rx: r,
68+
ry: r,
69+
};
70+
// logic is altered from flutter because it uses rect with negative height, which is not supported with react-native-skia
71+
const tickFundamentalRRect = Skia.RRectXY(
72+
Skia.XYWHRect(_rect.x, _rect.y, _rect.width, _rect.height),
73+
_rect.rx,
74+
_rect.ry
75+
);
76+
77+
const tickCount = _kAlphaValues.length;
78+
79+
const activeTick = Math.min((props.position * tickCount) | 0, tickCount - 1);
80+
const paint = Skia.Paint();
81+
82+
canvas.save();
83+
const centerSize = size.width / 2;
84+
canvas.translate(centerSize, centerSize);
85+
for (let i = 0; i < tickCount * progress; ++i) {
86+
const t = (i - activeTick) % tickCount;
87+
88+
let alpha = _partiallyRevealedAlpha;
89+
if (progress === 1) {
90+
const _ = _kAlphaValues[t >= 0 ? t : t + tickCount];
91+
assertWorklet(_ !== undefined);
92+
alpha = _;
93+
}
94+
const color = colorWithAlpha(props.color, alpha);
95+
paint.setColor(color);
96+
canvas.drawRRect(tickFundamentalRRect, paint);
97+
canvas.rotate(rad2deg(twoPi / tickCount), 0, 0);
98+
}
99+
100+
canvas.restore();
101+
};
102+
103+
type InternalProps = {
104+
color: SharedValue<string>;
105+
animating: SharedValue<boolean>;
106+
radius: SharedValue<number>;
107+
progress: SharedValue<number>;
108+
};
109+
110+
export type CupertinoActivityIndicatorProps = {
111+
color: string;
112+
/**
113+
* Whether to show the indicator (true, the default) or hide it (false).
114+
* @default true
115+
*/
116+
animating?: PlainValueOrAnimatedValue<boolean>;
117+
/**
118+
* Radius of the spinner.
119+
*
120+
* Defaults to 10 pixels.
121+
*/
122+
radius?: PlainValueOrAnimatedValue<number>;
123+
/**
124+
* Determines the percentage of spinner ticks that will be shown. Typical usage would
125+
* display all ticks, however, this allows for more fine-grained control such as
126+
* during pull-to-refresh when the drag-down action shows one tick at a time as
127+
* the user continues to drag down.
128+
*
129+
* Defaults to one. Must be between zero and one, inclusive.
130+
*/
131+
progress?: PlainValueOrAnimatedValue<number>;
132+
};
133+
134+
const _Content = (props: InternalProps) => {
135+
const animationValue = useDuration({
136+
stopped: useSharedValue(false),
137+
timing: 1_000,
138+
});
139+
const size = useDerivedValue(() => ({
140+
width: props.radius.value * 2,
141+
height: props.radius.value * 2,
142+
}));
143+
144+
return (
145+
<Animated.View style={useAnimatedStyle(() => size.value)}>
146+
<Canvas style={StyleSheet.absoluteFill}>
147+
<Picture
148+
picture={useDerivedValue(() => {
149+
const drawProps: DrawProps = {
150+
color: props.color.value,
151+
position: animationValue.value,
152+
progress: props.progress.value,
153+
radius: props.radius.value,
154+
};
155+
assertWorklet(drawProps.progress >= 0.0);
156+
assertWorklet(drawProps.progress <= 1.0);
157+
assertWorklet(drawProps.radius >= 0.0);
158+
159+
const _size = size.value;
160+
return createPicture((canvas) => {
161+
draw(canvas, _size, drawProps);
162+
}, _size);
163+
})}
164+
/>
165+
</Canvas>
166+
</Animated.View>
167+
);
168+
};
169+
170+
export const CupertinoActivityIndicator = (
171+
props: CupertinoActivityIndicatorProps
172+
) => {
173+
const { color, animating, radius, progress } = props;
174+
return (
175+
<_Content
176+
color={useToSharedValue(color)}
177+
animating={useToSharedValueOptional(animating, true)}
178+
radius={useToSharedValueOptional(radius, _kDefaultIndicatorRadius)}
179+
progress={useToSharedValueOptional(progress, 1)}
180+
/>
181+
);
182+
};

‎src/hooks.ts

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import {
2+
Easing,
3+
isSharedValue,
4+
useAnimatedReaction,
5+
useDerivedValue,
6+
useSharedValue,
7+
withRepeat,
8+
withSequence,
9+
withTiming,
10+
type SharedValue,
11+
} from 'react-native-reanimated';
12+
13+
export const useDuration = ({
14+
stopped,
15+
timing,
16+
}: {
17+
stopped: SharedValue<boolean>;
18+
timing: number;
19+
}) => {
20+
const animationValue = useSharedValue(0);
21+
22+
useAnimatedReaction(
23+
() => stopped.value,
24+
(shouldStop) => {
25+
if (shouldStop) {
26+
// stopping the animation
27+
animationValue.value = animationValue.value;
28+
return;
29+
}
30+
if (animationValue.value === 0) {
31+
animationValue.value = withRepeat(
32+
withTiming(1, {
33+
duration: timing,
34+
easing: Easing.linear,
35+
}),
36+
-1
37+
);
38+
return;
39+
}
40+
41+
const remainingTime = timing * (1 - animationValue.value);
42+
43+
animationValue.value = withSequence(
44+
withTiming(1, {
45+
duration: remainingTime,
46+
easing: Easing.linear,
47+
}),
48+
0,
49+
withRepeat(
50+
withTiming(1, {
51+
duration: timing,
52+
easing: Easing.linear,
53+
}),
54+
-1
55+
)
56+
);
57+
},
58+
[stopped]
59+
);
60+
61+
return animationValue;
62+
};
63+
64+
export const useToSharedValueOptional = <T>(
65+
value: T | SharedValue<T> | undefined,
66+
defaultValue: T
67+
) =>
68+
useDerivedValue(() => {
69+
if (isSharedValue(value)) {
70+
return value.value;
71+
}
72+
return value ?? defaultValue;
73+
}, [value, defaultValue]);
74+
75+
export const useToSharedValue = <T>(value: T | SharedValue<T>) =>
76+
useDerivedValue(() => {
77+
if (isSharedValue(value)) {
78+
return value.value;
79+
}
80+
return value;
81+
}, [value]);

‎src/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export { Curves } from './curves';
22
export { Animatable } from './animatable';
3+
export { rad2deg } from './utils';

0 commit comments

Comments
 (0)