🚧 Add drag down animation
Changes
1 file changed, +28 -7
MODIFY
app/modal.tsx
+28 -7
@@ -1,13 +1,21 @@
1
1
import React, { useRef } from 'react';
2
-import { StyleSheet, TouchableOpacity, Platform } from 'react-native';
2
+import { StyleSheet, TouchableOpacity, Platform, Dimensions } from 'react-native';
3
3
import { ThemedView } from '@/components/themed-view';
4
4
import { router } from 'expo-router';
5
5
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
6
-import { runOnJS } from 'react-native-reanimated';
6
+import Animated, {
7
+ useSharedValue,
8
+ useAnimatedStyle,
9
+ withTiming,
10
+ runOnJS,
11
+} from 'react-native-reanimated';
7
12
import { TaskForm } from '@/components/task-form';
8
13
14
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
15
+
9
16
export default function ModalScreen() {
10
17
const taskFormRef = useRef<{ handleSave: () => void }>(null);
18
+ const translateY = useSharedValue(0);
11
19
12
20
const handleClose = () => {
13
21
taskFormRef.current?.handleSave();
@@ -15,20 +23,33 @@
15
23
};
16
24
17
25
const pan = Gesture.Pan()
18
- .onEnd((e) => {
19
- if (e.translationY > 100) {
20
- runOnJS(handleClose)();
26
+ .onUpdate((event) => {
27
+ translateY.value = Math.max(0, event.translationY);
28
+ })
29
+ .onEnd(() => {
30
+ if (translateY.value > SCREEN_HEIGHT * 0.3) {
31
+ translateY.value = withTiming(SCREEN_HEIGHT, {}, () => {
32
+ runOnJS(handleClose)();
33
+ });
34
+ } else {
35
+ translateY.value = withTiming(0);
21
36
}
22
37
});
23
38
39
+ const animatedStyle = useAnimatedStyle(() => {
40
+ return {
41
+ transform: [{ translateY: translateY.value }],
42
+ };
43
+ });
44
+
24
45
return (
25
46
<GestureDetector gesture={pan}>
26
47
<ThemedView style={styles.container}>
27
48
<TouchableOpacity style={styles.overlay} onPress={handleClose} />
28
- <ThemedView style={styles.modal}>
49
+ <Animated.View style={[styles.modal, animatedStyle]}>
29
50
<ThemedView style={styles.handle} />
30
51
<TaskForm ref={taskFormRef} id="new" onSave={router.back} />
31
- </ThemedView>
52
+ </Animated.View>
32
53
</ThemedView>
33
54
</GestureDetector>
34
55
);