💄 Make drop nice
Changes
1 file changed, +11 -5
MODIFY
app/modal.tsx
+11 -5
@@ -10,16 +10,20 @@
10
10
runOnJS,
11
11
} from 'react-native-reanimated';
12
12
import { TaskForm } from '@/components/task-form';
13
+import { useColorScheme } from '@/hooks/use-color-scheme';
14
+import { Colors } from '@/constants/theme';
13
15
14
16
const { height: SCREEN_HEIGHT } = Dimensions.get('window');
15
17
16
18
export default function ModalScreen() {
17
19
const taskFormRef = useRef<{ handleSave: () => void }>(null);
18
20
const translateY = useSharedValue(0);
21
+ const colorScheme = useColorScheme() ?? 'light';
22
+ const colors = Colors[colorScheme];
19
23
20
24
const handleClose = () => {
21
25
taskFormRef.current?.handleSave();
22
- router.back();
26
+ router.dismiss();
23
27
};
24
28
25
29
const pan = Gesture.Pan()
@@ -48,7 +52,9 @@
48
52
<TouchableOpacity style={styles.overlay} onPress={handleClose} />
49
53
<Animated.View style={[styles.modal, animatedStyle]}>
50
54
<ThemedView style={styles.handle} />
51
- <TaskForm ref={taskFormRef} id="new" onSave={router.back} />
55
+ <ThemedView style={{ flex: 1, backgroundColor: colors.background }}>
56
+ <TaskForm ref={taskFormRef} id="new" onSave={() => router.dismiss()} />
57
+ </ThemedView>
52
58
</Animated.View>
53
59
</ThemedView>
54
60
</GestureDetector>
@@ -66,10 +72,10 @@
66
72
},
67
73
modal: {
68
74
height: '90%',
69
- borderTopLeftRadius: 20,
70
- borderTopRightRadius: 20,
71
- overflow: 'hidden',
75
+ borderTopLeftRadius: 30,
76
+ borderTopRightRadius: 30,
72
77
paddingTop: 16,
78
+ backgroundColor: 'white',
73
79
},
74
80
handle: {
75
81
width: 40,