✨ Add scroll feature
Changes
2 files changed, +29 -15
MODIFY
app/modal.tsx
+18 -9
@@ -63,14 +63,16 @@
63
63
onPress={handleClose}
64
64
activeOpacity={1}
65
65
/>
66
- <GestureDetector gesture={pan}>
67
- <Animated.View style={[styles.modal, animatedStyle]}>
68
- <ThemedView style={styles.handle} />
69
- <ThemedView style={{ flex: 1, backgroundColor: colors.background }}>
70
- <TaskForm id={taskId ?? 'new'} onSave={handleClose} />
66
+ <Animated.View style={[styles.modal, animatedStyle]}>
67
+ <GestureDetector gesture={pan}>
68
+ <ThemedView style={styles.handleContainer}>
69
+ <ThemedView style={styles.handle} />
71
70
</ThemedView>
72
- </Animated.View>
73
- </GestureDetector>
71
+ </GestureDetector>
72
+ <ThemedView style={[styles.formContainer, { backgroundColor: colors.background }]}>
73
+ <TaskForm id={taskId ?? 'new'} onSave={handleClose} />
74
+ </ThemedView>
75
+ </Animated.View>
74
76
</ThemedView>
75
77
);
76
78
}
@@ -98,7 +100,14 @@
98
100
borderRadius: 2.5,
99
101
backgroundColor: 'rgba(0,0,0,0.2)',
100
102
alignSelf: 'center',
101
- marginTop: 8,
102
- marginBottom: 16,
103
+ },
104
+ handleContainer: {
105
+ paddingTop: 8,
106
+ paddingBottom: 16,
107
+ alignItems: 'center',
108
+ },
109
+ formContainer: {
110
+ flex: 1,
111
+ overflow: 'hidden',
103
112
},
104
113
});
MODIFY
components/task-form.tsx
+11 -6
@@ -190,7 +190,14 @@
190
190
};
191
191
192
192
return (
193
- <ScrollView style={styles.scrollView}>
193
+ <ScrollView
194
+ style={styles.scrollView}
195
+ contentContainerStyle={styles.scrollViewContent}
196
+ showsVerticalScrollIndicator={true}
197
+ scrollEnabled={true}
198
+ nestedScrollEnabled={true}
199
+ keyboardShouldPersistTaps="handled"
200
+ >
194
201
<ThemedView style={[styles.section, { borderBottomColor: colors.border }]}>
195
202
<ThemedText style={styles.label}>Title *</ThemedText>
196
203
<TextInput
@@ -376,8 +383,6 @@
376
383
</TouchableOpacity>
377
384
</ThemedView>
378
385
)}
379
-
380
- <ThemedView style={styles.bottomPadding} />
381
386
</ScrollView>
382
387
);
383
388
});
@@ -386,6 +391,9 @@
386
391
scrollView: {
387
392
flex: 1,
388
393
},
394
+ scrollViewContent: {
395
+ paddingBottom: 120,
396
+ },
389
397
section: {
390
398
paddingHorizontal: 16,
391
399
paddingVertical: 16,
@@ -513,7 +521,4 @@
513
521
fontSize: 16,
514
522
fontWeight: '600',
515
523
},
516
- bottomPadding: {
517
- height: 40,
518
- },
519
524
});