refactor: Migrate Portofolio & Maps screens to NewWrapper_V2

Phase 3 Migration - Fix keyboard handling issues across 8 screens

Portofolio Screens (5):
- portofolio/[id]/edit-social-media.tsx: ViewWrapper → NewWrapper_V2
- portofolio/[id]/edit-logo.tsx: ViewWrapper → NewWrapper_V2
- portofolio/[id]/edit.tsx: NewWrapper → NewWrapper_V2 + fix React error
- portofolio/[id]/index.tsx: ViewWrapper → NewWrapper_V2
- screens/Portofolio/ScreenPortofolioCreate.tsx: NewWrapper → NewWrapper_V2

Maps Screens (3):
- screens/Maps/ScreenMapsCreate.tsx: NewWrapper → NewWrapper_V2
- screens/Maps/ScreenMapsEdit.tsx: ViewWrapper → NewWrapper_V2
- app/(application)/(user)/maps/[id]/custom-pin.tsx: ViewWrapper → NewWrapper_V2

Changes:
- Add enableKeyboardHandling to all form screens
- Wrap TextInputCustom/SelectCustom/TextAreaCustom with View onStartShouldSetResponder
- Fix React static flag error in portofolio edit loading state
- Update TASK-004 migration task file

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

app/(application)/(user)/maps/[id]/custom-pin.tsx

@@ -8,7 +8,7 @@ import {
   MapCustom,
   Spacing,
   StackCustom,
-  ViewWrapper,
+  NewWrapper_V2,
 } from "@/components";
 import CenterCustom from "@/components/Center/CenterCustom";
 import { router, useLocalSearchParams } from "expo-router";
@@ -30,7 +30,11 @@ export default function MapsCustomPin() {
   );
   return (
     <>
-      <ViewWrapper footerComponent={buttonFooter}>
+      <NewWrapper_V2
+        enableKeyboardHandling
+        keyboardScrollOffset={100}
+        footerComponent={buttonFooter}
+      >
         <StackCustom>
           <InformationBox text="Pin map akan secara otomatis menampilkan logo pada porotofolio ini, jika anda ingin melakukan custom silahkan upload logo pin baru anda." />
           <CenterCustom>
@@ -49,7 +53,7 @@ export default function MapsCustomPin() {
           </BaseBox>
           <Spacing />
         </StackCustom>
-      </ViewWrapper>
+      </NewWrapper_V2>
     </>
   );
 }

app/(application)/(user)/portofolio/[id]/edit-logo.tsx

@@ -3,7 +3,7 @@ import {
     BoxButtonOnFooter,
     ButtonCenteredOnly,
     ButtonCustom,
-    ViewWrapper
+    NewWrapper_V2
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -126,7 +126,10 @@ export default function PortofolioEditLogo() {
 
   return (
     <>
-      <ViewWrapper footerComponent={buttonFooter}>
+      <NewWrapper_V2
+        contentPaddingHorizontal={16}
+        footerComponent={buttonFooter}
+      >
         <BaseBox
           style={{
             alignItems: "center",
@@ -146,7 +149,7 @@ export default function PortofolioEditLogo() {
         >
           Upload
         </ButtonCenteredOnly>
-      </ViewWrapper>
+      </NewWrapper_V2>
     </>
   );
 }

app/(application)/(user)/portofolio/[id]/edit-social-media.tsx

@@ -1,8 +1,8 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
+  NewWrapper_V2,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import {
   apiGetOnePortofolio,
@@ -10,6 +10,7 @@ import {
 } from "@/service/api-client/api-portofolio";
 import { useLocalSearchParams, router } from "expo-router";
 import { useEffect, useState } from "react";
+import { View } from "react-native";
 import Toast from "react-native-toast-message";
 
 export default function PortofolioEditSocialMedia() {
@@ -91,38 +92,52 @@ export default function PortofolioEditSocialMedia() {
 
   return (
     <>
-      <ViewWrapper footerComponent={buttonFooter}>
+      <NewWrapper_V2
+        enableKeyboardHandling
+        keyboardScrollOffset={100}
+        footerComponent={buttonFooter}
+      >
+        <View onStartShouldSetResponder={() => true}>
           <TextInputCustom
             value={data.tiktok}
             onChangeText={(value) => setData({ ...data, tiktok: value })}
             label="Tiktok"
             placeholder="Masukkan tiktok"
           />
+        </View>
+        <View onStartShouldSetResponder={() => true}>
           <TextInputCustom
             value={data.instagram}
             onChangeText={(value) => setData({ ...data, instagram: value })}
             label="Instagram"
             placeholder="Masukkan instagram"
           />
+        </View>
+        <View onStartShouldSetResponder={() => true}>
           <TextInputCustom
             value={data.facebook}
             onChangeText={(value) => setData({ ...data, facebook: value })}
             label="Facebook"
             placeholder="Masukkan facebook"
           />
+        </View>
+        <View onStartShouldSetResponder={() => true}>
           <TextInputCustom
             value={data.twitter}
             onChangeText={(value) => setData({ ...data, twitter: value })}
             label="Twitter"
             placeholder="Masukkan twitter"
           />
+        </View>
+        <View onStartShouldSetResponder={() => true}>
           <TextInputCustom
             value={data.youtube}
             onChangeText={(value) => setData({ ...data, youtube: value })}
             label="Youtube"
             placeholder="Masukkan youtube"
           />
-      </ViewWrapper>
+        </View>
+      </NewWrapper_V2>
     </>
   );
 }

app/(application)/(user)/portofolio/[id]/edit.tsx

@@ -4,7 +4,7 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   CenterCustom,
-  NewWrapper,
+  NewWrapper_V2,
   PhoneInputCustom,
   SelectCustom,
   Spacing,
@@ -16,7 +16,11 @@ import {
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
-import { DEFAULT_COUNTRY, type CountryData, COUNTRIES } from "@/constants/countries";
+import {
+  DEFAULT_COUNTRY,
+  type CountryData,
+  COUNTRIES,
+} from "@/constants/countries";
 import {
   apiMasterBidangBisnis,
   apiMasterSubBidangBisnis,
@@ -61,7 +65,8 @@ export default function PortofolioEdit() {
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<any>({});
   const [phoneNumber, setPhoneNumber] = useState<string>("");
-  const [selectedCountry, setSelectedCountry] = useState<CountryData>(DEFAULT_COUNTRY);
+  const [selectedCountry, setSelectedCountry] =
+    useState<CountryData>(DEFAULT_COUNTRY);
   const [bidangBisnis, setBidangBisnis] = useState<
     IMasterBidangBisnis[] | null
   >(null);
@@ -363,20 +368,26 @@ export default function PortofolioEdit() {
     </BoxButtonOnFooter>
   );
 
-  if (!bidangBisnis || !subBidangBisnis) {
+  // if (!bidangBisnis || !subBidangBisnis) {
-    return (
+  //   return (
-      <>
+  //     <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-        <NewWrapper>
+  //       <ListSkeletonComponent height={80} />
-          <ListSkeletonComponent height={80} />
+  //     </View>
-        </NewWrapper>
+  //   );
-      </>
+  // }
-    );
-  }
 
   return (
     <>
-      <NewWrapper footerComponent={buttonUpdate}>
+      <NewWrapper_V2
+        enableKeyboardHandling
+        keyboardScrollOffset={100}
+        footerComponent={buttonUpdate}
+      >
+        {!bidangBisnis || !subBidangBisnis ? (
+          <ListSkeletonComponent height={80} />
+        ) : (
           <StackCustom gap={"xs"}>
+            <View onStartShouldSetResponder={() => true}>
               <TextInputCustom
                 required
                 label="Nama Bisnis"
@@ -386,7 +397,9 @@ export default function PortofolioEdit() {
                   setData({ ...data, namaBisnis: value })
                 }
               />
+            </View>
 
+            <View onStartShouldSetResponder={() => true}>
               <SelectCustom
                 label="Bidang Usaha"
                 required
@@ -399,6 +412,7 @@ export default function PortofolioEdit() {
                   handleBidangBisnisChange(value);
                 }}
               />
+            </View>
 
             {listSubBidangSelected.map((item, index) => {
               // Filter data untuk select sub bidang, menghilangkan yang sudah dipilih kecuali untuk item ini sendiri
@@ -422,8 +436,8 @@ export default function PortofolioEdit() {
                 }));
 
               return (
+                <View onStartShouldSetResponder={() => true} key={index}>
                   <SelectCustom
-                key={index}
                     label="Sub Bidang Usaha"
                     required
                     data={availableSubBidangOptions}
@@ -432,6 +446,7 @@ export default function PortofolioEdit() {
                       handleSubBidangChange(value, index);
                     }}
                   />
+                </View>
               );
             })}
 
@@ -491,6 +506,7 @@ export default function PortofolioEdit() {
             </View>
             <Spacing />
 
+            <View onStartShouldSetResponder={() => true}>
               <TextInputCustom
                 required
                 label="Alamat Bisnis"
@@ -500,7 +516,9 @@ export default function PortofolioEdit() {
                   setData({ ...data, alamatKantor: value })
                 }
               />
+            </View>
 
+            <View onStartShouldSetResponder={() => true}>
               <TextAreaCustom
                 label="Deskripsi Bisnis"
                 placeholder="Masukkan deskripsi bisnis"
@@ -515,9 +533,11 @@ export default function PortofolioEdit() {
                 showCount
                 maxLength={1000}
               />
+            </View>
             <Spacing />
           </StackCustom>
-      </NewWrapper>
+        )}
+      </NewWrapper_V2>
     </>
   );
 }

app/(application)/(user)/portofolio/[id]/index.tsx

@@ -4,6 +4,7 @@ import {
   DrawerCustom,
   DummyLandscapeImage,
   LoaderCustom,
+  NewWrapper_V2,
   Spacing,
   StackCustom,
   TextCustom,
@@ -12,7 +13,6 @@ import AppHeader from "@/components/_ShareComponent/AppHeader";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
@@ -92,7 +92,7 @@ export default function Portofolio() {
           ),
         }}
       />
-      <ViewWrapper>
+      <NewWrapper_V2>
         {!data || !profileId ? (
             <StackCustom>
             <CustomSkeleton height={400} />
@@ -125,7 +125,7 @@ export default function Portofolio() {
             <Spacing />
           </StackCustom>
         )}
-      </ViewWrapper>
+      </NewWrapper_V2>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom

screens/Maps/ScreenMapsCreate.tsx

@@ -1,4 +1,3 @@
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import {
   BoxButtonOnFooter,
   ButtonCustom,
@@ -8,6 +7,7 @@ import {
   TextInputCustom,
   LandscapeFrameUploaded,
   ButtonCenteredOnly,
+  NewWrapper_V2,
 } from "@/components";
 import { MapSelectedPlatform } from "@/components/Map/MapSelectedPlatform";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -18,6 +18,7 @@ import { IFileData } from "@/utils/pickFile";
 import pickFile from "@/utils/pickFile";
 import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
+import { View } from "react-native";
 import { LatLng } from "react-native-maps";
 import Toast from "react-native-toast-message";
 
@@ -142,10 +143,14 @@ export function Maps_ScreenMapsCreate() {
   );
 
   /**
-   * Render screen dengan NewWrapper
+   * Render screen dengan NewWrapper_V2
    */
   return (
-    <NewWrapper footerComponent={buttonFooter}>
+    <NewWrapper_V2
+      enableKeyboardHandling
+      keyboardScrollOffset={100}
+      footerComponent={buttonFooter}
+    >
       <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
 
       <BaseBox>
@@ -160,6 +165,7 @@ export function Maps_ScreenMapsCreate() {
         />
       </BaseBox>
 
+      <View onStartShouldSetResponder={() => true}>
         <TextInputCustom
           required
           label="Nama Pin"
@@ -167,6 +173,7 @@ export function Maps_ScreenMapsCreate() {
           value={name}
           onChangeText={setName}
         />
+      </View>
 
       <Spacing height={50} />
 
@@ -179,7 +186,7 @@ export function Maps_ScreenMapsCreate() {
       </ButtonCenteredOnly>
 
       <Spacing height={50} />
-    </NewWrapper>
+    </NewWrapper_V2>
   );
 }
 

screens/Maps/ScreenMapsEdit.tsx

@@ -7,7 +7,7 @@ import {
   LandscapeFrameUploaded,
   Spacing,
   TextInputCustom,
-  ViewWrapper,
+  NewWrapper_V2,
 } from "@/components";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MapSelectedPlatform } from "@/components/Map/MapSelectedPlatform";
@@ -19,6 +19,7 @@ import { uploadFileService } from "@/service/upload-service";
 import pickFile, { IFileData } from "@/utils/pickFile";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useCallback, useState } from "react";
+import { View } from "react-native";
 import { LatLng } from "react-native-maps";
 import Toast from "react-native-toast-message";
 
@@ -166,7 +167,11 @@ export function Maps_ScreenMapsEdit() {
       : defaultRegion;
 
   return (
-    <ViewWrapper footerComponent={buttonFooter}>
+    <NewWrapper_V2
+      enableKeyboardHandling
+      keyboardScrollOffset={100}
+      footerComponent={buttonFooter}
+    >
       <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
 
       {/* <MapSelectedPlatform
@@ -191,6 +196,7 @@ export function Maps_ScreenMapsEdit() {
         />
       )}
 
+      <View onStartShouldSetResponder={() => true}>
         <TextInputCustom
           required
           label="Nama Pin"
@@ -198,6 +204,7 @@ export function Maps_ScreenMapsEdit() {
           value={data?.namePin}
           onChangeText={(value) => setData({ ...data, namePin: value })}
         />
+      </View>
 
       <Spacing />
 
@@ -223,6 +230,6 @@ export function Maps_ScreenMapsEdit() {
         Upload
       </ButtonCenteredOnly>
       <Spacing height={50} />
-    </ViewWrapper>
+    </NewWrapper_V2>
   );
 }

screens/Portofolio/ScreenPortofolioCreate.tsx

@@ -4,7 +4,7 @@ import {
   ButtonCenteredOnly,
   CenterCustom,
   InformationBox,
-  NewWrapper,
+  NewWrapper_V2,
   PhoneInputCustom,
   SelectCustom,
   Spacing,
@@ -142,7 +142,9 @@ export function ScreenPortofolioCreate() {
   };
 
   return (
-    <NewWrapper
+    <NewWrapper_V2
+      enableKeyboardHandling
+      keyboardScrollOffset={100}
       footerComponent={
         <Portofolio_ButtonCreate
           id={id as string}
@@ -158,13 +160,16 @@ export function ScreenPortofolioCreate() {
       <StackCustom gap="xs">
         <InformationBox text="Lengkapi data bisnis anda." />
 
+        <View onStartShouldSetResponder={() => true}>
           <TextInputCustom
             required
             label="Nama Bisnis"
             placeholder="Masukkan nama bisnis"
             onChangeText={(value: any) => setData({ ...data, namaBisnis: value })}
           />
+        </View>
 
+        <View onStartShouldSetResponder={() => true}>
           <SelectCustom
             label="Bidang Usaha"
             required
@@ -184,10 +189,11 @@ export function ScreenPortofolioCreate() {
               handlerSelectedSubBidang({ id: value as string });
             }}
           />
+        </View>
 
         {listSubBidangSelected.map((item, index) => (
+          <View onStartShouldSetResponder={() => true} key={index}>
             <SelectCustom
-            key={index}
               disabled={data.masterBidangBisnisId === ""}
               label="Sub Bidang Usaha"
               required
@@ -209,6 +215,7 @@ export function ScreenPortofolioCreate() {
                 setListSubBidangSelected(list);
               }}
             />
+          </View>
         ))}
 
         <CenterCustom>
@@ -272,6 +279,7 @@ export function ScreenPortofolioCreate() {
 
         <Spacing />
 
+        <View onStartShouldSetResponder={() => true}>
           <TextInputCustom
             required
             label="Alamat Bisnis"
@@ -280,7 +288,9 @@ export function ScreenPortofolioCreate() {
               setData({ ...data, alamatKantor: value })
             }
           />
+        </View>
 
+        <View onStartShouldSetResponder={() => true}>
           <TextAreaCustom
             label="Deskripsi Bisnis"
             placeholder="Masukkan deskripsi bisnis"
@@ -293,6 +303,7 @@ export function ScreenPortofolioCreate() {
             showCount
             maxLength={1000}
           />
+        </View>
 
         <Spacing />
 
@@ -322,6 +333,7 @@ export function ScreenPortofolioCreate() {
 
         <InformationBox text="Isi hanya pada sosial media yang anda miliki." />
 
+        <View onStartShouldSetResponder={() => true}>
           <TextInputCustom
             label="Tiktok"
             placeholder="Masukkan username tiktok"
@@ -329,7 +341,9 @@ export function ScreenPortofolioCreate() {
               setDataMedsos({ ...dataMedsos, tiktok: value })
             }
           />
+        </View>
 
+        <View onStartShouldSetResponder={() => true}>
           <TextInputCustom
             label="Facebook"
             placeholder="Masukkan username facebook"
@@ -337,7 +351,9 @@ export function ScreenPortofolioCreate() {
               setDataMedsos({ ...dataMedsos, facebook: value })
             }
           />
+        </View>
 
+        <View onStartShouldSetResponder={() => true}>
           <TextInputCustom
             label="Instagram"
             placeholder="Masukkan username instagram"
@@ -345,7 +361,9 @@ export function ScreenPortofolioCreate() {
               setDataMedsos({ ...dataMedsos, instagram: value })
             }
           />
+        </View>
 
+        <View onStartShouldSetResponder={() => true}>
           <TextInputCustom
             label="Twitter"
             placeholder="Masukkan username twitter"
@@ -353,7 +371,9 @@ export function ScreenPortofolioCreate() {
               setDataMedsos({ ...dataMedsos, twitter: value })
             }
           />
+        </View>
 
+        <View onStartShouldSetResponder={() => true}>
           <TextInputCustom
             label="Youtube"
             placeholder="Masukkan username youtube"
@@ -361,7 +381,8 @@ export function ScreenPortofolioCreate() {
               setDataMedsos({ ...dataMedsos, youtube: value })
             }
           />
+        </View>
       </StackCustom>
-    </NewWrapper>
+    </NewWrapper_V2>
   );
 }

tasks/TASK-004-newwrapper-migration.md

@@ -15,29 +15,47 @@ Migrasi bertahap dari `NewWrapper` ke `NewWrapper_V2` untuk memperbaiki bug keyb
 
 ## 📊 Migration Priority
 
-### **Phase 1: Job Screens** (Week 1) - CURRENT
+### **Phase 1: Job Screens** (Week 1) ✅ COMPLETED
 - [x] `screens/Job/ScreenJobCreate2.tsx` → Already using keyboard handling
-- [ ] `screens/Job/ScreenJobCreate.tsx` → Migrate to NewWrapper_V2
+- [x] `screens/Job/ScreenJobCreate.tsx` → Migrate to NewWrapper_V2
-- [ ] `screens/Job/ScreenJobEdit.tsx` → Migrate to NewWrapper_V2
+- [x] `screens/Job/ScreenJobEdit.tsx` → Migrate to NewWrapper_V2
-- [ ] Delete test files after migration
+- [x] Delete test files after migration
 
-### **Phase 2: Event & Profile Screens** (Week 2)
+### **Phase 2: Profile Screens** (Week 2) ✅ COMPLETED
+- [x] `app/(application)/(user)/profile/create.tsx` → Migrate to NewWrapper_V2
+- [x] `app/(application)/(user)/profile/[id]/edit.tsx` → Migrate to NewWrapper_V2
+- [x] `app/(application)/(user)/profile/[id]/index.tsx` → Migrate to NewWrapper_V2
+- [x] `app/(application)/(user)/profile/[id]/detail-blocked.tsx` → Migrate to NewWrapper_V2
+- [x] `app/(application)/(user)/profile/[id]/blocked-list.tsx` → Migrate to NewWrapper_V2
+- [x] `app/(application)/(user)/profile/[id]/update-photo.tsx` → Migrate to NewWrapper_V2
+- [x] `app/(application)/(user)/profile/[id]/update-background.tsx` → Migrate to NewWrapper_V2
+
+### **Phase 3: Portofolio & Maps Screens** (Week 3) - NEXT
+- [ ] `app/(application)/(user)/portofolio/[id]/create.tsx`
+- [ ] `app/(application)/(user)/portofolio/[id]/edit.tsx`
+- [ ] `app/(application)/(user)/portofolio/[id]/edit-logo.tsx`
+- [ ] `app/(application)/(user)/portofolio/[id]/edit-social-media.tsx`
+- [ ] `app/(application)/(user)/portofolio/[id]/index.tsx`
+- [ ] `app/(application)/(user)/portofolio/[id]/list.tsx`
+- [ ] `screens/Maps/ScreenMapsCreate.tsx`
+- [ ] `screens/Maps/ScreenMapsEdit.tsx`
+- [ ] `app/(application)/(user)/maps/[id]/custom-pin.tsx`
+
+### **Phase 4: Event Screens** (Week 4)
 - [ ] `screens/Event/ScreenEventCreate.tsx`
 - [ ] `screens/Event/ScreenEventEdit.tsx`
-- [ ] `screens/Profile/ScreenProfileCreate.tsx`
-- [ ] `screens/Profile/ScreenProfileEdit.tsx`
 
-### **Phase 3: Other Form Screens** (Week 3)
+### **Phase 5: Other Form Screens** (Week 5)
 - [ ] `screens/Donation/` - All create/edit screens
 - [ ] `screens/Investment/` - All create/edit screens
 - [ ] `screens/Voting/` - All create/edit screens
 
-### **Phase 4: Complex Screens** (Week 4)
+### **Phase 6: Complex Screens** (Week 6)
 - [ ] `screens/Forum/` - Create/edit with rich text
 - [ ] `screens/Collaboration/` - Complex forms
 - [ ] Other complex forms
 
-### **Phase 5: Cleanup** (Week 5)
+### **Phase 7: Cleanup** (Week 7)
 - [ ] Remove old `NewWrapper.tsx` (or deprecate)
 - [ ] Rename `NewWrapper_V2.tsx` → `NewWrapper.tsx`
 - [ ] Update documentation
@@ -214,10 +232,12 @@ import { View } from "react-native";
 | Phase | Screens | Status | Completed Date |
 |-------|---------|--------|----------------|
 | **Phase 1: Job** | 6 screens | ✅ COMPLETED | 2026-04-01 |
-| **Phase 2: Event & Profile** | 4 screens | ⏳ Pending | - |
+| **Phase 2: Profile** | 7 screens | ✅ COMPLETED | 2026-04-04 |
-| **Phase 3: Forms** | 6-8 screens | ⏳ Pending | - |
+| **Phase 3: Portofolio & Maps** | 9 screens | ⏳ Pending | - |
-| **Phase 4: Complex** | 4-6 screens | ⏳ Pending | - |
+| **Phase 4: Event** | 2 screens | ⏳ Pending | - |
-| **Phase 5: Cleanup** | Cleanup | ⏳ Pending | - |
+| **Phase 5: Forms** | 6-8 screens | ⏳ Pending | - |
+| **Phase 6: Complex** | 4-6 screens | ⏳ Pending | - |
+| **Phase 7: Cleanup** | Cleanup | ⏳ Pending | - |
 
 ---
 
@@ -256,30 +276,63 @@ import { View } from "react-native";
 
 ---
 
+## ✅ Phase 2: COMPLETED!
+
+**Migrated Screens:**
+1. ✅ `app/(application)/(user)/profile/create.tsx` - Form with keyboard handling
+2. ✅ `app/(application)/(user)/profile/[id]/edit.tsx` - Form with keyboard handling
+3. ✅ `app/(application)/(user)/profile/[id]/index.tsx` - Profile detail (list, no keyboard handling)
+4. ✅ `app/(application)/(user)/profile/[id]/detail-blocked.tsx` - Blocked detail with keyboard handling
+5. ✅ `app/(application)/(user)/profile/[id]/blocked-list.tsx` - Blocked list (list, no keyboard handling)
+6. ✅ `app/(application)/(user)/profile/[id]/update-photo.tsx` - Photo update screen
+7. ✅ `app/(application)/(user)/profile/[id]/update-background.tsx` - Background update screen
+
+**Changes Applied:**
+- Replaced `ViewWrapper`/`NewWrapper` → `NewWrapper_V2`
+- Added `enableKeyboardHandling` prop to form screens
+- Added `keyboardScrollOffset={100}` to form screens
+- Wrapped all `TextInputCustom`/`SelectCustom` with `<View onStartShouldSetResponder={() => true}>`
+- Fixed keyboard handling issues (footer lift, white area, input cutoff)
+
+**Commits:**
+- `3382c16` - refactor: Migrate Profile screens to NewWrapper_V2
+- `76759cc` - chore: Update layout headers and iOS build config
+
+**Total:** 7 screens migrated, 2 commits pushed to branch `qc/4-apr-26`
+
+---
+
 ## 🚀 Current Status
 
 **Status**: 🟡 IN PROGRESS
-**Current Phase**: Phase 1 - Job Screens
+**Current Phase**: Phase 2 - Profile Screens ✅ COMPLETED
+**Next Phase**: Phase 3 - Portofolio & Maps Screens
 **Started**: 2026-04-01
-**ETA**: 2026-04-07 (Phase 1 complete)
+**Last Updated**: 2026-04-04
+**Overall Progress**: 13/34+ screens completed (38%)
 
 ---
 
 ## 📞 Next Actions
 
 1. **Immediate** (Today):
-   - [ ] Migrate `ScreenJobCreate.tsx`
+   - [ ] Migrate `app/(application)/(user)/portofolio/[id]/create.tsx`
-   - [ ] Migrate `ScreenJobEdit.tsx`
+   - [ ] Migrate `app/(application)/(user)/portofolio/[id]/edit.tsx`
-   - [ ] Test both screens
+   - [ ] Migrate `app/(application)/(user)/portofolio/[id]/edit-logo.tsx`
+   - [ ] Migrate `app/(application)/(user)/portofolio/[id]/edit-social-media.tsx`
+   - [ ] Migrate `screens/Maps/ScreenMapsCreate.tsx`
+   - [ ] Migrate `screens/Maps/ScreenMapsEdit.tsx`
+   - [ ] Migrate `app/(application)/(user)/maps/[id]/custom-pin.tsx`
+   - [ ] Test all Portofolio & Maps screens
 
 2. **This Week**:
-   - [ ] Delete test files
+   - [ ] Complete Phase 3 (Portofolio & Maps screens)
    - [ ] Document any issues
-   - [ ] Prepare Phase 2
+   - [ ] Prepare Phase 4
 
 3. **Next Week**:
-   - [ ] Start Phase 2 (Event & Profile)
+   - [ ] Start Phase 4 (Event screens)
-   - [ ] Review Phase 1 results
+   - [ ] Review Phase 2-3 results
    - [ ] Adjust migration guide if needed
 
 ---
@@ -297,8 +350,13 @@ import { View } from "react-native";
 - `tasks/TASK-004-newwrapper-migration.md` (This file)
 
 **Screens to Migrate:**
-- `screens/Job/ScreenJobCreate.tsx`
+- `app/(application)/(user)/portofolio/[id]/create.tsx` (Phase 3)
-- `screens/Job/ScreenJobEdit.tsx`
+- `app/(application)/(user)/portofolio/[id]/edit.tsx` (Phase 3)
+- `app/(application)/(user)/portofolio/[id]/edit-logo.tsx` (Phase 3)
+- `app/(application)/(user)/portofolio/[id]/edit-social-media.tsx` (Phase 3)
+- `screens/Maps/ScreenMapsCreate.tsx` (Phase 3)
+- `screens/Maps/ScreenMapsEdit.tsx` (Phase 3)
+- `app/(application)/(user)/maps/[id]/custom-pin.tsx` (Phase 3)
 - (More in subsequent phases)
 
 ---
@@ -322,12 +380,23 @@ import { View } from "react-native";
 
 ## ✅ Success Criteria
 
-**Phase 1 Complete when:**
+**Phase 2 Complete when:** ✅
-- [ ] Job Create migrated
+- [x] Profile Create migrated
-- [ ] Job Edit migrated
+- [x] Profile Edit migrated
-- [ ] Both screens tested on iOS & Android
+- [x] Profile detail screens migrated
+- [x] All screens tested
+- [x] Commits pushed to branch
+
+**Phase 3 Complete when:**
+- [ ] Portofolio Create migrated
+- [ ] Portofolio Edit migrated
+- [ ] Portofolio edit-logo migrated
+- [ ] Portofolio edit-social-media migrated
+- [ ] Maps Create migrated
+- [ ] Maps Edit migrated
+- [ ] Maps custom-pin migrated
+- [ ] All Portofolio & Maps screens tested on iOS & Android
 - [ ] No critical bugs
-- [ ] Test files deleted
 - [ ] Documentation updated
 
 **Overall Migration Complete when:**
@@ -339,6 +408,6 @@ import { View } from "react-native";
 
 ---
 
-**Last Updated**: 2026-04-01
+**Last Updated**: 2026-04-04
 **Created by**: AI Assistant
-**Status**: 🟡 IN PROGRESS
+**Status**: 🟡 IN PROGRESS - Phase 2 Complete, Ready for Phase 3 (Portofolio & Maps)