Skip to content

Commit a73d472

Browse files
kfaracikkfaracik
committed
Merge remote-tracking branch 'origin/main' into chore/229-migrate-swmansion-bottom-sheet
2 parents 86f2082 + efb8d8c commit a73d472

11 files changed

Lines changed: 110 additions & 66 deletions

‎__mocks__/react-native-reanimated.ts‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,26 @@ const RN = require('react-native');
33

44
const createAnimatedComponent = (Component: any) => Component;
55

6+
interface MockSharedValue<T> {
7+
value: T;
8+
get: () => T;
9+
set: (next: T | ((prev: T) => T)) => void;
10+
}
11+
12+
const makeSharedValue = <T>(init: T): MockSharedValue<T> => {
13+
const shared: MockSharedValue<T> = {
14+
value: init,
15+
get: () => shared.value,
16+
set: (next) => {
17+
shared.value =
18+
typeof next === 'function'
19+
? (next as (prev: T) => T)(shared.value)
20+
: next;
21+
},
22+
};
23+
return shared;
24+
};
25+
626
const Animated = {
727
View: RN.View,
828
Text: RN.Text,
@@ -17,12 +37,19 @@ module.exports = {
1737
default: Animated,
1838
...Animated,
1939
createAnimatedComponent,
20-
useSharedValue: (init: any) => ({ value: init }),
40+
useSharedValue: <T>(init: T) => makeSharedValue(init),
2141
useAnimatedStyle: (fn: () => any) => fn(),
2242
useAnimatedRef: () => ({ current: null }),
23-
useDerivedValue: (fn: () => any) => ({ value: fn() }),
43+
useDerivedValue: <T>(fn: () => T) => makeSharedValue(fn()),
2444
useAnimatedScrollHandler: (fn: any) => fn,
25-
withTiming: (val: any) => val,
45+
withTiming: (
46+
val: any,
47+
_config: any,
48+
callback?: (finished: boolean) => void
49+
) => {
50+
callback?.(true);
51+
return val;
52+
},
2653
withSpring: (val: any) => val,
2754
withRepeat: (val: any) => val,
2855
withDelay: (_d: any, val: any) => val,
@@ -32,6 +59,7 @@ module.exports = {
3259
linear: (t: any) => t,
3360
ease: (t: any) => t,
3461
quad: (t: any) => t,
62+
bezier: () => (t: any) => t,
3563
inOut: (fn: any) => fn,
3664
out: (fn: any) => fn,
3765
in: (fn: any) => fn,

‎app/(modals)/onboarding.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ function OnboardingScreen() {
103103
return true; // Prevent default back action
104104
} else if (stepNumber === 1) {
105105
// Go back to intro panel
106-
bgSpillProgress.value = withTiming(0, { duration: 500 });
106+
bgSpillProgress.set(withTiming(0, { duration: 500 }));
107107
setTimeout(() => setStepNumber(0), 500);
108108
return true; // Prevent default back action
109109
}
@@ -120,37 +120,37 @@ function OnboardingScreen() {
120120

121121
const initialBgBottom = introPanel.height + 16;
122122
const bgDistance = useDerivedValue(() =>
123-
interpolate(bgSpillProgress.value, [0, 1], [0, initialBgBottom])
123+
interpolate(bgSpillProgress.get(), [0, 1], [0, initialBgBottom])
124124
);
125125

126126
const divider = useDerivedValue(
127-
() => SCREEN_HEIGHT - initialBgBottom + bgDistance.value
127+
() => SCREEN_HEIGHT - initialBgBottom + bgDistance.get()
128128
);
129129

130130
const colorBgAnimation = useAnimatedStyle(() => {
131-
const topEdge = Math.max(theme.insets.top + 16 - bgDistance.value, 0);
132-
const sideEdge = Math.max(16 - bgDistance.value, 0);
131+
const topEdge = Math.max(theme.insets.top + 16 - bgDistance.get(), 0);
132+
const sideEdge = Math.max(16 - bgDistance.get(), 0);
133133

134134
return {
135135
position: 'absolute',
136136
top: topEdge,
137137
left: sideEdge,
138138
right: sideEdge,
139-
bottom: SCREEN_HEIGHT - divider.value,
140-
borderRadius: Math.max(10 - bgDistance.value, 0),
139+
bottom: SCREEN_HEIGHT - divider.get(),
140+
borderRadius: Math.max(10 - bgDistance.get(), 0),
141141
};
142142
});
143143

144144
const imageAnimation = useAnimatedStyle(() => ({
145-
height: divider.value,
145+
height: divider.get(),
146146
}));
147147

148148
return (
149149
<View style={styles.container}>
150150
<View ref={introPanel.ref} style={styles.bottomPanel}>
151151
<OnboardingIntroPanel
152152
onPressStart={() => {
153-
bgSpillProgress.value = withTiming(1, { duration: 500 });
153+
bgSpillProgress.set(withTiming(1, { duration: 500 }));
154154
setTimeout(() => setStepNumber(1), 500);
155155
}}
156156
/>

‎components/SpinningCircle.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,23 @@ const SpinningCircle = ({
2323
const rotation = useSharedValue(0);
2424

2525
useEffect(() => {
26-
rotation.value = withRepeat(
27-
withTiming(360, {
28-
duration: 1000,
29-
easing: Easing.linear,
30-
}),
31-
-1,
32-
false
26+
rotation.set(
27+
withRepeat(
28+
withTiming(360, {
29+
duration: 1000,
30+
easing: Easing.linear,
31+
}),
32+
-1,
33+
false
34+
)
3335
);
3436
}, []);
3537

3638
const radius = (size - strokeWidth) / 2;
3739
const cx = size / 2;
3840

3941
const animatedStyle = useAnimatedStyle(() => ({
40-
transform: [{ rotate: `${rotation.value}deg` }],
42+
transform: [{ rotate: `${rotation.get()}deg` }],
4143
}));
4244

4345
return (

‎components/SpinningCircleTimer.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,15 @@ export const SpinningCircleTimer = ({
2828
const styles = useMemo(() => createStyles(theme), [theme]);
2929

3030
useEffect(() => {
31-
rotation.value = withRepeat(
32-
withTiming(360, {
33-
duration: 1000,
34-
easing: Easing.linear,
35-
}),
36-
-1,
37-
false
31+
rotation.set(
32+
withRepeat(
33+
withTiming(360, {
34+
duration: 1000,
35+
easing: Easing.linear,
36+
}),
37+
-1,
38+
false
39+
)
3840
);
3941
}, []);
4042

@@ -46,7 +48,7 @@ export const SpinningCircleTimer = ({
4648
const displayTime = `${minutes}:${String(seconds).padStart(2, '0')}`;
4749

4850
const animatedStyle = useAnimatedStyle(() => ({
49-
transform: [{ rotate: `${rotation.value}deg` }],
51+
transform: [{ rotate: `${rotation.get()}deg` }],
5052
}));
5153

5254
return (

‎components/SplashScreenAnimation.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,15 @@ function SplashScreenAnimation() {
2020

2121
useEffect(() => {
2222
SplashScreen.hide();
23-
rippleProgress.value = withTiming(1, { duration: 800 }, () => {
24-
runOnJS(setDone)(true);
25-
});
23+
rippleProgress.set(
24+
withTiming(1, { duration: 800 }, () => {
25+
runOnJS(setDone)(true);
26+
})
27+
);
2628
}, []);
2729

2830
const rippleStyle = useAnimatedStyle(() => ({
29-
transform: [{ scale: rippleProgress.value }],
31+
transform: [{ scale: rippleProgress.get() }],
3032
}));
3133

3234
if (done) {

‎components/chat-screen/AnimatedChatLoading.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,17 @@ const AnimatedChatLoading = () => {
2424
const opacity = useSharedValue(0.4);
2525

2626
useEffect(() => {
27-
opacity.value = withRepeat(
28-
withTiming(1, { duration: 900, easing: Easing.inOut(Easing.quad) }),
29-
-1,
30-
true
27+
opacity.set(
28+
withRepeat(
29+
withTiming(1, { duration: 900, easing: Easing.inOut(Easing.quad) }),
30+
-1,
31+
true
32+
)
3133
);
3234
}, [opacity]);
3335

3436
const animatedStyle = useAnimatedStyle(() => ({
35-
opacity: opacity.value,
37+
opacity: opacity.get(),
3638
}));
3739

3840
return (

‎components/chat-screen/ChatBar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const ChatBar = ({
108108
clear: () => {
109109
setUserInput('');
110110
clearAll();
111-
extraContentPadding.value = 0;
111+
extraContentPadding.set(0);
112112
if (Platform.OS === 'ios') {
113113
textInputRef.current?.setNativeProps({ text: ' ' });
114114
textInputRef.current?.setNativeProps({ text: '' });
@@ -136,7 +136,7 @@ const ChatBar = ({
136136
}
137137
const baseline = defaultBarHeight.current || height;
138138
const delta = height - baseline;
139-
extraContentPadding.value = Math.max(0, delta);
139+
extraContentPadding.set(Math.max(0, delta));
140140
onHeightChange?.(height);
141141
if (delta > 0) {
142142
onBarGrow?.();

‎components/chat-screen/ChatScreen.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -315,11 +315,11 @@ export default function ChatScreen({
315315
const { height: windowHeight } = useWindowDimensions();
316316
const gradientProgress = useSharedValue(isEmpty ? 1 : 0);
317317
useEffect(() => {
318-
gradientProgress.value = withTiming(isEmpty ? 1 : 0, { duration: 900 });
318+
gradientProgress.set(withTiming(isEmpty ? 1 : 0, { duration: 900 }));
319319
}, [isEmpty, gradientProgress]);
320320
const gradientStyle = useAnimatedStyle(() => ({
321-
opacity: gradientProgress.value,
322-
transform: [{ translateY: (1 - gradientProgress.value) * windowHeight }],
321+
opacity: gradientProgress.get(),
322+
transform: [{ translateY: (1 - gradientProgress.get()) * windowHeight }],
323323
}));
324324

325325
return (

‎components/chat-screen/ChatSpeechInput.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ const ChatSpeechInput: React.FC<Props> = ({
142142
const wrapperStyle = useAnimatedStyle(() => {
143143
return {
144144
backgroundColor: interpolateColor(
145-
cancelAnimationProgress.value,
145+
cancelAnimationProgress.get(),
146146
[0, 0.5, 1],
147147
[theme.bg.main, theme.bg.errorPrimary, theme.bg.errorPrimary]
148148
),
@@ -151,9 +151,11 @@ const ChatSpeechInput: React.FC<Props> = ({
151151

152152
const handleCancel = () => {
153153
stop();
154-
cancelAnimationProgress.value = withTiming(1, {
155-
duration: CANCEL_ANIMATION_DURATION,
156-
});
154+
cancelAnimationProgress.set(
155+
withTiming(1, {
156+
duration: CANCEL_ANIMATION_DURATION,
157+
})
158+
);
157159

158160
setTimeout(onCancel, CANCEL_ANIMATION_DURATION);
159161
};

‎components/chat-screen/Messages.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const Messages = ({
8080
const opacity = useSharedValue(0);
8181
const hasScrolledToEnd = useRef(false);
8282
const animatedContainerStyle = useAnimatedStyle(() => ({
83-
opacity: opacity.value,
83+
opacity: opacity.get(),
8484
}));
8585

8686
// Re-arm the initial scroll when the chat history is cleared (e.g.
@@ -95,7 +95,7 @@ const Messages = ({
9595
hasScrolledToEnd.current
9696
) {
9797
hasScrolledToEnd.current = false;
98-
opacity.value = 0;
98+
opacity.set(0);
9999
}
100100
prevChatLengthRef.current = chatHistory.length;
101101
}, [chatHistory.length, opacity]);
@@ -157,7 +157,7 @@ const Messages = ({
157157
lastUserHeight.current -
158158
lastAssistantHeight.current -
159159
CONTAINER_PADDING;
160-
blankSpace.value = Math.max(0, raw);
160+
blankSpace.set(Math.max(0, raw));
161161
}, [blankSpace]);
162162

163163
useImperativeHandle(
@@ -172,15 +172,15 @@ const Messages = ({
172172
// messages yet).
173173
if (!hasScrolledToEnd.current) {
174174
hasScrolledToEnd.current = true;
175-
opacity.value = 1;
175+
opacity.set(1);
176176
}
177177
lastAssistantHeight.current = 0;
178178
lastUserHeight.current = 0;
179179
streamingActive.current = true;
180180

181181
if (Platform.OS === 'ios') {
182182
if (containerHeight.current > 0) {
183-
blankSpace.value = containerHeight.current;
183+
blankSpace.set(containerHeight.current);
184184
}
185185
}
186186
pendingPinRef.current = true;
@@ -257,7 +257,7 @@ const Messages = ({
257257
snap();
258258
requestAnimationFrame(() => {
259259
snap();
260-
opacity.value = withTiming(1, { duration: 350 });
260+
opacity.set(withTiming(1, { duration: 350 }));
261261
});
262262
}, 16);
263263
});
@@ -275,9 +275,11 @@ const Messages = ({
275275
if (pendingPinRef.current) {
276276
pendingPinRef.current = false;
277277
if (Platform.OS !== 'ios' && containerHeight.current > 0) {
278-
blankSpace.value = withTiming(containerHeight.current, {
279-
duration: 300,
280-
});
278+
blankSpace.set(
279+
withTiming(containerHeight.current, {
280+
duration: 300,
281+
})
282+
);
281283
}
282284
scrollRef.current?.scrollToEnd({ animated: true });
283285
}

0 commit comments

Comments
 (0)