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>
2026-04-06 11:20:20 +08:00
parent 76759cc547
commit 6b786d7983
9 changed files with 504 additions and 358 deletions
--- a/app/(application)/(user)/maps/[id]/custom-pin.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/(user)/portofolio/[id]/edit-logo.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/(user)/portofolio/[id]/edit-social-media.tsx
+++ b/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}>
-        <TextInputCustom
-          value={data.tiktok}
-          onChangeText={(value) => setData({ ...data, tiktok: value })}
-          label="Tiktok"
-          placeholder="Masukkan tiktok"
-        />
-        <TextInputCustom
-          value={data.instagram}
-          onChangeText={(value) => setData({ ...data, instagram: value })}
-          label="Instagram"
-          placeholder="Masukkan instagram"
-        />
-        <TextInputCustom
-          value={data.facebook}
-          onChangeText={(value) => setData({ ...data, facebook: value })}
-          label="Facebook"
-          placeholder="Masukkan facebook"
-        />
-        <TextInputCustom
-          value={data.twitter}
-          onChangeText={(value) => setData({ ...data, twitter: value })}
-          label="Twitter"
-          placeholder="Masukkan twitter"
-        />
-        <TextInputCustom
-          value={data.youtube}
-          onChangeText={(value) => setData({ ...data, youtube: value })}
-          label="Youtube"
-          placeholder="Masukkan youtube"
-        />
-      </ViewWrapper>
+      <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"
+          />
+        </View>
+      </NewWrapper_V2>
    </>
  );
 }
--- a/app/(application)/(user)/portofolio/[id]/edit.tsx
+++ b/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);
@@ -75,38 +80,38 @@ export default function PortofolioEdit() {

  function handlePhoneChange(phone: string) {
    setPhoneNumber(phone);
-    
+
    // Format phone number for API
    const callingCode = selectedCountry.callingCode;
    let fixNumber = phone.replace(/\s+/g, "").replace(/^0+/, "");
-    
+
    // Remove country code if already present
    if (fixNumber.startsWith(callingCode)) {
      fixNumber = fixNumber.substring(callingCode.length);
    }
-    
+
    // Remove leading zero
    fixNumber = fixNumber.replace(/^0+/, "");
-    
+
    const realNumber = callingCode + fixNumber;
    setData({ ...data, tlpn: realNumber });
  }

  function handleCountryChange(country: CountryData) {
    setSelectedCountry(country);
-    
+
    // Re-format with new country code
    const callingCode = country.callingCode;
    let fixNumber = phoneNumber.replace(/\s+/g, "").replace(/^0+/, "");
-    
+
    // Remove country code if already present
    if (fixNumber.startsWith(callingCode)) {
      fixNumber = fixNumber.substring(callingCode.length);
    }
-    
+
    // Remove leading zero
    fixNumber = fixNumber.replace(/^0+/, "");
-    
+
    const realNumber = callingCode + fixNumber;
    setData({ ...data, tlpn: realNumber });
  }
@@ -157,7 +162,7 @@ export default function PortofolioEdit() {
      const fullNumber = response.data.tlpn;
      let displayNumber = fullNumber;
      let detectedCountry = DEFAULT_COUNTRY;
-      
+
      // Try to detect country from calling code
      for (const country of COUNTRIES) {
        if (fullNumber.startsWith(country.callingCode)) {
@@ -166,12 +171,12 @@ export default function PortofolioEdit() {
          break;
        }
      }
-      
+
      setSelectedCountry(detectedCountry);
-      
+
      // Remove leading zero if present
      displayNumber = displayNumber.replace(/^0+/, "");
-      
+
      setPhoneNumber(displayNumber);
      setData({ ...response.data, tlpn: displayNumber });

@@ -363,161 +368,176 @@ export default function PortofolioEdit() {
    </BoxButtonOnFooter>
  );

-  if (!bidangBisnis || !subBidangBisnis) {
-    return (
-      <>
-        <NewWrapper>
-          <ListSkeletonComponent height={80} />
-        </NewWrapper>
-      </>
-    );
-  }
+  // if (!bidangBisnis || !subBidangBisnis) {
+  //   return (
+  //     <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+  //       <ListSkeletonComponent height={80} />
+  //     </View>
+  //   );
+  // }

  return (
    <>
-      <NewWrapper footerComponent={buttonUpdate}>
-        <StackCustom gap={"xs"}>
-          <TextInputCustom
-            required
-            label="Nama Bisnis"
-            placeholder="Masukkan nama bisnis"
-            value={data.namaBisnis}
-            onChangeText={(value: any) =>
-              setData({ ...data, namaBisnis: value })
-            }
-          />
-
-          <SelectCustom
-            label="Bidang Usaha"
-            required
-            data={bidangBisnis?.map((item) => ({
-              label: item.name,
-              value: item.id,
-            }))}
-            value={data.masterBidangBisnisId}
-            onChange={(value: any) => {
-              handleBidangBisnisChange(value);
-            }}
-          />
-
-          {listSubBidangSelected.map((item, index) => {
-            // Filter data untuk select sub bidang, menghilangkan yang sudah dipilih kecuali untuk item ini sendiri
-            const selectedIds = listSubBidangSelected
-              .filter((_, i) => i !== index)
-              .map((s) => s.MasterSubBidangBisnis?.id)
-              .filter((id) => id); // Filter hanya yang memiliki id (tidak kosong)
-
-            const availableSubBidangOptions = (selectedSubBidang || [])
-              .filter((sub: any) => {
-                // Tampilkan jika ini adalah opsi yang dipilih saat ini atau belum dipilih di sub bidang lainnya
-
-                return (
-                  sub.id === item.MasterSubBidangBisnis?.id ||
-                  !selectedIds.includes(sub.id)
-                );
-              })
-              .map((sub: any) => ({
-                value: sub.id,
-                label: sub.name,
-              }));
-
-            return (
-              <SelectCustom
-                key={index}
-                label="Sub Bidang Usaha"
+      <NewWrapper_V2
+        enableKeyboardHandling
+        keyboardScrollOffset={100}
+        footerComponent={buttonUpdate}
+      >
+        {!bidangBisnis || !subBidangBisnis ? (
+          <ListSkeletonComponent height={80} />
+        ) : (
+          <StackCustom gap={"xs"}>
+            <View onStartShouldSetResponder={() => true}>
+              <TextInputCustom
                required
-                data={availableSubBidangOptions}
-                value={item.MasterSubBidangBisnis?.id || null}
+                label="Nama Bisnis"
+                placeholder="Masukkan nama bisnis"
+                value={data.namaBisnis}
+                onChangeText={(value: any) =>
+                  setData({ ...data, namaBisnis: value })
+                }
+              />
+            </View>
+
+            <View onStartShouldSetResponder={() => true}>
+              <SelectCustom
+                label="Bidang Usaha"
+                required
+                data={bidangBisnis?.map((item) => ({
+                  label: item.name,
+                  value: item.id,
+                }))}
+                value={data.masterBidangBisnisId}
                onChange={(value: any) => {
-                  handleSubBidangChange(value, index);
+                  handleBidangBisnisChange(value);
                }}
              />
-            );
-          })}
-
-          <CenterCustom>
-            <View
-              style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
-            >
-              <ActionIcon
-                disabled={
-                  selectedSubBidang.length === listSubBidangSelected.length
-                }
-                onPress={() => {
-                  handleAddSubBidang();
-                }}
-                icon={
-                  <Ionicons
-                    name="add-circle-outline"
-                    size={ICON_SIZE_XLARGE}
-                    color={MainColor.black}
-                  />
-                }
-                size="xl"
-              />
-              <ActionIcon
-                disabled={listSubBidangSelected.length <= 1}
-                onPress={() => {
-                  handleRemoveSubBidang(listSubBidangSelected.length - 1);
-                }}
-                icon={
-                  <Ionicons
-                    name="remove-circle-outline"
-                    size={ICON_SIZE_XLARGE}
-                    color={MainColor.black}
-                  />
-                }
-                size="xl"
-              />
            </View>
-          </CenterCustom>
-          <Spacing />

-          <View>
-            <View style={{ flexDirection: "row", alignItems: "center" }}>
-              <TextCustom semiBold style={{ color: MainColor.white_gray }}>
-                Nomor Telepon
-              </TextCustom>
-              <Text style={{ color: "red" }}> *</Text>
+            {listSubBidangSelected.map((item, index) => {
+              // Filter data untuk select sub bidang, menghilangkan yang sudah dipilih kecuali untuk item ini sendiri
+              const selectedIds = listSubBidangSelected
+                .filter((_, i) => i !== index)
+                .map((s) => s.MasterSubBidangBisnis?.id)
+                .filter((id) => id); // Filter hanya yang memiliki id (tidak kosong)
+
+              const availableSubBidangOptions = (selectedSubBidang || [])
+                .filter((sub: any) => {
+                  // Tampilkan jika ini adalah opsi yang dipilih saat ini atau belum dipilih di sub bidang lainnya
+
+                  return (
+                    sub.id === item.MasterSubBidangBisnis?.id ||
+                    !selectedIds.includes(sub.id)
+                  );
+                })
+                .map((sub: any) => ({
+                  value: sub.id,
+                  label: sub.name,
+                }));
+
+              return (
+                <View onStartShouldSetResponder={() => true} key={index}>
+                  <SelectCustom
+                    label="Sub Bidang Usaha"
+                    required
+                    data={availableSubBidangOptions}
+                    value={item.MasterSubBidangBisnis?.id || null}
+                    onChange={(value: any) => {
+                      handleSubBidangChange(value, index);
+                    }}
+                  />
+                </View>
+              );
+            })}
+
+            <CenterCustom>
+              <View
+                style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
+              >
+                <ActionIcon
+                  disabled={
+                    selectedSubBidang.length === listSubBidangSelected.length
+                  }
+                  onPress={() => {
+                    handleAddSubBidang();
+                  }}
+                  icon={
+                    <Ionicons
+                      name="add-circle-outline"
+                      size={ICON_SIZE_XLARGE}
+                      color={MainColor.black}
+                    />
+                  }
+                  size="xl"
+                />
+                <ActionIcon
+                  disabled={listSubBidangSelected.length <= 1}
+                  onPress={() => {
+                    handleRemoveSubBidang(listSubBidangSelected.length - 1);
+                  }}
+                  icon={
+                    <Ionicons
+                      name="remove-circle-outline"
+                      size={ICON_SIZE_XLARGE}
+                      color={MainColor.black}
+                    />
+                  }
+                  size="xl"
+                />
+              </View>
+            </CenterCustom>
+            <Spacing />
+
+            <View>
+              <View style={{ flexDirection: "row", alignItems: "center" }}>
+                <TextCustom semiBold style={{ color: MainColor.white_gray }}>
+                  Nomor Telepon
+                </TextCustom>
+                <Text style={{ color: "red" }}> *</Text>
+              </View>
+              <Spacing height={5} />
+              <PhoneInputCustom
+                value={phoneNumber}
+                onChangePhoneNumber={handlePhoneChange}
+                selectedCountry={selectedCountry}
+                onChangeCountry={handleCountryChange}
+                placeholder="xxx-xxx-xxx"
+              />
            </View>
-            <Spacing height={5} />
-            <PhoneInputCustom
-              value={phoneNumber}
-              onChangePhoneNumber={handlePhoneChange}
-              selectedCountry={selectedCountry}
-              onChangeCountry={handleCountryChange}
-              placeholder="xxx-xxx-xxx"
-            />
-          </View>
-          <Spacing />
+            <Spacing />

-          <TextInputCustom
-            required
-            label="Alamat Bisnis"
-            placeholder="Masukkan alamat bisnis"
-            value={data.alamatKantor}
-            onChangeText={(value: any) =>
-              setData({ ...data, alamatKantor: value })
-            }
-          />
+            <View onStartShouldSetResponder={() => true}>
+              <TextInputCustom
+                required
+                label="Alamat Bisnis"
+                placeholder="Masukkan alamat bisnis"
+                value={data.alamatKantor}
+                onChangeText={(value: any) =>
+                  setData({ ...data, alamatKantor: value })
+                }
+              />
+            </View>

-          <TextAreaCustom
-            label="Deskripsi Bisnis"
-            placeholder="Masukkan deskripsi bisnis"
-            value={data.deskripsi}
-            onChangeText={(value: any) =>
-              setData({ ...data, deskripsi: value })
-            }
-            autosize
-            minRows={2}
-            maxRows={5}
-            required
-            showCount
-            maxLength={1000}
-          />
-          <Spacing />
-        </StackCustom>
-      </NewWrapper>
+            <View onStartShouldSetResponder={() => true}>
+              <TextAreaCustom
+                label="Deskripsi Bisnis"
+                placeholder="Masukkan deskripsi bisnis"
+                value={data.deskripsi}
+                onChangeText={(value: any) =>
+                  setData({ ...data, deskripsi: value })
+                }
+                autosize
+                minRows={2}
+                maxRows={5}
+                required
+                showCount
+                maxLength={1000}
+              />
+            </View>
+            <Spacing />
+          </StackCustom>
+        )}
+      </NewWrapper_V2>
    </>
  );
 }
--- a/app/(application)/(user)/portofolio/[id]/index.tsx
+++ b/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
--- a/screens/Maps/ScreenMapsCreate.tsx
+++ b/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,13 +165,15 @@ export function Maps_ScreenMapsCreate() {
        />
      </BaseBox>

-      <TextInputCustom
-        required
-        label="Nama Pin"
-        placeholder="Masukkan nama pin maps"
-        value={name}
-        onChangeText={setName}
-      />
+      <View onStartShouldSetResponder={() => true}>
+        <TextInputCustom
+          required
+          label="Nama Pin"
+          placeholder="Masukkan nama pin maps"
+          value={name}
+          onChangeText={setName}
+        />
+      </View>

      <Spacing height={50} />

@@ -179,7 +186,7 @@ export function Maps_ScreenMapsCreate() {
      </ButtonCenteredOnly>

      <Spacing height={50} />
-    </NewWrapper>
+    </NewWrapper_V2>
  );
 }

--- a/screens/Maps/ScreenMapsEdit.tsx
+++ b/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,13 +196,15 @@ export function Maps_ScreenMapsEdit() {
        />
      )}

-      <TextInputCustom
-        required
-        label="Nama Pin"
-        placeholder="Masukkan nama pin maps"
-        value={data?.namePin}
-        onChangeText={(value) => setData({ ...data, namePin: value })}
-      />
+      <View onStartShouldSetResponder={() => true}>
+        <TextInputCustom
+          required
+          label="Nama Pin"
+          placeholder="Masukkan nama pin maps"
+          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>
  );
 }
--- a/screens/Portofolio/ScreenPortofolioCreate.tsx
+++ b/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,57 +160,62 @@ export function ScreenPortofolioCreate() {
      <StackCustom gap="xs">
        <InformationBox text="Lengkapi data bisnis anda." />

-        <TextInputCustom
-          required
-          label="Nama Bisnis"
-          placeholder="Masukkan nama bisnis"
-          onChangeText={(value: any) => setData({ ...data, namaBisnis: value })}
-        />
-
-        <SelectCustom
-          label="Bidang Usaha"
-          required
-          data={bidangBisnis.map((item) => ({
-            label: item.name,
-            value: item.id,
-          }))}
-          value={data.masterBidangBisnisId}
-          onChange={(value) => {
-            const isSameBidang = data.masterBidangBisnisId === value;
-
-            if (!isSameBidang) {
-              setListSubBidangSelected([{ id: "" }]);
-            }
-
-            setData({ ...(data as any), masterBidangBisnisId: value });
-            handlerSelectedSubBidang({ id: value as string });
-          }}
-        />
-
-        {listSubBidangSelected.map((item, index) => (
-          <SelectCustom
-            key={index}
-            disabled={data.masterBidangBisnisId === ""}
-            label="Sub Bidang Usaha"
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
            required
-            data={_.map(selectedSubBidang as any)
-              .filter((option: any) => {
-                const selectedValues = listSubBidangSelected.map((s) => s.id);
-                return (
-                  option.id === item.id || !selectedValues.includes(option.id)
-                );
-              })
-              .map((e: any) => ({
-                value: e.id,
-                label: e.name,
-              }))}
-            value={item.id || null}
+            label="Nama Bisnis"
+            placeholder="Masukkan nama bisnis"
+            onChangeText={(value: any) => setData({ ...data, namaBisnis: value })}
+          />
+        </View>
+
+        <View onStartShouldSetResponder={() => true}>
+          <SelectCustom
+            label="Bidang Usaha"
+            required
+            data={bidangBisnis.map((item) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={data.masterBidangBisnisId}
            onChange={(value) => {
-              const list = _.clone(listSubBidangSelected);
-              list[index].id = value as any;
-              setListSubBidangSelected(list);
+              const isSameBidang = data.masterBidangBisnisId === value;
+
+              if (!isSameBidang) {
+                setListSubBidangSelected([{ id: "" }]);
+              }
+
+              setData({ ...(data as any), masterBidangBisnisId: value });
+              handlerSelectedSubBidang({ id: value as string });
            }}
          />
+        </View>
+
+        {listSubBidangSelected.map((item, index) => (
+          <View onStartShouldSetResponder={() => true} key={index}>
+            <SelectCustom
+              disabled={data.masterBidangBisnisId === ""}
+              label="Sub Bidang Usaha"
+              required
+              data={_.map(selectedSubBidang as any)
+                .filter((option: any) => {
+                  const selectedValues = listSubBidangSelected.map((s) => s.id);
+                  return (
+                    option.id === item.id || !selectedValues.includes(option.id)
+                  );
+                })
+                .map((e: any) => ({
+                  value: e.id,
+                  label: e.name,
+                }))}
+              value={item.id || null}
+              onChange={(value) => {
+                const list = _.clone(listSubBidangSelected);
+                list[index].id = value as any;
+                setListSubBidangSelected(list);
+              }}
+            />
+          </View>
        ))}

        <CenterCustom>
@@ -272,27 +279,31 @@ export function ScreenPortofolioCreate() {

        <Spacing />

-        <TextInputCustom
-          required
-          label="Alamat Bisnis"
-          placeholder="Masukkan alamat bisnis"
-          onChangeText={(value: any) =>
-            setData({ ...data, alamatKantor: value })
-          }
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            required
+            label="Alamat Bisnis"
+            placeholder="Masukkan alamat bisnis"
+            onChangeText={(value: any) =>
+              setData({ ...data, alamatKantor: value })
+            }
+          />
+        </View>

-        <TextAreaCustom
-          label="Deskripsi Bisnis"
-          placeholder="Masukkan deskripsi bisnis"
-          value={data.deskripsi}
-          onChangeText={(value: any) => setData({ ...data, deskripsi: value })}
-          autosize
-          minRows={2}
-          maxRows={5}
-          required
-          showCount
-          maxLength={1000}
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextAreaCustom
+            label="Deskripsi Bisnis"
+            placeholder="Masukkan deskripsi bisnis"
+            value={data.deskripsi}
+            onChangeText={(value: any) => setData({ ...data, deskripsi: value })}
+            autosize
+            minRows={2}
+            maxRows={5}
+            required
+            showCount
+            maxLength={1000}
+          />
+        </View>

        <Spacing />

@@ -322,46 +333,56 @@ export function ScreenPortofolioCreate() {

        <InformationBox text="Isi hanya pada sosial media yang anda miliki." />

-        <TextInputCustom
-          label="Tiktok"
-          placeholder="Masukkan username tiktok"
-          onChangeText={(value: any) =>
-            setDataMedsos({ ...dataMedsos, tiktok: value })
-          }
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            label="Tiktok"
+            placeholder="Masukkan username tiktok"
+            onChangeText={(value: any) =>
+              setDataMedsos({ ...dataMedsos, tiktok: value })
+            }
+          />
+        </View>

-        <TextInputCustom
-          label="Facebook"
-          placeholder="Masukkan username facebook"
-          onChangeText={(value: any) =>
-            setDataMedsos({ ...dataMedsos, facebook: value })
-          }
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            label="Facebook"
+            placeholder="Masukkan username facebook"
+            onChangeText={(value: any) =>
+              setDataMedsos({ ...dataMedsos, facebook: value })
+            }
+          />
+        </View>

-        <TextInputCustom
-          label="Instagram"
-          placeholder="Masukkan username instagram"
-          onChangeText={(value: any) =>
-            setDataMedsos({ ...dataMedsos, instagram: value })
-          }
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            label="Instagram"
+            placeholder="Masukkan username instagram"
+            onChangeText={(value: any) =>
+              setDataMedsos({ ...dataMedsos, instagram: value })
+            }
+          />
+        </View>

-        <TextInputCustom
-          label="Twitter"
-          placeholder="Masukkan username twitter"
-          onChangeText={(value: any) =>
-            setDataMedsos({ ...dataMedsos, twitter: value })
-          }
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            label="Twitter"
+            placeholder="Masukkan username twitter"
+            onChangeText={(value: any) =>
+              setDataMedsos({ ...dataMedsos, twitter: value })
+            }
+          />
+        </View>

-        <TextInputCustom
-          label="Youtube"
-          placeholder="Masukkan username youtube"
-          onChangeText={(value: any) =>
-            setDataMedsos({ ...dataMedsos, youtube: value })
-          }
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            label="Youtube"
+            placeholder="Masukkan username youtube"
+            onChangeText={(value: any) =>
+              setDataMedsos({ ...dataMedsos, youtube: value })
+            }
+          />
+        </View>
      </StackCustom>
-    </NewWrapper>
+    </NewWrapper_V2>
  );
 }
--- a/tasks/TASK-004-newwrapper-migration.md
+++ b/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
- [ ] `screens/Job/ScreenJobEdit.tsx` → Migrate to NewWrapper_V2
- [ ] Delete test files after migration
+- [x] `screens/Job/ScreenJobCreate.tsx` → Migrate to NewWrapper_V2
+- [x] `screens/Job/ScreenJobEdit.tsx` → Migrate to NewWrapper_V2
+- [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 3: Forms** | 6-8 screens | ⏳ Pending | - |
-| **Phase 4: Complex** | 4-6 screens | ⏳ Pending | - |
-| **Phase 5: Cleanup** | Cleanup | ⏳ Pending | - |
+| **Phase 2: Profile** | 7 screens | ✅ COMPLETED | 2026-04-04 |
+| **Phase 3: Portofolio & Maps** | 9 screens | ⏳ Pending | - |
+| **Phase 4: Event** | 2 screens | ⏳ 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 `ScreenJobEdit.tsx`
-   - [ ] Test both screens
+   - [ ] Migrate `app/(application)/(user)/portofolio/[id]/create.tsx`
+   - [ ] Migrate `app/(application)/(user)/portofolio/[id]/edit.tsx`
+   - [ ] 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)
-   - [ ] Review Phase 1 results
+   - [ ] Start Phase 4 (Event screens)
+   - [ ] 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`
- `screens/Job/ScreenJobEdit.tsx`
+- `app/(application)/(user)/portofolio/[id]/create.tsx` (Phase 3)
+- `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:**
- [ ] Job Create migrated
- [ ] Job Edit migrated
- [ ] Both screens tested on iOS & Android
+**Phase 2 Complete when:** ✅
+- [x] Profile Create migrated
+- [x] Profile Edit migrated
+- [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)