💄 Make drag down cleaner
Changes
1 file changed, +19 -7
MODIFY
app/modal.tsx
+19 -7
@@ -1,5 +1,5 @@
1
1
import React, { useRef } from 'react';
2
-import { StyleSheet, TouchableOpacity, Platform, Dimensions } from 'react-native';
2
+import { StyleSheet, TouchableOpacity, Platform, Dimensions, Keyboard } 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';
@@ -26,7 +26,14 @@
26
26
router.dismiss();
27
27
};
28
28
29
+ const dismissKeyboard = () => {
30
+ Keyboard.dismiss();
31
+ };
32
+
29
33
const pan = Gesture.Pan()
34
+ .onStart(() => {
35
+ runOnJS(dismissKeyboard)();
36
+ })
30
37
.onUpdate((event) => {
31
38
translateY.value = Math.max(0, event.translationY);
32
39
})
@@ -47,17 +54,21 @@
47
54
});
48
55
49
56
return (
50
- <GestureDetector gesture={pan}>
51
- <ThemedView style={styles.container}>
52
- <TouchableOpacity style={styles.overlay} onPress={handleClose} />
57
+ <ThemedView style={styles.container}>
58
+ <TouchableOpacity
59
+ style={styles.overlay}
60
+ onPress={handleClose}
61
+ activeOpacity={1}
62
+ />
63
+ <GestureDetector gesture={pan}>
53
64
<Animated.View style={[styles.modal, animatedStyle]}>
54
65
<ThemedView style={styles.handle} />
55
66
<ThemedView style={{ flex: 1, backgroundColor: colors.background }}>
56
67
<TaskForm ref={taskFormRef} id="new" onSave={() => router.dismiss()} />
57
68
</ThemedView>
58
69
</Animated.View>
59
- </ThemedView>
60
- </GestureDetector>
70
+ </GestureDetector>
71
+ </ThemedView>
61
72
);
62
73
}
63
74
@@ -65,10 +76,11 @@
65
76
container: {
66
77
flex: 1,
67
78
justifyContent: 'flex-end',
79
+ backgroundColor: 'transparent',
68
80
},
69
81
overlay: {
70
82
...StyleSheet.absoluteFillObject,
71
- backgroundColor: 'rgba(0,0,0,0.5)',
83
+ backgroundColor: 'rgba(0,0,0,0.4)',
72
84
},
73
85
modal: {
74
86
height: '90%',