update CreateOrHaulModal.tsx

components/tripInfo/modal/CreateOrUpdateHaulModal.tsx

@@ -5,7 +5,9 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import React from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import {
+  KeyboardAvoidingView,
   Modal,
+  Platform,
   ScrollView,
   Text,
   TextInput,
@@ -229,14 +231,16 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
               const quantity = watch(`fish.${index}.quantity`);
               const unit = watch(`fish.${index}.unit`);
 
-              return fishName ? (
+              return (
                 <View style={styles.fishCardHeaderContent}>
-                  <Text style={styles.fishCardTitle}>{fishName}:</Text>
+                  <Text style={styles.fishCardTitle}>
+                    {fishName || "Chọn loài cá"}:
+                  </Text>
                   <Text style={styles.fishCardSubtitle}>
-                    {quantity} {unit}
+                    {fishName ? `${quantity} ${unit}` : "---"}
                   </Text>
                 </View>
-              ) : null;
+              );
             })()}
           </View>
         )}
@@ -359,6 +363,11 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
       animationType="slide"
       presentationStyle="pageSheet"
       onRequestClose={onClose}
+    >
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        keyboardVerticalOffset={60}
       >
         <View style={styles.container}>
           {/* Header */}
@@ -429,6 +438,7 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
             )}
           </ScrollView>
         </View>
+      </KeyboardAvoidingView>
     </Modal>
   );
 };

components/tripInfo/modal/style/CreateOrUpdateHaulModal.styles.ts

@@ -78,8 +78,8 @@ const styles = StyleSheet.create({
     color: "#000",
   },
   fishCardSubtitle: {
-    fontSize: 14,
+    fontSize: 15,
-    color: "#666",
+    color: "#ff6600",
     fontWeight: "500",
   },
   fieldGroup: {
@@ -132,19 +132,22 @@ const styles = StyleSheet.create({
     fontWeight: "600",
   },
   addButton: {
-    backgroundColor: "#28a745",
+    backgroundColor: "#007AFF",
-    borderRadius: 8,
+    borderRadius: 12,
-    paddingHorizontal: 20,
+    padding: 16,
-    paddingVertical: 12,
+    marginBottom: 12,
-    marginTop: 16,
     justifyContent: "center",
     alignItems: "center",
-    alignSelf: "flex-start",
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 2,
   },
   addButtonText: {
-    color: "#fff",
+    fontSize: 16,
-    fontSize: 14,
     fontWeight: "600",
+    color: "#fff",
   },
   footerSection: {
     paddingHorizontal: 16,