feat: Migrate Portfolio & Maps screens + perbaiki bug auto-scroll keyboard

Phase 3 - Portfolio Screens (6 files): - [id]/index.tsx: ViewWrapper → OS_Wrapper (detail dengan pull-to-refresh) - [id]/edit.tsx: NewWrapper → OS_Wrapper (form + keyboard handling) - [id]/edit-logo.tsx: ViewWrapper → OS_Wrapper (upload logo) - [id]/edit-social-media.tsx: ViewWrapper → OS_Wrapper (form + keyboard handling) - ViewListPortofolio.tsx: NewWrapper → OS_Wrapper (pagination list) - ScreenPortofolioCreate.tsx: NewWrapper → OS_Wrapper (form + keyboard handling) Phase 4 - Maps Screens (2 files): - ScreenMapsCreate.tsx: NewWrapper → OS_Wrapper (form + keyboard handling) - ScreenMapsEdit.tsx: ViewWrapper → OS_Wrapper (form + keyboard handling) Bug Fixes: - Perbaiki auto-scroll keyboard yang membuat input paling atas 'terlempar' keluar layar - Gunakan UIManager.measure untuk mendapatkan posisi absolut input (pageY) secara akurat - Logika conditional scroll: * Jika input terlihat (di atas keyboard) → TIDAK SCROLL * Jika input tertutup keyboard → Scroll secukupnya - Helper cloneChildrenWithFocusHandler sekarang aktif menyuntikan onFocus handler ke semua TextInput/TextArea/PhoneInput/Select - Hapus KeyboardAvoidingView dari AndroidWrapper static mode (tidak diperlukan lagi) Pattern yang diterapkan: - List screens: contentPaddingBottom=100 (default) - Form screens: contentPaddingBottom={250} + enableKeyboardHandling - NO PADDING_INLINE (sesuai preferensi user - mencegah box menyempit) Dokumentasi: - Update TASK-005 dengan status lengkap Phase 1-4 (27 files migrated) - Tambahkan urutan phase baru: Event (Phase 5), Voting (Phase 6), Forum (Phase 7), Donation (Phase 8) Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
feat: Migrate Profile, Waiting Room, and Delete Account to OS_Wrapper
2026-04-08 17:27:06 +08:00 · 2026-04-08 14:32:11 +08:00 · 2026-04-08 10:31:36 +08:00 · 2026-04-07 17:50:15 +08:00 · 2026-04-07 14:14:00 +08:00 · 2026-04-06 17:49:28 +08:00
49 changed files with 1663 additions and 1219 deletions
--- a/QWEN.md
+++ b/QWEN.md
@@ -513,3 +513,30 @@ When using Maplibre MapView on iOS, prevent "Attempt to recycle a mounted view"
 - [Expo Router Documentation](https://docs.expo.dev/router/introduction/)
 - [TypeScript Documentation](https://www.typescriptlang.org/docs/)
 - [Maplibre React Native](https://github.com/maplibre/maplibre-react-native)
+
+## Qwen Added Memories
+- OS_Wrapper contentPaddingBottom pattern:
+- Default: contentPaddingBottom=100 (untuk list screens)
+- Forms: contentPaddingBottom=250 (HANYA untuk screens yang punya TextInput/TextArea)
+- contentPadding=0 (default, per-screen control)
+- OS_ANDROID_PADDING_TOP=6 (compact tabs)
+- OS_IOS_PADDING_TOP=12
+- PADDING_INLINE=16 (constant)
+
+Contoh:
+```tsx
+// List screen (default 100px)
+<OS_Wrapper listData={data} renderItem={renderItem} />
+
+// Form screen (explicit 250px)
+<OS_Wrapper enableKeyboardHandling contentPaddingBottom={250}>
+  <FormWithTextInput />
+</OS_Wrapper>
+```
+- PADDING_INLINE usage pattern - User preference:
+- PADDING_INLINE (16px) TIDAK selalu diperlukan
+- User remove PADDING_INLINE dari Profile screens karena mempersempit box tampilan
+- Decision: Tambahkan PADDING_INLINE HANYA jika diperlukan per-screen, jangan default
+- User akan review dan tambahkan sendiri jika perlu
+
+Profile screens: PADDING_INLINE dihapus dari edit.tsx dan create.tsx
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -21,9 +21,7 @@ export default function UserLayout() {
        <Stack.Screen
          name="waiting-room"
          options={{
-            // title: "Waiting Room",
-            // headerBackVisible: false,
-            header: () => <AppHeader title="Waiting Room" showBack={false} />,
+            header: () => <AppHeader title="Waiting Room" />,
          }}
        />

--- a/app/(application)/(user)/delete-account.tsx
+++ b/app/(application)/(user)/delete-account.tsx
@@ -3,10 +3,10 @@ import {
  BaseBox,
  ButtonCustom,
  CenterCustom,
+  OS_Wrapper,
  StackCustom,
  TextCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import { useAuth } from "@/hooks/use-auth";
 import { apiDeleteUser } from "@/service/api-client/api-user";
@@ -68,7 +68,10 @@ export default function DeleteAccount() {

  return (
    <>
-      <ViewWrapper>
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
+      >
        <StackCustom>
          <BaseBox>
            <StackCustom>
@@ -105,7 +108,7 @@ export default function DeleteAccount() {
            </StackCustom>
          </BaseBox>
        </StackCustom>
-      </ViewWrapper>
+      </OS_Wrapper>
    </>
  );
 }
--- a/app/(application)/(user)/job/(tabs)/_layout.tsx
+++ b/app/(application)/(user)/job/(tabs)/_layout.tsx
@@ -5,15 +5,17 @@ import { IconHome, IconStatus } from "@/components/_Icon";
 import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { Ionicons } from "@expo/vector-icons";
-import {
-  router,
-  Tabs,
-  useLocalSearchParams
-} from "expo-router";
+import { router, Tabs, useLocalSearchParams } from "expo-router";
 import { View } from "react-native";
 import { MainColor } from "@/constants/color-palet";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Platform } from "react-native";
+import {
+  OS_ANDROID_HEIGHT,
+  OS_ANDROID_PADDING_TOP,
+  OS_IOS_HEIGHT,
+  OS_IOS_PADDING_TOP,
+} from "@/constants/constans-value";

 function JobTabsWrapper() {
  const insets = useSafeAreaInsets();
@@ -31,20 +33,23 @@ function JobTabsWrapper() {
          tabBarStyle: Platform.select({
            ios: {
              borderTopWidth: 0,
-              paddingTop: 12,
-              height: 80,
+              paddingTop: OS_IOS_PADDING_TOP,
+              height: OS_IOS_HEIGHT,
            },
            android: {
              borderTopWidth: 0,
-              paddingTop: 5,
-              height: 70 + paddingBottom,
+              paddingTop: OS_ANDROID_PADDING_TOP,
+              height: OS_ANDROID_HEIGHT + paddingBottom,
            },
          }),
          header: () => (
            <AppHeader
              title="Job Vacancy"
              left={
-                <BackButtonFromNotification from={from || ""} category={category} />
+                <BackButtonFromNotification
+                  from={from || ""}
+                  category={category}
+                />
              }
            />
          ),
--- a/app/(application)/(user)/job/[id]/[status]/detail.tsx
+++ b/app/(application)/(user)/job/[id]/[status]/detail.tsx
@@ -5,7 +5,7 @@ import {
  DrawerCustom,
  LoaderCustom,
  MenuDrawerDynamicGrid,
-  PageWrapper,
+  OS_Wrapper,
  Spacing,
  StackCustom,
 } from "@/components";
@@ -23,6 +23,7 @@ import {
  useLocalSearchParams,
 } from "expo-router";
 import { useCallback, useState } from "react";
+import { PADDING_INLINE } from "@/constants/constans-value";

 export default function JobDetailStatus() {
  const { id, status } = useLocalSearchParams();
@@ -72,7 +73,7 @@ export default function JobDetailStatus() {
          ),
        }}
      />
-      <PageWrapper>
+      <OS_Wrapper >
        {isLoadData ? (
          <LoaderCustom />
        ) : (
@@ -96,7 +97,7 @@ export default function JobDetailStatus() {
            <Spacing />
          </>
        )}
-      </PageWrapper>
+      </OS_Wrapper>

      <DrawerCustom
        isVisible={openDrawer}
--- a/app/(application)/(user)/job/[id]/archive.tsx
+++ b/app/(application)/(user)/job/[id]/archive.tsx
@@ -2,9 +2,9 @@
 import {
  ButtonCustom,
  LoaderCustom,
-  PageWrapper,
  Spacing,
  StackCustom,
+  ViewWrapper,
 } from "@/components";
 import Job_BoxDetailSection from "@/screens/Job/BoxDetailSection";
 import { apiJobGetOne, apiJobUpdateData } from "@/service/api-client/api-job";
@@ -71,7 +71,7 @@ export default function JobDetailArchive() {
      {isLoadData ? (
        <LoaderCustom />
      ) : (
-        <PageWrapper>
+        <ViewWrapper>
          <>
            <StackCustom>
              <Job_BoxDetailSection data={data} />
@@ -83,10 +83,17 @@ export default function JobDetailArchive() {
              >
                Publish kembali
              </ButtonCustom>
+              {/* <Job_ButtonStatusSection
+                id={id as string}
+                status={status as string}
+                isLoading={isLoading}
+                onSetLoading={setIsLoading}
+                isArchive={true}
+              /> */}
            </StackCustom>
            <Spacing />
          </>
-        </PageWrapper>
+        </ViewWrapper>
      )}
    </>
  );
--- a/app/(application)/(user)/job/[id]/index.tsx
+++ b/app/(application)/(user)/job/[id]/index.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { ButtonCustom, LoaderCustom, PageWrapper, Spacing, StackCustom } from "@/components";
+import { ButtonCustom, LoaderCustom, Spacing, StackCustom, ViewWrapper } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Job_BoxDetailSection from "@/screens/Job/BoxDetailSection";
@@ -88,7 +88,7 @@ export default function JobDetail() {
  };

  return (
-    <PageWrapper>
+    <ViewWrapper>
      {isLoading ? (
        <LoaderCustom />
      ) : (
@@ -101,6 +101,6 @@ export default function JobDetail() {
          <Spacing />
        </>
      )}
-    </PageWrapper>
+    </ViewWrapper>
  );
 }
--- 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,
-  NewWrapper_V2,
+  ViewWrapper,
 } from "@/components";
 import CenterCustom from "@/components/Center/CenterCustom";
 import { router, useLocalSearchParams } from "expo-router";
@@ -30,11 +30,7 @@ export default function MapsCustomPin() {
  );
  return (
    <>
-      <NewWrapper_V2
-        enableKeyboardHandling
-        keyboardScrollOffset={100}
-        footerComponent={buttonFooter}
-      >
+      <ViewWrapper 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>
@@ -53,7 +49,7 @@ export default function MapsCustomPin() {
          </BaseBox>
          <Spacing />
        </StackCustom>
-      </NewWrapper_V2>
+      </ViewWrapper>
    </>
  );
 }
--- 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,
-    NewWrapper_V2
+    OS_Wrapper
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -126,10 +126,7 @@ export default function PortofolioEditLogo() {

  return (
    <>
-      <NewWrapper_V2
-        contentPaddingHorizontal={16}
-        footerComponent={buttonFooter}
-      >
+      <OS_Wrapper footerComponent={buttonFooter}>
        <BaseBox
          style={{
            alignItems: "center",
@@ -149,7 +146,7 @@ export default function PortofolioEditLogo() {
        >
          Upload
        </ButtonCenteredOnly>
-      </NewWrapper_V2>
+      </OS_Wrapper>
    </>
  );
 }
--- a/app/(application)/(user)/portofolio/[id]/edit-social-media.tsx
+++ b/app/(application)/(user)/portofolio/[id]/edit-social-media.tsx
@@ -1,7 +1,7 @@
 import {
  BoxButtonOnFooter,
  ButtonCustom,
-  NewWrapper_V2,
+  OS_Wrapper,
  TextInputCustom,
 } from "@/components";
 import {
@@ -10,7 +10,6 @@ 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() {
@@ -92,52 +91,42 @@ export default function PortofolioEditSocialMedia() {

  return (
    <>
-      <NewWrapper_V2
+      <OS_Wrapper
        enableKeyboardHandling
-        keyboardScrollOffset={100}
+        contentPaddingBottom={250}
        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>
+        <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"
+        />
+      </OS_Wrapper>
    </>
  );
 }
--- 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_V2,
+  OS_Wrapper,
  PhoneInputCustom,
  SelectCustom,
  Spacing,
@@ -368,51 +368,39 @@ export default function PortofolioEdit() {
    </BoxButtonOnFooter>
  );

-  // if (!bidangBisnis || !subBidangBisnis) {
-  //   return (
-  //     <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-  //       <ListSkeletonComponent height={80} />
-  //     </View>
-  //   );
-  // }
-
  return (
    <>
-      <NewWrapper_V2
+      <OS_Wrapper
        enableKeyboardHandling
-        keyboardScrollOffset={100}
+        contentPaddingBottom={250}
        footerComponent={buttonUpdate}
      >
        {!bidangBisnis || !subBidangBisnis ? (
          <ListSkeletonComponent height={80} />
        ) : (
          <StackCustom gap={"xs"}>
-            <View onStartShouldSetResponder={() => true}>
-              <TextInputCustom
-                required
-                label="Nama Bisnis"
-                placeholder="Masukkan nama bisnis"
-                value={data.namaBisnis}
-                onChangeText={(value: any) =>
-                  setData({ ...data, namaBisnis: value })
-                }
-              />
-            </View>
+            <TextInputCustom
+              required
+              label="Nama Bisnis"
+              placeholder="Masukkan nama bisnis"
+              value={data.namaBisnis}
+              onChangeText={(value: any) =>
+                setData({ ...data, namaBisnis: value })
+              }
+            />

-            <View onStartShouldSetResponder={() => true}>
-              <SelectCustom
-                label="Bidang Usaha"
-                required
-                data={bidangBisnis?.map((item) => ({
-                  label: item.name,
-                  value: item.id,
-                }))}
-                value={data.masterBidangBisnisId}
-                onChange={(value: any) => {
-                  handleBidangBisnisChange(value);
-                }}
-              />
-            </View>
+            <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
@@ -436,17 +424,16 @@ export default function PortofolioEdit() {
                }));

              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>
+                <SelectCustom
+                  key={index}
+                  label="Sub Bidang Usaha"
+                  required
+                  data={availableSubBidangOptions}
+                  value={item.MasterSubBidangBisnis?.id || null}
+                  onChange={(value: any) => {
+                    handleSubBidangChange(value, index);
+                  }}
+                />
              );
            })}

@@ -506,38 +493,34 @@ export default function PortofolioEdit() {
            </View>
            <Spacing />

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

-            <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>
+            <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_V2>
+      </OS_Wrapper>
    </>
  );
 }
--- a/app/(application)/(user)/portofolio/[id]/index.tsx
+++ b/app/(application)/(user)/portofolio/[id]/index.tsx
@@ -4,7 +4,7 @@ import {
  DrawerCustom,
  DummyLandscapeImage,
  LoaderCustom,
-  NewWrapper_V2,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextCustom,
@@ -92,7 +92,7 @@ export default function Portofolio() {
          ),
        }}
      />
-      <NewWrapper_V2>
+      <OS_Wrapper>
        {!data || !profileId ? (
            <StackCustom>
            <CustomSkeleton height={400} />
@@ -125,7 +125,7 @@ export default function Portofolio() {
            <Spacing />
          </StackCustom>
        )}
-      </NewWrapper_V2>
+      </OS_Wrapper>

      {/* Drawer Komponen Eksternal */}
      <DrawerCustom
--- a/app/(application)/(user)/profile/[id]/blocked-list.tsx
+++ b/app/(application)/(user)/profile/[id]/blocked-list.tsx
@@ -3,13 +3,13 @@ import {
  BadgeCustom,
  ClickableCustom,
  Divider,
+  OS_Wrapper,
  SelectCustom,
  TextCustom,
 } from "@/components";
 import ListEmptyComponent from "@/components/_ShareComponent/ListEmptyComponent";
 import ListLoaderFooterComponent from "@/components/_ShareComponent/ListLoaderFooterComponent";
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
-import { NewWrapper_V2 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import { usePaginatedApi } from "@/hooks/use-paginated-api";
@@ -120,7 +120,7 @@ export default function ProfileBlockedList() {

  return (
    <>
-      <NewWrapper_V2
+      <OS_Wrapper
        // headerComponent={renderHeader()}
        listData={listData}
        renderItem={renderItem}
--- a/app/(application)/(user)/profile/[id]/detail-blocked.tsx
+++ b/app/(application)/(user)/profile/[id]/detail-blocked.tsx
@@ -5,7 +5,7 @@ import {
  BoxButtonOnFooter,
  BoxWithHeaderSection,
  ButtonCustom,
-  NewWrapper_V2,
+  OS_Wrapper,
  StackCustom,
  TextCustom,
 } from "@/components";
@@ -46,9 +46,7 @@ export default function ProfileDetailBlocked() {

  return (
    <>
-      <NewWrapper_V2
-        enableKeyboardHandling
-        keyboardScrollOffset={100}
+      <OS_Wrapper
        footerComponent={
          <BoxButtonOnFooter>
            <ButtonCustom
@@ -88,7 +86,7 @@ export default function ProfileDetailBlocked() {
            </TextCustom>
          </StackCustom>
        </BoxWithHeaderSection>
-      </NewWrapper_V2>
+      </OS_Wrapper>
    </>
  );
 }
--- a/app/(application)/(user)/profile/[id]/edit.tsx
+++ b/app/(application)/(user)/profile/[id]/edit.tsx
@@ -1,16 +1,16 @@
 import {
  ButtonCustom,
-  NewWrapper_V2,
+  OS_Wrapper,
  SelectCustom,
  StackCustom,
  TextInputCustom,
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
 import { IProfile } from "@/types/Type-Profile";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { View } from "react-native";
 import Toast from "react-native-toast-message";

 export default function ProfileEdit() {
@@ -71,9 +71,9 @@ export default function ProfileEdit() {
  };

  return (
-    <NewWrapper_V2
+    <OS_Wrapper
      enableKeyboardHandling
-      keyboardScrollOffset={100}
+      contentPaddingBottom={250}
      footerComponent={
        <BoxButtonOnFooter>
          <ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
@@ -83,53 +83,45 @@ export default function ProfileEdit() {
      }
    >
      <StackCustom gap={"xs"}>
-        <View onStartShouldSetResponder={() => true}>
-          <TextInputCustom
-            label="Nama"
-            placeholder="Nama"
-            value={data?.name}
-            onChangeText={(text) => {
-              setData({ ...data, name: text });
-            }}
-            required
-          />
-        </View>
-        <View onStartShouldSetResponder={() => true}>
-          <TextInputCustom
-            keyboardType="email-address"
-            label="Email"
-            placeholder="Email"
-            value={data?.email}
-            onChangeText={(text) => {
-              setData({ ...data, email: text });
-            }}
-            required
-          />
-        </View>
-        <View onStartShouldSetResponder={() => true}>
-          <TextInputCustom
-            label="Alamat"
-            placeholder="Alamat"
-            value={data?.alamat}
-            onChangeText={(text) => {
-              setData({ ...data, alamat: text });
-            }}
-            required
-          />
-        </View>
-        <View onStartShouldSetResponder={() => true}>
-          <SelectCustom
-            required
-            label="Jenis Kelamin"
-            placeholder="Pilih jenis kelamin"
-            data={options}
-            value={data?.jenisKelamin}
-            onChange={(value) => {
-              setData({ ...(data as any), jenisKelamin: value });
-            }}
-          />
-        </View>
+        <TextInputCustom
+          label="Nama"
+          placeholder="Nama"
+          value={data?.name}
+          onChangeText={(text) => {
+            setData({ ...data, name: text });
+          }}
+          required
+        />
+        <TextInputCustom
+          keyboardType="email-address"
+          label="Email"
+          placeholder="Email"
+          value={data?.email}
+          onChangeText={(text) => {
+            setData({ ...data, email: text });
+          }}
+          required
+        />
+        <TextInputCustom
+          label="Alamat"
+          placeholder="Alamat"
+          value={data?.alamat}
+          onChangeText={(text) => {
+            setData({ ...data, alamat: text });
+          }}
+          required
+        />
+        <SelectCustom
+          required
+          label="Jenis Kelamin"
+          placeholder="Pilih jenis kelamin"
+          data={options}
+          value={data?.jenisKelamin}
+          onChange={(value) => {
+            setData({ ...(data as any), jenisKelamin: value });
+          }}
+        />
      </StackCustom>
-    </NewWrapper_V2>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/profile/[id]/index.tsx
+++ b/app/(application)/(user)/profile/[id]/index.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { NewWrapper_V2, StackCustom } from "@/components";
+import { OS_Wrapper, StackCustom } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import LeftButtonCustom from "@/components/Button/BackButton";
@@ -119,7 +119,7 @@ export default function Profile() {
        }}
      />
      {/* Main View */}
-      <NewWrapper_V2
+      <OS_Wrapper
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
@@ -144,7 +144,7 @@ export default function Profile() {
            />
          </>
        )}
-      </NewWrapper_V2>
+      </OS_Wrapper>

      {/* Drawer Komponen Eksternal */}
      <DrawerCustom
--- a/app/(application)/(user)/profile/[id]/update-background.tsx
+++ b/app/(application)/(user)/profile/[id]/update-background.tsx
@@ -1,9 +1,9 @@
 import {
-  BaseBox,
-  BoxButtonOnFooter,
-  ButtonCenteredOnly,
-  ButtonCustom,
-  NewWrapper_V2,
+    BaseBox,
+    BoxButtonOnFooter,
+    ButtonCenteredOnly,
+    ButtonCustom,
+    OS_Wrapper,
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -127,10 +127,7 @@ export default function UpdateBackgroundProfile() {
  );

  return (
-    <NewWrapper_V2
-      contentPaddingHorizontal={16}
-      footerComponent={buttonFooter}
-    >
+    <OS_Wrapper footerComponent={buttonFooter}>
      <BaseBox
        style={{ alignItems: "center", justifyContent: "center", height: 250 }}
      >
@@ -147,6 +144,6 @@ export default function UpdateBackgroundProfile() {
      >
        Update
      </ButtonCenteredOnly>
-    </NewWrapper_V2>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/profile/[id]/update-photo.tsx
+++ b/app/(application)/(user)/profile/[id]/update-photo.tsx
@@ -3,7 +3,7 @@ import {
  BoxButtonOnFooter,
  ButtonCenteredOnly,
  ButtonCustom,
-  NewWrapper_V2,
+  OS_Wrapper,
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -125,10 +125,7 @@ export default function UpdatePhotoProfile() {
  );

  return (
-    <NewWrapper_V2
-      contentPaddingHorizontal={16}
-      footerComponent={buttonFooter}
-    >
+    <OS_Wrapper footerComponent={buttonFooter}>
      <BaseBox
        style={{ alignItems: "center", justifyContent: "center", height: 250 }}
      >
@@ -146,6 +143,6 @@ export default function UpdatePhotoProfile() {
      >
        Upload
      </ButtonCenteredOnly>
-    </NewWrapper_V2>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/profile/_layout.tsx
+++ b/app/(application)/(user)/profile/_layout.tsx
@@ -23,7 +23,11 @@ export default function ProfileLayout() {
        />
        <Stack.Screen
          name="create"
-          options={{ header: () => <AppHeader title="Buat Profil" showBack={false} /> }}
+          options={{
+            header: () => (
+              <AppHeader title="Tambah Profil" showBack={false} />
+            ),
+          }}
        />

        <Stack.Screen
--- a/app/(application)/(user)/profile/create.tsx
+++ b/app/(application)/(user)/profile/create.tsx
@@ -2,7 +2,7 @@ import {
    BaseBox,
    ButtonCenteredOnly,
    ButtonCustom,
-    NewWrapper_V2,
+    OS_Wrapper,
    SelectCustom,
    Spacing,
    StackCustom,
@@ -12,6 +12,7 @@ import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
 import InformationBox from "@/components/Box/InformationBox";
 import DIRECTORY_ID from "@/constants/directory-id";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
 import { apiCreateProfile } from "@/service/api-client/api-profile";
 import { apiValidationEmail } from "@/service/api-client/api-validation";
@@ -155,9 +156,9 @@ export default function CreateProfile() {
  );

  return (
-    <NewWrapper_V2
+    <OS_Wrapper
      enableKeyboardHandling
-      keyboardScrollOffset={100}
+      contentPaddingBottom={250}
      footerComponent={footerComponent}
    >
      <StackCustom>
@@ -208,51 +209,43 @@ export default function CreateProfile() {
        </View>

        <Spacing />
-        <View onStartShouldSetResponder={() => true}>
-          <TextInputCustom
-            required
-            label="Nama"
-            placeholder="Masukkan nama"
-            value={data.name}
-            onChangeText={(text) => setData({ ...data, name: text })}
-          />
-        </View>
-        <View onStartShouldSetResponder={() => true}>
-          <TextInputCustom
-            keyboardType="email-address"
-            required
-            label="Email"
-            placeholder="Masukkan email"
-            value={data.email}
-            onChangeText={(text) => setData({ ...data, email: text })}
-          />
-        </View>
-        <View onStartShouldSetResponder={() => true}>
-          <TextInputCustom
-            required
-            label="Alamat"
-            placeholder="Masukkan alamat"
-            value={data.alamat}
-            onChangeText={(text) => setData({ ...data, alamat: text })}
-          />
-        </View>
-        <View onStartShouldSetResponder={() => true}>
-          <SelectCustom
-            label="Jenis Kelamin"
-            placeholder="Pilih jenis kelamin"
-            data={[
-              { label: "Laki-laki", value: "laki-laki" },
-              { label: "Perempuan", value: "perempuan" },
-            ]}
-            value={data.jenisKelamin}
-            required
-            onChange={(value) =>
-              setData({ ...(data as any), jenisKelamin: value })
-            }
-          />
-        </View>
+        <TextInputCustom
+          required
+          label="Nama"
+          placeholder="Masukkan nama"
+          value={data.name}
+          onChangeText={(text) => setData({ ...data, name: text })}
+        />
+        <TextInputCustom
+          keyboardType="email-address"
+          required
+          label="Email"
+          placeholder="Masukkan email"
+          value={data.email}
+          onChangeText={(text) => setData({ ...data, email: text })}
+        />
+        <TextInputCustom
+          required
+          label="Alamat"
+          placeholder="Masukkan alamat"
+          value={data.alamat}
+          onChangeText={(text) => setData({ ...data, alamat: text })}
+        />
+        <SelectCustom
+          label="Jenis Kelamin"
+          placeholder="Pilih jenis kelamin"
+          data={[
+            { label: "Laki-laki", value: "laki-laki" },
+            { label: "Perempuan", value: "perempuan" },
+          ]}
+          value={data.jenisKelamin}
+          required
+          onChange={(value) =>
+            setData({ ...(data as any), jenisKelamin: value })
+          }
+        />
        <Spacing />
      </StackCustom>
-    </NewWrapper_V2>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/waiting-room.tsx
+++ b/app/(application)/(user)/waiting-room.tsx
@@ -3,7 +3,7 @@ import {
  BoxButtonOnFooter,
  ButtonCustom,
  InformationBox,
-  NewWrapper,
+  OS_Wrapper,
  StackCustom
 } from "@/components";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
@@ -82,7 +82,7 @@ export default function WaitingRoom() {

  return (
    <>
-      <NewWrapper
+      <OS_Wrapper
        footerComponent={logoutButton()}
        refreshControl={
          <RefreshControl refreshing={isLoading} onRefresh={handleCheck} />
@@ -103,7 +103,7 @@ Silakan tunggu beberapa saat. Untuk memperbarui status, tarik layar ke bawah."
            Check
          </ButtonCenteredOnly> */}
        </StackCustom>
-      </NewWrapper>
+      </OS_Wrapper>
    </>
  );
 }
--- a/components/_ShareComponent/AndroidWrapper.tsx
+++ b/components/_ShareComponent/AndroidWrapper.tsx
@@ -0,0 +1,248 @@
+// @/components/AndroidWrapper.tsx
+// Android Wrapper - Based on NewWrapper_V2 (with keyboard handling for Android)
+import { MainColor } from "@/constants/color-palet";
+import { OS_HEIGHT } from "@/constants/constans-value";
+import { GStyles } from "@/styles/global-styles";
+import {
+  ImageBackground,
+  Keyboard,
+  KeyboardAvoidingView,
+  ScrollView,
+  FlatList,
+  TouchableWithoutFeedback,
+  View,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import {
+  NativeSafeAreaViewProps,
+  SafeAreaView,
+} from "react-native-safe-area-context";
+import type { ScrollViewProps, FlatListProps } from "react-native";
+import { useKeyboardForm, cloneChildrenWithFocusHandler } from "@/hooks/useKeyboardForm";
+
+// --- Base Props ---
+interface BaseProps {
+  withBackground?: boolean;
+  headerComponent?: React.ReactNode;
+  footerComponent?: React.ReactNode;
+  floatingButton?: React.ReactNode;
+  hideFooter?: boolean;
+  edgesFooter?: NativeSafeAreaViewProps["edges"];
+  style?: StyleProp<ViewStyle>;
+  refreshControl?: ScrollViewProps["refreshControl"];
+  /**
+   * Enable keyboard handling with auto-scroll (Android only)
+   * @default false
+   */
+  enableKeyboardHandling?: boolean;
+  /**
+   * Scroll offset when keyboard appears (Android only)
+   * @default 100
+   */
+  keyboardScrollOffset?: number;
+  /**
+   * Extra padding bottom for content to avoid navigation bar (Android only)
+   * @default 80
+   */
+  contentPaddingBottom?: number;
+  /**
+   * Padding untuk content container (Android only)
+   * Set to 0 untuk tidak ada padding, atau custom value sesuai kebutuhan
+   * @default 16
+   */
+  contentPadding?: number;
+}
+
+interface StaticModeProps extends BaseProps {
+  children: React.ReactNode;
+  listData?: never;
+  renderItem?: never;
+}
+
+interface ListModeProps extends BaseProps {
+  children?: never;
+  listData?: any[];
+  renderItem?: FlatListProps<any>["renderItem"];
+  onEndReached?: () => void;
+  ListHeaderComponent?: React.ReactElement | null;
+  ListFooterComponent?: React.ReactElement | null;
+  ListEmptyComponent?: React.ReactElement | null;
+  keyExtractor?: FlatListProps<any>["keyExtractor"];
+}
+
+type AndroidWrapperProps = StaticModeProps | ListModeProps;
+
+export function AndroidWrapper(props: AndroidWrapperProps) {
+  const {
+    withBackground = false,
+    headerComponent,
+    footerComponent,
+    floatingButton,
+    hideFooter = false,
+    edgesFooter = [],
+    style,
+    refreshControl,
+    enableKeyboardHandling = false,
+    keyboardScrollOffset,
+    contentPaddingBottom,
+    contentPadding,
+  } = props;
+
+  // Default values (should be set by OS_Wrapper, but fallback for direct usage)
+  const finalKeyboardScrollOffset = keyboardScrollOffset ?? 100;
+  const finalContentPaddingBottom = contentPaddingBottom ?? 250;
+  const finalContentPadding = contentPadding ?? 0;
+
+  const assetBackground = require("../../assets/images/main-background.png");
+
+  // Use keyboard hook if enabled
+  const keyboardForm = enableKeyboardHandling
+    ? useKeyboardForm(finalKeyboardScrollOffset)
+    : null;
+
+  const renderContainer = (content: React.ReactNode) => {
+    if (withBackground) {
+      return (
+        <ImageBackground
+          source={assetBackground}
+          resizeMode="cover"
+          style={GStyles.imageBackground}
+        >
+          <View style={[GStyles.containerWithBackground, style]}>
+            {content}
+          </View>
+        </ImageBackground>
+      );
+    }
+    return <View style={[GStyles.container, style]}>{content}</View>;
+  };
+
+  // 🔹 Mode Dinamis (FlatList)
+  if ("listData" in props) {
+    const listProps = props as ListModeProps;
+
+    return (
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss} style={{ flex: 1 }}>
+        <KeyboardAvoidingView
+          behavior={undefined}
+          style={{ flex: 1, backgroundColor: MainColor.darkblue }}
+        >
+          {headerComponent && (
+            <View style={GStyles.stickyHeader}>{headerComponent}</View>
+          )}
+          <FlatList
+            data={listProps.listData}
+            renderItem={listProps.renderItem}
+            keyExtractor={
+              listProps.keyExtractor ||
+              ((item, index) => `${String(item.id)}-${index}`)
+            }
+            refreshControl={refreshControl}
+            onEndReached={listProps.onEndReached}
+            onEndReachedThreshold={0.5}
+            ListHeaderComponent={listProps.ListHeaderComponent}
+            ListFooterComponent={listProps.ListFooterComponent}
+            ListEmptyComponent={listProps.ListEmptyComponent}
+            contentContainerStyle={{
+              flexGrow: 1,
+              paddingBottom:
+                (footerComponent && !hideFooter ? OS_HEIGHT : 0) +
+                finalContentPaddingBottom,
+              padding: finalContentPadding,
+            }}
+            keyboardShouldPersistTaps="handled"
+          />
+
+        {/* Footer - Fixed di bawah dengan width 100% */}
+        {footerComponent && !hideFooter && (
+          <SafeAreaView
+            edges={["bottom"]}
+            style={{ backgroundColor: MainColor.darkblue, width: "100%" }}
+          >
+            <View style={{ width: "100%" }}>{footerComponent}</View>
+          </SafeAreaView>
+        )}
+
+        {!footerComponent && !hideFooter && (
+          <SafeAreaView
+            edges={["bottom"]}
+            style={{ backgroundColor: MainColor.darkblue }}
+          />
+        )}
+
+        {floatingButton && (
+          <View style={GStyles.floatingContainer}>{floatingButton}</View>
+        )}
+      </KeyboardAvoidingView>
+    </TouchableWithoutFeedback>
+    );
+  }
+
+  // 🔹 Mode Statis (ScrollView)
+  const staticProps = props as StaticModeProps;
+
+  // Inject focus handler jika keyboard handling enabled
+  const childrenWithFocus = enableKeyboardHandling && keyboardForm
+    ? cloneChildrenWithFocusHandler(staticProps.children, keyboardForm.handleInputFocus)
+    : staticProps.children;
+
+  return (
+    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
+      {headerComponent && (
+        <View style={GStyles.stickyHeader}>{headerComponent}</View>
+      )}
+
+      <ScrollView
+        ref={keyboardForm?.scrollViewRef}
+        onScroll={keyboardForm?.handleScroll}
+        scrollEventThrottle={16}
+        refreshControl={refreshControl}
+        style={{ flex: 1 }}
+        contentContainerStyle={{
+          flexGrow: 1,
+          paddingBottom:
+            (footerComponent && !hideFooter ? OS_HEIGHT : 0) +
+            finalContentPaddingBottom,
+          padding: finalContentPadding,
+        }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          {renderContainer(childrenWithFocus)}
+        </TouchableWithoutFeedback>
+      </ScrollView>
+
+      {/* Footer - Fixed di bawah dengan width 100% */}
+      {footerComponent && !hideFooter && (
+        <SafeAreaView
+          edges={["bottom"]}
+          style={{
+            backgroundColor: MainColor.darkblue,
+            width: "100%",
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+          }}
+        >
+          <View style={{ width: "100%" }}>{footerComponent}</View>
+        </SafeAreaView>
+      )}
+
+      {!footerComponent && !hideFooter && (
+        <SafeAreaView
+          edges={["bottom"]}
+          style={{ backgroundColor: MainColor.darkblue }}
+        />
+      )}
+
+      {floatingButton && (
+        <View style={GStyles.floatingContainer}>{floatingButton}</View>
+      )}
+    </View>
+  );
+}
+
+export default AndroidWrapper;
--- a/components/_ShareComponent/FormWrapper.tsx
+++ b/components/_ShareComponent/FormWrapper.tsx
@@ -29,7 +29,7 @@ export function FormWrapper({
  contentPaddingBottom = 100,
  contentPadding = 16,
 }: FormWrapperProps) {
-  const { scrollViewRef, handleInputFocus } = useKeyboardForm(scrollOffset);
+  const { scrollViewRef, handleScroll } = useKeyboardForm(scrollOffset);

  return (
    <KeyboardAvoidingView
@@ -38,6 +38,8 @@ export function FormWrapper({
    >
      <ScrollView
        ref={scrollViewRef}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
        style={{ flex: 1 }}
        contentContainerStyle={{
          flexGrow: 1,
--- a/components/_ShareComponent/IOSWrapper.tsx
+++ b/components/_ShareComponent/IOSWrapper.tsx
@@ -0,0 +1,216 @@
+// @/components/iOSWrapper.tsx
+// iOS Wrapper - Based on NewWrapper (stable version for iOS)
+import { MainColor } from "@/constants/color-palet";
+import { OS_HEIGHT } from "@/constants/constans-value";
+import { GStyles } from "@/styles/global-styles";
+import {
+  ImageBackground,
+  Keyboard,
+  KeyboardAvoidingView,
+  ScrollView,
+  FlatList,
+  TouchableWithoutFeedback,
+  View,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import {
+  NativeSafeAreaViewProps,
+  SafeAreaView,
+} from "react-native-safe-area-context";
+import type { ScrollViewProps, FlatListProps } from "react-native";
+
+// --- Base Props ---
+interface BaseProps {
+  withBackground?: boolean;
+  headerComponent?: React.ReactNode;
+  footerComponent?: React.ReactNode;
+  floatingButton?: React.ReactNode;
+  hideFooter?: boolean;
+  edgesFooter?: NativeSafeAreaViewProps["edges"];
+  style?: StyleProp<ViewStyle>;
+  refreshControl?: ScrollViewProps["refreshControl"];
+}
+
+interface StaticModeProps extends BaseProps {
+  children: React.ReactNode;
+  listData?: never;
+  renderItem?: never;
+}
+
+interface ListModeProps extends BaseProps {
+  children?: never;
+  listData?: any[];
+  renderItem?: FlatListProps<any>["renderItem"];
+  onEndReached?: () => void;
+  ListHeaderComponent?: React.ReactElement | null;
+  ListFooterComponent?: React.ReactElement | null;
+  ListEmptyComponent?: React.ReactElement | null;
+  keyExtractor?: FlatListProps<any>["keyExtractor"];
+}
+
+type iOSWrapperProps = StaticModeProps | ListModeProps;
+
+const iOSWrapper = (props: iOSWrapperProps) => {
+  const {
+    withBackground = false,
+    headerComponent,
+    footerComponent,
+    floatingButton,
+    hideFooter = false,
+    edgesFooter = [],
+    style,
+    refreshControl,
+  } = props;
+
+  const assetBackground = require("../../assets/images/main-background.png");
+
+  const renderContainer = (content: React.ReactNode) => {
+    if (withBackground) {
+      return (
+        <ImageBackground
+          source={assetBackground}
+          resizeMode="cover"
+          style={GStyles.imageBackground}
+        >
+          <View style={[GStyles.containerWithBackground, style]}>
+            {content}
+          </View>
+        </ImageBackground>
+      );
+    }
+    return <View style={[GStyles.container, style]}>{content}</View>;
+  };
+
+  // 🔹 Mode Dinamis (FlatList)
+  if ("listData" in props) {
+    const listProps = props as ListModeProps;
+
+    return (
+      <KeyboardAvoidingView
+        behavior="padding"
+        style={{ flex: 1, backgroundColor: MainColor.darkblue }}
+      >
+        {headerComponent && (
+          <View style={GStyles.stickyHeader}>{headerComponent}</View>
+        )}
+        <View style={[GStyles.container, style, { flex: 1 }]}>
+          <FlatList
+            data={listProps.listData}
+            renderItem={listProps.renderItem}
+            keyExtractor={
+              listProps.keyExtractor ||
+              ((item, index) => {
+                if (item.id == null) {
+                  console.warn("Item tanpa 'id':", item);
+                  return `fallback-${index}-${JSON.stringify(item)}`;
+                }
+
+                return `${String(item.id)}-${index}`;
+              })
+            }
+            refreshControl={refreshControl}
+            onEndReached={listProps.onEndReached}
+            onEndReachedThreshold={0.5}
+            ListHeaderComponent={listProps.ListHeaderComponent}
+            ListFooterComponent={listProps.ListFooterComponent}
+            ListEmptyComponent={listProps.ListEmptyComponent}
+            contentContainerStyle={{
+              flexGrow: 1,
+              paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
+            }}
+            keyboardShouldPersistTaps="handled"
+          />
+        </View>
+
+        {/* Footer - tetap di bawah dengan position absolute */}
+        {footerComponent && !hideFooter && (
+          <View style={styles.footerContainer}>
+            <SafeAreaView
+              edges={edgesFooter}
+              style={{ backgroundColor: MainColor.darkblue }}
+            >
+              {footerComponent}
+            </SafeAreaView>
+          </View>
+        )}
+
+        {!footerComponent && !hideFooter && (
+          <SafeAreaView
+            edges={["bottom"]}
+            style={{ backgroundColor: MainColor.darkblue }}
+          />
+        )}
+
+        {floatingButton && (
+          <View style={GStyles.floatingContainer}>{floatingButton}</View>
+        )}
+      </KeyboardAvoidingView>
+    );
+  }
+
+  // 🔹 Mode Statis (ScrollView)
+  const staticProps = props as StaticModeProps;
+
+  return (
+    <KeyboardAvoidingView
+      behavior="padding"
+      style={{ flex: 1, backgroundColor: MainColor.darkblue }}
+    >
+      {headerComponent && (
+        <View style={GStyles.stickyHeader}>{headerComponent}</View>
+      )}
+
+      <View style={{ flex: 1 }}>
+        <ScrollView
+          contentContainerStyle={{
+            flexGrow: 1,
+            paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
+          }}
+          keyboardShouldPersistTaps="handled"
+          refreshControl={refreshControl}
+        >
+          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            {renderContainer(staticProps.children)}
+          </TouchableWithoutFeedback>
+        </ScrollView>
+      </View>
+
+      {/* Footer - tetap di bawah dengan position absolute */}
+      {footerComponent && !hideFooter && (
+        <View style={styles.footerContainer}>
+          <SafeAreaView
+            edges={edgesFooter}
+            style={{ backgroundColor: MainColor.darkblue }}
+          >
+            {footerComponent}
+          </SafeAreaView>
+        </View>
+      )}
+
+      {!footerComponent && !hideFooter && (
+        <SafeAreaView
+          edges={["bottom"]}
+          style={{ backgroundColor: MainColor.darkblue }}
+        />
+      )}
+
+      {floatingButton && (
+        <View style={GStyles.floatingContainer}>{floatingButton}</View>
+      )}
+    </KeyboardAvoidingView>
+  );
+};
+
+// Styles untuk footer dengan position absolute
+const styles = {
+  footerContainer: {
+    position: "absolute" as const,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: MainColor.darkblue,
+  },
+};
+
+export default iOSWrapper;
--- a/components/_ShareComponent/NewWrapper_V2.tsx
+++ b/components/_ShareComponent/NewWrapper_V2.tsx
@@ -45,14 +45,10 @@ interface BaseProps {
   */
  contentPaddingBottom?: number;
  /**
-   * Padding Top untuk content container (default: 8)
+   * Padding untuk content container (default: 16)
+   * Set to 0 untuk tidak ada padding, atau custom value sesuai kebutuhan
   */
-  contentPaddingTop?: number;
-  /**
-   * Padding Horizontal untuk content container (default: 0)
-   * Set ke 16 atau lebih jika butuh spacing di kiri-kanan
-   */
-  contentPaddingHorizontal?: number;
+  contentPadding?: number;
 }

 interface StaticModeProps extends BaseProps {
@@ -87,8 +83,7 @@ export function NewWrapper_V2(props: NewWrapper_V2_Props) {
    enableKeyboardHandling = false,
    keyboardScrollOffset = 100,
    contentPaddingBottom = 80, // Default 80 untuk navigasi device
-    contentPaddingTop = 8, // Default 8 untuk spacing atas
-    contentPaddingHorizontal = 0, // Default 0 agar aman untuk layout existing
+    contentPadding = 16, // Default 16 untuk padding konsisten
  } = props;

  const assetBackground = require("../../assets/images/main-background.png");
@@ -142,9 +137,8 @@ export function NewWrapper_V2(props: NewWrapper_V2_Props) {
          ListEmptyComponent={listProps.ListEmptyComponent}
          contentContainerStyle={{
            flexGrow: 1,
-            paddingTop: contentPaddingTop,
-            paddingHorizontal: contentPaddingHorizontal,
            paddingBottom: (footerComponent && !hideFooter ? OS_HEIGHT : 0) + contentPaddingBottom,
+            padding: contentPadding,
          }}
          keyboardShouldPersistTaps="handled"
        />
@@ -192,9 +186,8 @@ export function NewWrapper_V2(props: NewWrapper_V2_Props) {
        style={{ flex: 1 }}
        contentContainerStyle={{
          flexGrow: 1,
-          paddingTop: contentPaddingTop,
-          paddingHorizontal: contentPaddingHorizontal,
          paddingBottom: (footerComponent && !hideFooter ? OS_HEIGHT : 0) + contentPaddingBottom,
+          padding: contentPadding,
        }}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
--- a/components/_ShareComponent/OS_Wrapper.tsx
+++ b/components/_ShareComponent/OS_Wrapper.tsx
@@ -0,0 +1,154 @@
+// @/components/OS_Wrapper.tsx
+// OS-Specific Wrapper - Automatically routes to iOSWrapper or AndroidWrapper
+// iOS: Uses NewWrapper (stable for iOS)
+// Android: Uses NewWrapper_V2 (with keyboard handling)
+
+import { Platform } from "react-native";
+import type { ScrollViewProps, FlatListProps } from "react-native";
+import {
+  NativeSafeAreaViewProps,
+} from "react-native-safe-area-context";
+import type { StyleProp, ViewStyle } from "react-native";
+import IOSWrapper from "./IOSWrapper";
+import AndroidWrapper from "./AndroidWrapper";
+
+// ========== Base Props ==========
+interface BaseProps {
+  withBackground?: boolean;
+  headerComponent?: React.ReactNode;
+  footerComponent?: React.ReactNode;
+  floatingButton?: React.ReactNode;
+  hideFooter?: boolean;
+  edgesFooter?: NativeSafeAreaViewProps["edges"];
+  style?: StyleProp<ViewStyle>;
+  refreshControl?: ScrollViewProps["refreshControl"];
+}
+
+// ========== Static Mode Props ==========
+interface StaticModeProps extends BaseProps {
+  children: React.ReactNode;
+  listData?: never;
+  renderItem?: never;
+}
+
+// ========== List Mode Props ==========
+interface ListModeProps extends BaseProps {
+  children?: never;
+  listData?: any[];
+  renderItem?: FlatListProps<any>["renderItem"];
+  onEndReached?: () => void;
+  ListHeaderComponent?: React.ReactElement | null;
+  ListFooterComponent?: React.ReactElement | null;
+  ListEmptyComponent?: React.ReactElement | null;
+  keyExtractor?: FlatListProps<any>["keyExtractor"];
+}
+
+// ========== Keyboard Handling Props (Android only) ==========
+interface KeyboardHandlingProps {
+  /**
+   * Enable keyboard handling with auto-scroll (Android only)
+   * iOS ignores this prop
+   * @default false
+   */
+  enableKeyboardHandling?: boolean;
+
+  /**
+   * Scroll offset when keyboard appears (Android only)
+   * iOS ignores this prop
+   * @default 100
+   */
+  keyboardScrollOffset?: number;
+
+  /**
+   * Extra padding bottom for content (Android only)
+   * iOS ignores this prop
+   * @default 80
+   */
+  contentPaddingBottom?: number;
+
+  /**
+   * Padding untuk content container (Android only)
+   * iOS ignores this prop
+   * @default 16
+   */
+  contentPadding?: number;
+}
+
+// ========== Final Props Types ==========
+type OS_WrapperStaticProps = StaticModeProps & KeyboardHandlingProps;
+type OS_WrapperListProps = ListModeProps & KeyboardHandlingProps;
+
+type OS_WrapperProps = OS_WrapperStaticProps | OS_WrapperListProps;
+
+/**
+ * OS_Wrapper - Automatically selects iOSWrapper or AndroidWrapper based on platform
+ * 
+ * Features:
+ * - Auto platform detection
+ * - Optional keyboard handling for Android forms
+ * - Unified API for all use cases
+ *
+ * @example Static Mode (Simple Content)
+ * ```tsx
+ * <OS_Wrapper>
+ *   <YourContent />
+ * </OS_Wrapper>
+ * ```
+ *
+ * @example List Mode (with pagination)
+ * ```tsx
+ * <OS_Wrapper
+ *   listData={data}
+ *   renderItem={({ item }) => <ItemCard item={item} />}
+ *   ListEmptyComponent={<EmptyState />}
+ *   onEndReached={loadMore}
+ * />
+ * ```
+ *
+ * @example Form Mode (with keyboard handling - Android only)
+ * ```tsx
+ * <OS_Wrapper
+ *   enableKeyboardHandling
+ *   keyboardScrollOffset={150}
+ *   contentPaddingBottom={100}
+ *   footerComponent={<SubmitButton />}
+ * >
+ *   <FormContent />
+ * </OS_Wrapper>
+ * ```
+ */
+export function OS_Wrapper(props: OS_WrapperProps) {
+  const {
+    enableKeyboardHandling = false,
+    keyboardScrollOffset = 100,
+    contentPaddingBottom = 100,
+    contentPadding = 0,
+    ...wrapperProps
+  } = props;
+
+  // iOS uses IOSWrapper (based on NewWrapper)
+  if (Platform.OS === "ios") {
+    // Keyboard handling props are ignored on iOS
+    return <IOSWrapper {...(wrapperProps as any)} />;
+  }
+
+  // Android uses AndroidWrapper (with keyboard handling support)
+  return (
+    <AndroidWrapper
+      {...(wrapperProps as any)}
+      enableKeyboardHandling={enableKeyboardHandling}
+      keyboardScrollOffset={keyboardScrollOffset}
+      contentPaddingBottom={contentPaddingBottom}
+      contentPadding={contentPadding}
+    />
+  );
+}
+
+// Re-export individual wrappers for direct usage if needed
+export { default as IOSWrapper } from "./IOSWrapper";
+export { default as AndroidWrapper } from "./AndroidWrapper";
+
+// Legacy export untuk backward compatibility
+export { IOSWrapper as iOSWrapper };
+
+export default OS_Wrapper;
--- a/components/_ShareComponent/PageWrapper.tsx
+++ b/components/_ShareComponent/PageWrapper.tsx
@@ -1,229 +0,0 @@
-/**
- * PageWrapper - Platform-specific wrapper component
- * 
- * Routes to:
- * - iOS: NewWrapper (stable, tested)
- * - Android: NewWrapper_V2 (with keyboard handling fix)
- * 
- * Props are automatically adjusted based on platform.
- * 
- * @example
- * <PageWrapper
- *   footerComponent={buttonFooter}
- *   enableKeyboardHandling
- *   keyboardScrollOffset={100}
- * >
- *   {children}
- * </PageWrapper>
- */
-
-import { Platform } from "react-native";
-import { NewWrapper_V2 } from "./NewWrapper_V2";
-import type { NativeSafeAreaViewProps } from "react-native-safe-area-context";
-import type { ScrollViewProps, FlatListProps } from "react-native";
-import NewWrapper from "./NewWrapper";
-
-// ========== Base Props ==========
-interface BaseProps {
-  withBackground?: boolean;
-  headerComponent?: React.ReactNode;
-  footerComponent?: React.ReactNode;
-  floatingButton?: React.ReactNode;
-  hideFooter?: boolean;
-  edgesFooter?: NativeSafeAreaViewProps["edges"];
-  style?: any;
-  refreshControl?: ScrollViewProps["refreshControl"];
-}
-
-// ========== Static Mode Props ==========
-interface StaticModeProps extends BaseProps {
-  children: React.ReactNode;
-  listData?: never;
-  renderItem?: never;
-}
-
-// ========== List Mode Props ==========
-interface ListModeProps extends BaseProps {
-  children?: never;
-  listData?: any[];
-  renderItem?: FlatListProps<any>["renderItem"];
-  onEndReached?: () => void;
-  ListHeaderComponent?: React.ReactElement | null;
-  ListFooterComponent?: React.ReactElement | null;
-  ListEmptyComponent?: React.ReactElement | null;
-  keyExtractor?: FlatListProps<any>["keyExtractor"];
-}
-
-// ========== PageWrapper Props ==========
-interface PageWrapperBaseProps extends BaseProps {
-  /**
-   * Enable keyboard handling (Android only - NewWrapper_V2)
-   * iOS ignores this prop
-   * @default false
-   */
-  enableKeyboardHandling?: boolean;
-  
-  /**
-   * Scroll offset when keyboard appears (Android only)
-   * iOS ignores this prop
-   * @default 100
-   */
-  keyboardScrollOffset?: number;
-  
-  /**
-   * Extra padding bottom for content (Android only)
-   * iOS ignores this prop
-   * @default 80
-   */
-  contentPaddingBottom?: number;
-  
-  /**
-   * Padding Top for content container (Android only)
-   * iOS ignores this prop
-   * @default 8
-   */
-  contentPaddingTop?: number;
-  
-  /**
-   * Padding Horizontal for content container (Android only)
-   * iOS ignores this prop
-   * @default 0
-   */
-  contentPaddingHorizontal?: number;
-}
-
-interface PageWrapperStaticProps extends PageWrapperBaseProps {
-  children: React.ReactNode;
-  listData?: never;
-  renderItem?: never;
-}
-
-interface PageWrapperListProps extends PageWrapperBaseProps {
-  children?: never;
-  listData?: any[];
-  renderItem?: FlatListProps<any>["renderItem"];
-  onEndReached?: () => void;
-  ListHeaderComponent?: React.ReactElement | null;
-  ListFooterComponent?: React.ReactElement | null;
-  ListEmptyComponent?: React.ReactElement | null;
-  keyExtractor?: FlatListProps<any>["keyExtractor"];
-}
-
-type PageWrapperProps = PageWrapperStaticProps | PageWrapperListProps;
-
-export function PageWrapper(props: PageWrapperProps) {
-  const {
-    withBackground,
-    headerComponent,
-    footerComponent,
-    floatingButton,
-    hideFooter,
-    edgesFooter,
-    style,
-    refreshControl,
-    enableKeyboardHandling,
-    keyboardScrollOffset,
-    contentPaddingBottom,
-    contentPaddingTop,
-    contentPaddingHorizontal,
-    ...restProps
-  } = props;
-
-  // ========== Android: Use NewWrapper_V2 with keyboard handling ==========
-  if (Platform.OS === "android") {
-    if ("listData" in props) {
-      // List mode
-      const listProps = props as PageWrapperListProps;
-      return (
-        <NewWrapper_V2
-          listData={listProps.listData}
-          renderItem={listProps.renderItem}
-          onEndReached={listProps.onEndReached}
-          ListHeaderComponent={listProps.ListHeaderComponent}
-          ListFooterComponent={listProps.ListFooterComponent}
-          ListEmptyComponent={listProps.ListEmptyComponent}
-          keyExtractor={listProps.keyExtractor}
-          withBackground={withBackground}
-          headerComponent={headerComponent}
-          footerComponent={footerComponent}
-          floatingButton={floatingButton}
-          hideFooter={hideFooter}
-          edgesFooter={edgesFooter}
-          style={style}
-          refreshControl={refreshControl}
-          enableKeyboardHandling={enableKeyboardHandling}
-          keyboardScrollOffset={keyboardScrollOffset}
-          contentPaddingBottom={contentPaddingBottom}
-          contentPaddingTop={contentPaddingTop}
-          contentPaddingHorizontal={contentPaddingHorizontal}
-        />
-      );
-    }
-
-    // Static mode
-    const staticProps = props as PageWrapperStaticProps;
-    return (
-      <NewWrapper_V2
-        withBackground={withBackground}
-        headerComponent={headerComponent}
-        footerComponent={footerComponent}
-        floatingButton={floatingButton}
-        hideFooter={hideFooter}
-        edgesFooter={edgesFooter}
-        style={style}
-        refreshControl={refreshControl}
-        enableKeyboardHandling={enableKeyboardHandling}
-        keyboardScrollOffset={keyboardScrollOffset}
-        contentPaddingBottom={contentPaddingBottom}
-        contentPaddingTop={contentPaddingTop}
-        contentPaddingHorizontal={contentPaddingHorizontal}
-      >
-        {staticProps.children}
-      </NewWrapper_V2>
-    );
-  }
-
-  // ========== iOS: Use NewWrapper (stable) ==========
-  if ("listData" in props) {
-    // List mode
-    const listProps = props as PageWrapperListProps;
-    return (
-      <NewWrapper
-        listData={listProps.listData}
-        renderItem={listProps.renderItem}
-        onEndReached={listProps.onEndReached}
-        ListHeaderComponent={listProps.ListHeaderComponent}
-        ListFooterComponent={listProps.ListFooterComponent}
-        ListEmptyComponent={listProps.ListEmptyComponent}
-        keyExtractor={listProps.keyExtractor}
-        withBackground={withBackground}
-        headerComponent={headerComponent}
-        footerComponent={footerComponent}
-        floatingButton={floatingButton}
-        hideFooter={hideFooter}
-        edgesFooter={edgesFooter}
-        style={style}
-        refreshControl={refreshControl}
-      />
-    );
-  }
-
-  // Static mode
-  const staticProps = props as PageWrapperStaticProps;
-  return (
-    <NewWrapper
-      withBackground={withBackground}
-      headerComponent={headerComponent}
-      footerComponent={footerComponent}
-      floatingButton={floatingButton}
-      hideFooter={hideFooter}
-      edgesFooter={edgesFooter}
-      style={style}
-      refreshControl={refreshControl}
-    >
-      {staticProps.children}
-    </NewWrapper>
-  );
-}
-
-export default PageWrapper;
--- a/components/index.ts
+++ b/components/index.ts
@@ -65,7 +65,8 @@ import NewWrapper from "./_ShareComponent/NewWrapper";
 import BasicWrapper from "./_ShareComponent/BasicWrapper";
 import { FormWrapper } from "./_ShareComponent/FormWrapper";
 import { NewWrapper_V2 } from "./_ShareComponent/NewWrapper_V2";
-import { PageWrapper } from "./_ShareComponent/PageWrapper";
+// OS-Specific Wrappers
+import OS_Wrapper, { IOSWrapper, AndroidWrapper } from "./_ShareComponent/OS_Wrapper";

 // Progress
 import ProgressCustom from "./Progress/ProgressCustom";
@@ -133,7 +134,10 @@ export {
  BasicWrapper,
  FormWrapper,
  NewWrapper_V2,
-  PageWrapper,
+  // OS-Specific Wrappers
+  OS_Wrapper,
+  IOSWrapper,
+  AndroidWrapper,
  // Stack
  StackCustom,
  TabBarBackground,
--- a/constants/constans-value.ts
+++ b/constants/constans-value.ts
@@ -4,6 +4,10 @@ export {
  OS_ANDROID_HEIGHT,
  OS_IOS_HEIGHT,
  OS_HEIGHT,
+  OS_ANDROID_PADDING_TOP,
+  OS_IOS_PADDING_TOP,
+  OS_PADDING_TOP,
+  PADDING_INLINE,
  TEXT_SIZE_SMALL,
  TEXT_SIZE_MEDIUM,
  TEXT_SIZE_LARGE,
@@ -23,10 +27,15 @@ export {
 };

 // OS Height
-const OS_ANDROID_HEIGHT = 65
+const OS_ANDROID_HEIGHT = 60
 const OS_IOS_HEIGHT = 80
 const OS_HEIGHT = Platform.OS === "ios" ? OS_IOS_HEIGHT : OS_ANDROID_HEIGHT

+// OS Padding Top
+const OS_ANDROID_PADDING_TOP = 6
+const OS_IOS_PADDING_TOP = 12
+const OS_PADDING_TOP = Platform.OS === "ios" ? OS_IOS_PADDING_TOP : OS_ANDROID_PADDING_TOP
+
 // Text Size
 const TEXT_SIZE_SMALL = 12;
 const TEXT_SIZE_MEDIUM = 14;
@@ -47,6 +56,7 @@ const DRAWER_HEIGHT = 500; // tinggi drawer5
 const RADIUS_BUTTON = 50

 // Padding
+const PADDING_INLINE = 16
 const PADDING_EXTRA_SMALL = 10
 const PADDING_SMALL = 12
 const PADDING_MEDIUM = 16
--- a/docs/OS-Wrapper-Quick-Reference.md
+++ b/docs/OS-Wrapper-Quick-Reference.md
@@ -0,0 +1,158 @@
+# OS_Wrapper Quick Reference
+
+## 📦 Import
+```tsx
+import { OS_Wrapper, IOSWrapper, AndroidWrapper } from "@/components";
+```
+
+## 🎯 Usage Examples
+
+### 1. OS_Wrapper - List Mode (Most Common)
+```tsx
+<OS_Wrapper
+  listData={data}
+  renderItem={({ item }) => <Card item={item} />}
+  ListEmptyComponent={<EmptyState />}
+  ListFooterComponent={<LoadingFooter />}
+  onEndReached={loadMore}
+  refreshControl={
+    <RefreshControl
+      refreshing={refreshing}
+      onRefresh={onRefresh}
+    />
+  }
+/>
+```
+
+### 2. OS_Wrapper - Static Mode
+```tsx
+<OS_Wrapper
+  headerComponent={<HeaderSection />}
+  footerComponent={<FooterSection />}
+  withBackground={true}
+>
+  <YourContent />
+</OS_Wrapper>
+```
+
+### 3. OS_Wrapper - Form dengan Keyboard Handling
+```tsx
+<OS_Wrapper
+  enableKeyboardHandling
+  keyboardScrollOffset={150}
+  contentPaddingBottom={100}
+  footerComponent={
+    <BoxButtonOnFooter>
+      <ButtonCustom isLoading={loading} onPress={handleSubmit}>
+        Submit
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  }
+>
+  <ScrollView>
+    <TextInputCustom />
+    <TextInputCustom />
+  </ScrollView>
+</OS_Wrapper>
+```
+
+### 4. Platform-Specific (Rare Cases)
+```tsx
+// iOS only
+<IOSWrapper>
+  <Content />
+</IOSWrapper>
+
+// Android only
+<AndroidWrapper enableKeyboardHandling>
+  <Content />
+</AndroidWrapper>
+```
+
+## 📋 Props Reference
+
+### Common Props (iOS + Android)
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `withBackground` | boolean | false | Show background image |
+| `headerComponent` | ReactNode | - | Sticky header component |
+| `footerComponent` | ReactNode | - | Fixed footer component |
+| `floatingButton` | ReactNode | - | Floating button |
+| `hideFooter` | boolean | false | Hide footer section |
+| `edgesFooter` | Edge[] | [] | Safe area edges |
+| `style` | ViewStyle | - | Custom container style |
+| `refreshControl` | RefreshControl | - | Pull to refresh control |
+
+### Android-Only Props (Ignored on iOS)
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `enableKeyboardHandling` | boolean | false | Auto-scroll on input focus |
+| `keyboardScrollOffset` | number | 100 | Scroll offset when keyboard appears |
+| `contentPaddingBottom` | number | 80 | Extra bottom padding |
+| `contentPadding` | number | 16 | Content padding (all sides) |
+
+## 🔄 Migration Pattern
+
+```diff
+- import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+ import { OS_Wrapper } from "@/components";
+
+- <NewWrapper
+ <OS_Wrapper
+    listData={data}
+    renderItem={renderItem}
+    {...otherProps}
+  />
+```
+
+```diff
+- import { NewWrapper_V2 } from "@/components/_ShareComponent/NewWrapper_V2";
+ import { OS_Wrapper } from "@/components";
+
+- <NewWrapper_V2 enableKeyboardHandling>
+ <OS_Wrapper enableKeyboardHandling>
+    <FormContent />
+  </NewWrapper_V2>
+```
+
+## 💡 Tips
+
+1. **Pakai OS_Wrapper** untuk semua screen (list, detail, form)
+2. **Tambahkan `enableKeyboardHandling`** untuk form dengan input fields
+3. **Jangan mix** wrapper lama dan baru di screen yang sama
+4. **Test di kedua platform** sebelum commit
+5. **Keyboard handling** hanya bekerja di Android (iOS mengabaikan props ini)
+
+## ⚠️ Common Mistakes
+
+### ❌ Wrong
+```tsx
+// Jangan import langsung dari file
+import OS_Wrapper from "@/components/_ShareComponent/OS_Wrapper";
+
+// Jangan mix wrapper
+<OS_Wrapper>
+  <NewWrapper>{content}</NewWrapper>
+</OS_Wrapper>
+
+// Jangan pakai PageWrapper (sudah tidak ada)
+import { PageWrapper } from "@/components";
+```
+
+### ✅ Correct
+```tsx
+// Import dari @/components
+import { OS_Wrapper } from "@/components";
+
+// Simple content
+<OS_Wrapper>{content}</OS_Wrapper>
+
+// Form with keyboard handling
+<OS_Wrapper enableKeyboardHandling keyboardScrollOffset={150}>
+  <FormContent />
+</OS_Wrapper>
+```
+
+---
+
+Last updated: 2026-04-06
--- a/docs/PAGEWRAPPER-USAGE.md
+++ b/docs/PAGEWRAPPER-USAGE.md
@@ -1,304 +0,0 @@
-# PageWrapper - Platform-Specific Wrapper
-
-## 📋 Overview
-
-`PageWrapper` adalah wrapper component yang secara otomatis memilih wrapper yang tepat berdasarkan platform:
-
- **iOS**: Menggunakan `NewWrapper` (stable, tested)
- **Android**: Menggunakan `NewWrapper_V2` (dengan keyboard handling fix)
-
-## 🎯 Kapan Menggunakan PageWrapper?
-
-### ✅ **Gunakan PageWrapper untuk:**
- Screen baru yang kamu buat
- Migrasi screen existing dari `NewWrapper`/`ViewWrapper`
- Form screens dengan TextInput/TextArea
- List screens dengan pagination
-
-### ❌ **Jangan gunakan PageWrapper untuk:**
- Screen yang sudah menggunakan `NewWrapper_V2` langsung dan sudah tested di iOS
- Custom wrapper requirements
-
---
-
-## 📝 Usage
-
-### **Basic Usage (Static Content)**
-
-```typescript
-import { PageWrapper } from "@/components";
-
-export function MyScreen() {
-  return (
-    <PageWrapper
-      footerComponent={<ButtonFooter />}
-    >
-      <StackCustom>
-        <TextInputCustom label="Name" />
-        <TextAreaCustom label="Description" />
-      </StackCustom>
-    </PageWrapper>
-  );
-}
-```
-
-### **With Keyboard Handling (Android Only)**
-
-```typescript
-<PageWrapper
-  enableKeyboardHandling
-  keyboardScrollOffset={100}
-  contentPaddingHorizontal={16}
-  footerComponent={<ButtonFooter />}
->
-  <StackCustom>
-    <View onStartShouldSetResponder={() => true}>
-      <TextInputCustom label="Name" />
-    </View>
-    <View onStartShouldSetResponder={() => true}>
-      <TextAreaCustom label="Description" />
-    </View>
-  </StackCustom>
-</PageWrapper>
-```
-
-### **List Mode (Pagination)**
-
-```typescript
-<PageWrapper
-  listData={pagination.listData}
-  renderItem={renderItem}
-  onEndReached={pagination.loadMore}
-  ListEmptyComponent={ListEmptyComponent}
-  ListFooterComponent={ListFooterComponent}
-  refreshControl={
-    <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-  }
-/>
-```
-
---
-
-## 🔧 Props
-
-### **Common Props (iOS & Android)**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `footerComponent` | `ReactNode` | - | Fixed footer component |
-| `headerComponent` | `ReactNode` | - | Header component (sticky) |
-| `floatingButton` | `ReactNode` | - | Floating button overlay |
-| `hideFooter` | `boolean` | `false` | Hide footer footer |
-| `withBackground` | `boolean` | `false` | Use background image |
-| `style` | `ViewStyle` | - | Custom container style |
-| `refreshControl` | `RefreshControl` | - | Pull-to-refresh control |
-
-### **Android-Only Props** (Ignored di iOS)
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `enableKeyboardHandling` | `boolean` | `false` | Enable keyboard auto-scroll |
-| `keyboardScrollOffset` | `number` | `100` | Scroll offset when keyboard appears |
-| `contentPaddingBottom` | `number` | `80` | Bottom padding for content |
-| `contentPaddingTop` | `number` | `8` | Top padding for content |
-| `contentPaddingHorizontal` | `number` | `0` | Horizontal padding for content |
-
---
-
-## 📊 Platform Behavior
-
-| Feature | iOS (NewWrapper) | Android (NewWrapper_V2) |
-|---------|------------------|------------------------|
-| **Keyboard Handling** | ❌ No auto-scroll | ✅ Auto-scroll to input |
-| **Footer Position** | ✅ Fixed bottom | ✅ Fixed bottom (absolute) |
-| **Safe Area** | ✅ Handled | ✅ Handled |
-| **Content Padding** | Default | Customizable |
-| **List Mode** | ✅ Supported | ✅ Supported |
-
---
-
-## 🔄 Migration Guide
-
-### **From NewWrapper**
-
-```typescript
-// BEFORE
-import { NewWrapper } from "@/components";
-
-<NewWrapper footerComponent={footer}>
-  {children}
-</NewWrapper>
-
-// AFTER
-import { PageWrapper } from "@/components";
-
-<PageWrapper footerComponent={footer}>
-  {children}
-</PageWrapper>
-```
-
-### **From NewWrapper_V2**
-
-```typescript
-// BEFORE
-import { NewWrapper_V2 } from "@/components";
-
-<NewWrapper_V2
-  enableKeyboardHandling
-  keyboardScrollOffset={100}
-  footerComponent={footer}
->
-  <View onStartShouldSetResponder={() => true}>
-    <TextInputCustom />
-  </View>
-</NewWrapper_V2>
-
-// AFTER
-import { PageWrapper } from "@/components";
-
-<PageWrapper
-  enableKeyboardHandling
-  keyboardScrollOffset={100}
-  footerComponent={footer}
->
-  <View onStartShouldSetResponder={() => true}>
-    <TextInputCustom />
-  </View>
-</PageWrapper>
-```
-
---
-
-## ⚠️ Important Notes
-
-### **For Form Screens (Android)**
-
-Jika menggunakan `enableKeyboardHandling`, **WAJIB wrap semua input** dengan `View onStartShouldSetResponder`:
-
-```typescript
-<View onStartShouldSetResponder={() => true}>
-  <TextInputCustom label="Name" />
-</View>
-```
-
-**Kenapa?**
- Mencegah keyboard handling conflict
- Memastikan tap outside dismiss keyboard
- Konsisten behavior di Android
-
-### **For iOS Users**
-
-Props berikut **diabaikan di iOS**:
- `enableKeyboardHandling`
- `keyboardScrollOffset`
- `contentPaddingBottom`
- `contentPaddingTop`
- `contentPaddingHorizontal`
-
-iOS menggunakan `NewWrapper` yang sudah stable tanpa keyboard handling.
-
---
-
-## 🎨 Examples
-
-### **Example 1: Simple Form**
-
-```typescript
-import { PageWrapper, TextInputCustom, StackCustom } from "@/components";
-
-export function SimpleForm() {
-  return (
-    <PageWrapper
-      enableKeyboardHandling
-      keyboardScrollOffset={100}
-      footerComponent={<SubmitButton />}
-    >
-      <StackCustom>
-        <View onStartShouldSetResponder={() => true}>
-          <TextInputCustom label="Name" />
-        </View>
-        <View onStartShouldSetResponder={() => true}>
-          <TextInputCustom label="Email" />
-        </View>
-      </StackCustom>
-    </PageWrapper>
-  );
-}
-```
-
-### **Example 2: List with Pagination**
-
-```typescript
-import { PageWrapper } from "@/components";
-
-export function UserList() {
-  const pagination = usePagination({ fetchFunction: fetchUsers });
-
-  return (
-    <PageWrapper
-      listData={pagination.listData}
-      renderItem={({ item }) => <UserCard item={item} />}
-      onEndReached={pagination.loadMore}
-      ListEmptyComponent={<EmptyState />}
-      ListFooterComponent={<LoadingFooter />}
-      refreshControl={
-        <RefreshControl
-          refreshing={pagination.refreshing}
-          onRefresh={pagination.refresh}
-        />
-      }
-    />
-  );
-}
-```
-
-### **Example 3: Detail Screen (No Footer)**
-
-```typescript
-import { PageWrapper } from "@/components";
-
-export function DetailScreen() {
-  return (
-    <PageWrapper hideFooter>
-      <StackCustom>
-        <TextCustom>Title</TextCustom>
-        <TextCustom>Description</TextCustom>
-      </StackCustom>
-    </PageWrapper>
-  );
-}
-```
-
---
-
-## 🚀 Future Plans
-
-### **Phase 1: Current** (Now)
- ✅ `PageWrapper` created
- ✅ iOS → `NewWrapper` (stable)
- ✅ Android → `NewWrapper_V2` (keyboard fix)
-
-### **Phase 2: iOS Migration** (1-2 months)
- [ ] Fix iOS bugs di `NewWrapper_V2`
- [ ] Test `NewWrapper_V2` di iOS devices
- [ ] Update `PageWrapper` untuk use V2 untuk iOS juga
-
-### **Phase 3: Unify** (3 months)
- [ ] Deprecate `NewWrapper` lama
- [ ] Rename `NewWrapper_V2` → `NewWrapper`
- [ ] Update `PageWrapper` untuk always use V2
-
---
-
-## 📚 Related Files
-
- `components/_ShareComponent/PageWrapper.tsx` - Main component
- `components/_ShareComponent/NewWrapper.tsx` - iOS wrapper
- `components/_ShareComponent/NewWrapper_V2.tsx` - Android wrapper
- `hooks/useKeyboardForm.ts` - Keyboard handling hook
-
---
-
-**Last Updated**: 2026-04-06  
-**Created by**: AI Assistant  
-**Status**: ✅ Ready to use
--- a/hooks/useKeyboardForm.ts
+++ b/hooks/useKeyboardForm.ts
@@ -1,25 +1,62 @@
 // useKeyboardForm.ts - Hook untuk keyboard handling pada form
-import { Keyboard, ScrollView } from "react-native";
-import { useState, useEffect, useRef } from "react";
+import { Keyboard, ScrollView, Dimensions, findNodeHandle, UIManager } from "react-native";
+import { useState, useEffect, useRef, useCallback } from "react";

 export function useKeyboardForm(scrollOffset = 100) {
  const scrollViewRef = useRef<ScrollView>(null);
  const [keyboardHeight, setKeyboardHeight] = useState(0);
-  const [focusedInputY, setFocusedInputY] = useState<number | null>(null);
+  const currentScrollY = useRef(0);
+  const inputPageY = useRef(0);
+  const screenHeight = Dimensions.get('window').height;
+
+  // Fungsi untuk mengukur posisi absolut input
+  const handleInputFocus = useCallback((target: any) => {
+    const nodeHandle = findNodeHandle(target);
+    if (nodeHandle) {
+      UIManager.measure(nodeHandle, (x, y, width, height, pageX, pageY) => {
+        if (pageY !== undefined && pageY !== null) {
+          inputPageY.current = pageY;
+        }
+      });
+    }
+  }, []);

  // Listen to keyboard events
  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      (e) => {
-        setKeyboardHeight(e.endCoordinates.height);
+        const kbHeight = e.endCoordinates.height;
+        setKeyboardHeight(kbHeight);
+        
+        // Conditional scroll: hanya scroll jika input tertutup keyboard
+        if (scrollViewRef.current) {
+          const touchAbsoluteY = inputPageY.current;
+          
+          // Posisi Y teratas keyboard (dari atas layar)
+          const keyboardTopY = screenHeight - kbHeight;
+          
+          // Jika input ADA DI BAWAH keyboard (tertutup)
+          if (touchAbsoluteY > keyboardTopY) {
+            // Hitung berapa harus scroll agar input terlihat di atas keyboard
+            const scrollBy = touchAbsoluteY - keyboardTopY + scrollOffset;
+            const targetY = currentScrollY.current + scrollBy;
+            
+            scrollViewRef.current.scrollTo({
+              y: Math.max(0, targetY),
+              animated: true,
+            });
+          }
+          // Jika input SUDAH TERLIHAT (di atas keyboard), JANGAN SCROLL
+        }
      }
    );
+    
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        setKeyboardHeight(0);
-        setFocusedInputY(null);
+        inputPageY.current = 0;
      }
    );

@@ -27,41 +64,74 @@ export function useKeyboardForm(scrollOffset = 100) {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
-  }, []);
+  }, [scrollOffset, screenHeight]);

-  // Scroll ke focused input
-  useEffect(() => {
-    if (focusedInputY !== null && keyboardHeight > 0 && scrollViewRef.current) {
-      setTimeout(() => {
-        scrollViewRef.current?.scrollTo({
-          y: Math.max(0, focusedInputY - scrollOffset),
-          animated: true,
-        });
-      }, 100);
-    }
-  }, [focusedInputY, keyboardHeight, scrollOffset]);
-
-  // Handler untuk track focused input position
-  const handleInputFocus = (yPosition: number) => {
-    setFocusedInputY(yPosition);
-  };
-
-  // Helper untuk create onFocus handler
-  const createFocusHandler = () => {
-    return (e: any) => {
-      e.target?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
-        if (pageY !== null) {
-          handleInputFocus(pageY);
-        }
-      });
-    };
+  // Track scroll position
+  const handleScroll = (event: any) => {
+    currentScrollY.current = event.nativeEvent.contentOffset.y;
  };

  return {
    scrollViewRef,
    keyboardHeight,
-    focusedInputY,
    handleInputFocus,
-    createFocusHandler,
+    handleScroll,
  };
 }
+
+/**
+ * Helper untuk inject onFocus handler ke semua TextInput/TextArea children
+ * Menggunakan UI.measure untuk mendapatkan posisi absolut input secara akurat
+ */
+export function cloneChildrenWithFocusHandler(
+  children: React.ReactNode,
+  focusHandler: (target: any) => void
+): React.ReactNode {
+  if (!children) return children;
+  const React = require("react");
+
+  return React.Children.map(children, (child: any) => {
+    if (!React.isValidElement(child)) return child;
+
+    const childType = child.type;
+    const childProps = child.props as Record<string, any> || {};
+
+    // Check if it's a text input component
+    let isTextInput = false;
+    
+    if (typeof childType === 'string') {
+      isTextInput = childType.toLowerCase().includes('textinput');
+    } else if (childType) {
+      isTextInput = 
+        (childType as any).displayName?.includes('TextInput') ||
+        (childType as any).name?.includes('TextInput') ||
+        (childType as any).displayName?.includes('TextArea') ||
+        (childType as any).name?.includes('TextArea') ||
+        (childType as any).displayName?.includes('PhoneInput') ||
+        (childType as any).name?.includes('PhoneInput') ||
+        (childType as any).displayName?.includes('Select') ||
+        (childType as any).name?.includes('Select');
+    }
+
+    if (isTextInput) {
+      const existingOnFocus = childProps.onFocus;
+      return React.cloneElement(child, {
+        ...childProps,
+        onFocus: (e: any) => {
+          existingOnFocus?.(e);
+          focusHandler(e.target);
+        },
+      } as any);
+    }
+
+    // Recursively clone nested children
+    if (childProps.children) {
+      return React.cloneElement(child, {
+        ...childProps,
+        children: cloneChildrenWithFocusHandler(childProps.children, focusHandler),
+      } as any);
+    }
+
+    return child;
+  });
+}
--- a/ios/HIPMIBadungConnect.xcodeproj/project.pbxproj
+++ b/ios/HIPMIBadungConnect.xcodeproj/project.pbxproj
@@ -154,9 +154,7 @@
 				3F53CC1C3B278545F11A1CAE /* [CP-User] [RNFB] Core Configuration */,
 				46ED08049A384B869D77364E /* Remove signature files (Xcode workaround) */,
 				92A25C61F4E34FB6A36E415B /* Remove signature files (Xcode workaround) */,
-				6440E59133324659A2C60D0B /* Remove signature files (Xcode workaround) */,
-				35CC0495598542E6801662A3 /* Remove signature files (Xcode workaround) */,
-				5ED53AFC8AD1445DA81C7BD4 /* Remove signature files (Xcode workaround) */,
+				B122FE573BBA4E8C86B8F1C3 /* Remove signature files (Xcode workaround) */,
 			);
 			buildRules = (
 			);
@@ -468,41 +466,7 @@
          rm -rf \"$CONFIGURATION_BUILD_DIR/MapLibre.xcframework-ios.signature\";
        ";
 		};
-		6440E59133324659A2C60D0B /* Remove signature files (Xcode workaround) */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			name = "Remove signature files (Xcode workaround)";
-			inputPaths = (
-			);
-			outputPaths = (
-			);
-			shellPath = /bin/sh;
-			shellScript = "
-          echo \"Remove signature files (Xcode workaround)\";
-          rm -rf \"$CONFIGURATION_BUILD_DIR/MapLibre.xcframework-ios.signature\";
-        ";
-		};
-		35CC0495598542E6801662A3 /* Remove signature files (Xcode workaround) */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			name = "Remove signature files (Xcode workaround)";
-			inputPaths = (
-			);
-			outputPaths = (
-			);
-			shellPath = /bin/sh;
-			shellScript = "
-          echo \"Remove signature files (Xcode workaround)\";
-          rm -rf \"$CONFIGURATION_BUILD_DIR/MapLibre.xcframework-ios.signature\";
-        ";
-		};
-		5ED53AFC8AD1445DA81C7BD4 /* Remove signature files (Xcode workaround) */ = {
+		B122FE573BBA4E8C86B8F1C3 /* Remove signature files (Xcode workaround) */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
--- a/ios/HIPMIBadungConnect.xcworkspace/xcshareddata/swiftpm/Package.resolved
+++ b/ios/HIPMIBadungConnect.xcworkspace/xcshareddata/swiftpm/Package.resolved
@@ -1,15 +0,0 @@
-{
-  "originHash" : "e70d3525c8e2819a8b34f22909815dab5c700c25a06c32388f3930f7b3627768",
-  "pins" : [
-    {
-      "identity" : "maplibre-gl-native-distribution",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/maplibre/maplibre-gl-native-distribution",
-      "state" : {
-        "revision" : "c68c970ff3ece56cfc3b36849db70167fa208beb",
-        "version" : "6.17.1"
-      }
-    }
-  ],
-  "version" : 3
-}
--- a/screens/Job/MainViewStatus.tsx
+++ b/screens/Job/MainViewStatus.tsx
@@ -2,9 +2,9 @@
 import {
  BaseBox,
  LoaderCustom,
+  OS_Wrapper,
  ScrollableCustom,
  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
@@ -12,6 +12,7 @@ import { apiJobGetByStatus } from "@/service/api-client/api-job";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
+import { PADDING_INLINE } from "@/constants/constans-value";

 export default function Job_MainViewStatus() {
  const { user } = useAuth();
@@ -64,7 +65,7 @@ export default function Job_MainViewStatus() {

  return (
    <>
-      <ViewWrapper headerComponent={scrollComponent} hideFooter>
+      <OS_Wrapper headerComponent={scrollComponent} hideFooter contentPadding={PADDING_INLINE}>
        {isLoadList ? (
          <LoaderCustom />
        ) : _.isEmpty(listData) ? (
@@ -85,7 +86,7 @@ export default function Job_MainViewStatus() {
            </BaseBox>
          ))
        )}
-      </ViewWrapper>
+      </OS_Wrapper>
    </>
  );
 }
--- a/screens/Job/MainViewStatus2.tsx
+++ b/screens/Job/MainViewStatus2.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { BaseBox, PageWrapper, ScrollableCustom, TextCustom } from "@/components";
+import { BaseBox, OS_Wrapper, ScrollableCustom, TextCustom } from "@/components";
 import { MainColor } from "@/constants/color-palet";
-import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { PAGINATION_DEFAULT_TAKE, PADDING_INLINE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { useAuth } from "@/hooks/use-auth";
 import { usePagination } from "@/hooks/use-pagination";
@@ -86,8 +86,7 @@ export default function Job_MainViewStatus2() {
  );

  return (
-    <PageWrapper
-      contentPaddingHorizontal={16}
+    <OS_Wrapper
      headerComponent={<View style={{ paddingTop: 8 }}>{scrollComponent}</View>}
      listData={pagination.listData}
      renderItem={renderJobItem}
@@ -103,6 +102,7 @@ export default function Job_MainViewStatus2() {
      ListEmptyComponent={ListEmptyComponent}
      ListFooterComponent={ListFooterComponent}
      hideFooter
+      contentPadding={PADDING_INLINE}
    />
  );
 }
--- a/screens/Job/ScreenArchive.tsx
+++ b/screens/Job/ScreenArchive.tsx
@@ -1,10 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { BaseBox, LoaderCustom, PageWrapper, TextCustom } from "@/components";
+import { BaseBox, LoaderCustom, OS_Wrapper, TextCustom } from "@/components";
 import { useAuth } from "@/hooks/use-auth";
 import { apiJobGetAll } from "@/service/api-client/api-job";
 import { useFocusEffect } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
+import { PADDING_INLINE } from "@/constants/constans-value";

 export default function Job_ScreenArchive() {
  const { user } = useAuth();
@@ -33,7 +34,7 @@ export default function Job_ScreenArchive() {
  };

  return (
-    <PageWrapper hideFooter>
+    <OS_Wrapper hideFooter contentPadding={PADDING_INLINE}>
      {isLoadData ? (
        <LoaderCustom />
      ) : _.isEmpty(listData) ? (
@@ -52,6 +53,6 @@ export default function Job_ScreenArchive() {
          </BaseBox>
        ))
      )}
-    </PageWrapper>
+    </OS_Wrapper>
  );
 }
--- a/screens/Job/ScreenArchive2.tsx
+++ b/screens/Job/ScreenArchive2.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { BaseBox, PageWrapper, TextCustom } from "@/components";
+import { BaseBox, OS_Wrapper, TextCustom } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { useAuth } from "@/hooks/use-auth";
@@ -9,7 +9,7 @@ import { useFocusEffect } from "expo-router";
 import _ from "lodash";
 import { useState } from "react";
 import { RefreshControl } from "react-native";
-import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { PAGINATION_DEFAULT_TAKE, PADDING_INLINE } from "@/constants/constans-value";

 export default function Job_ScreenArchive2() {
  const { user } = useAuth();
@@ -55,8 +55,7 @@ export default function Job_ScreenArchive2() {
  );

  return (
-    <PageWrapper
-      contentPaddingHorizontal={16}
+    <OS_Wrapper
      listData={pagination.listData}
      renderItem={renderJobItem}
      refreshControl={
@@ -71,6 +70,7 @@ export default function Job_ScreenArchive2() {
      ListEmptyComponent={ListEmptyComponent}
      ListFooterComponent={ListFooterComponent}
      hideFooter
+      contentPadding={PADDING_INLINE}
    />
  );
 }
--- a/screens/Job/ScreenBeranda.tsx
+++ b/screens/Job/ScreenBeranda.tsx
@@ -3,16 +3,17 @@ import {
  BoxWithHeaderSection,
  FloatingButton,
  LoaderCustom,
+  OS_Wrapper,
  SearchInput,
  Spacing,
  StackCustom,
  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { apiJobGetAll } from "@/service/api-client/api-job";
 import { router, useFocusEffect } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
+import { PADDING_INLINE } from "@/constants/constans-value";

 export default function Job_ScreenBeranda() {
  const [listData, setListData] = useState<any[]>([]);
@@ -43,8 +44,9 @@ export default function Job_ScreenBeranda() {
  };

  return (
-    <ViewWrapper
+    <OS_Wrapper
      hideFooter
+      contentPadding={PADDING_INLINE}
      floatingButton={
        <FloatingButton onPress={() => router.push("/job/create")} />
      }
@@ -78,6 +80,6 @@ export default function Job_ScreenBeranda() {
        ))
      )}
      <Spacing />
-    </ViewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/screens/Job/ScreenBeranda2.tsx
+++ b/screens/Job/ScreenBeranda2.tsx
@@ -2,7 +2,7 @@ import {
  AvatarUsernameAndOtherComponent,
  BoxWithHeaderSection,
  FloatingButton,
-  PageWrapper,
+  OS_Wrapper,
  SearchInput,
  Spacing,
  StackCustom,
@@ -16,7 +16,7 @@ import { router, useFocusEffect } from "expo-router";
 import _ from "lodash";
 import { useState } from "react";
 import { RefreshControl, View } from "react-native";
-import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { PAGINATION_DEFAULT_TAKE, PADDING_INLINE } from "@/constants/constans-value";

 const PAGE_SIZE = 10;

@@ -73,11 +73,11 @@ export default function Job_ScreenBeranda2() {
  );

  return (
-    <PageWrapper
-      contentPaddingHorizontal={16}
+    <OS_Wrapper
      hideFooter
+      contentPadding={PADDING_INLINE}
      headerComponent={
-        <View>
+        <View style={{ paddingTop: 8 }}>
          <SearchInput
            placeholder="Cari pekerjaan"
            onChangeText={_.debounce((text) => setSearch(text), 500)}
--- a/screens/Job/ScreenJobCreate.tsx
+++ b/screens/Job/ScreenJobCreate.tsx
@@ -4,13 +4,14 @@ import {
  ButtonCustom,
  InformationBox,
  LandscapeFrameUploaded,
-  PageWrapper,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextAreaCustom,
  TextInputCustom,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
 import { apiJobCreate } from "@/service/api-client/api-job";
 import { uploadFileService } from "@/service/upload-service";
@@ -118,10 +119,11 @@ export function Job_ScreenCreate() {
  };

  return (
-    <PageWrapper
+    <OS_Wrapper
      enableKeyboardHandling
-      keyboardScrollOffset={100}
-      contentPaddingHorizontal={16}
+      keyboardScrollOffset={10}
+      // contentPadding={PADDING_INLINE}
+      contentPaddingBottom={250}
      footerComponent={buttonSubmit()}
    >
      <StackCustom gap={"xs"}>
@@ -174,7 +176,9 @@ export function Job_ScreenCreate() {
            onChangeText={(value) => setData({ ...data, deskripsi: value })}
          />
        </View>
+
+        
      </StackCustom>
-    </PageWrapper>
+    </OS_Wrapper>
  );
 }
--- a/screens/Job/ScreenJobEdit.tsx
+++ b/screens/Job/ScreenJobEdit.tsx
@@ -8,13 +8,14 @@ import {
  InformationBox,
  LandscapeFrameUploaded,
  LoaderCustom,
-  PageWrapper,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextAreaCustom,
  TextInputCustom,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { apiJobGetOne, apiJobUpdateData } from "@/service/api-client/api-job";
 import { deleteFileService, uploadFileService } from "@/service/upload-service";
 import pickImage from "@/utils/pickImage";
@@ -134,16 +135,16 @@ export function Job_ScreenEdit() {
  };

  return (
-    <PageWrapper
+    <OS_Wrapper
      enableKeyboardHandling
      keyboardScrollOffset={100}
-      // contentPaddingHorizontal={16}
+      contentPaddingBottom={250}
      footerComponent={buttonSubmit()}
    >
      {isLoadData ? (
        <LoaderCustom />
      ) : (
-        <View>
+        <StackCustom gap={"xs"}>
          <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />

          {imageUri ? (
@@ -200,8 +201,10 @@ export function Job_ScreenEdit() {
              onChangeText={(value) => setData({ ...data, deskripsi: value })}
            />
          </View>
-        </View>
+
+          {buttonSubmit()}
+        </StackCustom>
      )}
-    </PageWrapper>
+    </OS_Wrapper>
  );
 }
--- a/screens/Maps/ScreenMapsCreate.tsx
+++ b/screens/Maps/ScreenMapsCreate.tsx
@@ -7,7 +7,7 @@ import {
  TextInputCustom,
  LandscapeFrameUploaded,
  ButtonCenteredOnly,
-  NewWrapper_V2,
+  OS_Wrapper,
 } from "@/components";
 import { MapSelectedPlatform } from "@/components/Map/MapSelectedPlatform";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -18,7 +18,6 @@ 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";

@@ -143,12 +142,12 @@ export function Maps_ScreenMapsCreate() {
  );

  /**
-   * Render screen dengan NewWrapper_V2
+   * Render screen dengan OS_Wrapper
   */
  return (
-    <NewWrapper_V2
+    <OS_Wrapper
      enableKeyboardHandling
-      keyboardScrollOffset={100}
+      contentPaddingBottom={250}
      footerComponent={buttonFooter}
    >
      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
@@ -165,15 +164,13 @@ export function Maps_ScreenMapsCreate() {
        />
      </BaseBox>

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

      <Spacing height={50} />

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

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

--- a/screens/Maps/ScreenMapsEdit.tsx
+++ b/screens/Maps/ScreenMapsEdit.tsx
@@ -7,7 +7,7 @@ import {
  LandscapeFrameUploaded,
  Spacing,
  TextInputCustom,
-  NewWrapper_V2,
+  OS_Wrapper,
 } from "@/components";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MapSelectedPlatform } from "@/components/Map/MapSelectedPlatform";
@@ -19,7 +19,6 @@ 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";

@@ -167,9 +166,9 @@ export function Maps_ScreenMapsEdit() {
      : defaultRegion;

  return (
-    <NewWrapper_V2
+    <OS_Wrapper
      enableKeyboardHandling
-      keyboardScrollOffset={100}
+      contentPaddingBottom={250}
      footerComponent={buttonFooter}
    >
      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
@@ -196,15 +195,13 @@ export function Maps_ScreenMapsEdit() {
        />
      )}

-      <View onStartShouldSetResponder={() => true}>
-        <TextInputCustom
-          required
-          label="Nama Pin"
-          placeholder="Masukkan nama pin maps"
-          value={data?.namePin}
-          onChangeText={(value) => setData({ ...data, namePin: value })}
-        />
-      </View>
+      <TextInputCustom
+        required
+        label="Nama Pin"
+        placeholder="Masukkan nama pin maps"
+        value={data?.namePin}
+        onChangeText={(value) => setData({ ...data, namePin: value })}
+      />

      <Spacing />

@@ -230,6 +227,6 @@ export function Maps_ScreenMapsEdit() {
        Upload
      </ButtonCenteredOnly>
      <Spacing height={50} />
-    </NewWrapper_V2>
+    </OS_Wrapper>
  );
 }
--- a/screens/Portofolio/ScreenPortofolioCreate.tsx
+++ b/screens/Portofolio/ScreenPortofolioCreate.tsx
@@ -4,7 +4,7 @@ import {
  ButtonCenteredOnly,
  CenterCustom,
  InformationBox,
-  NewWrapper_V2,
+  OS_Wrapper,
  PhoneInputCustom,
  SelectCustom,
  Spacing,
@@ -142,9 +142,9 @@ export function ScreenPortofolioCreate() {
  };

  return (
-    <NewWrapper_V2
+    <OS_Wrapper
      enableKeyboardHandling
-      keyboardScrollOffset={100}
+      contentPaddingBottom={250}
      footerComponent={
        <Portofolio_ButtonCreate
          id={id as string}
@@ -160,62 +160,57 @@ 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>
+        <TextInputCustom
+          required
+          label="Nama Bisnis"
+          placeholder="Masukkan nama bisnis"
+          onChangeText={(value: any) => setData({ ...data, namaBisnis: value })}
+        />

-        <View onStartShouldSetResponder={() => true}>
-          <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;
+        <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: "" }]);
-              }
+            if (!isSameBidang) {
+              setListSubBidangSelected([{ id: "" }]);
+            }

-              setData({ ...(data as any), masterBidangBisnisId: value });
-              handlerSelectedSubBidang({ id: value as string });
-            }}
-          />
-        </View>
+            setData({ ...(data as any), masterBidangBisnisId: value });
+            handlerSelectedSubBidang({ id: value as string });
+          }}
+        />

        {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>
+          <SelectCustom
+            key={index}
+            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);
+            }}
+          />
        ))}

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

        <Spacing />

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

-        <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>
+        <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 />

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

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

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

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

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

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

-        <View onStartShouldSetResponder={() => true}>
-          <TextInputCustom
-            label="Youtube"
-            placeholder="Masukkan username youtube"
-            onChangeText={(value: any) =>
-              setDataMedsos({ ...dataMedsos, youtube: value })
-            }
-          />
-        </View>
+        <TextInputCustom
+          label="Youtube"
+          placeholder="Masukkan username youtube"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, youtube: value })
+          }
+        />
      </StackCustom>
-    </NewWrapper_V2>
+    </OS_Wrapper>
  );
 }
--- a/screens/Portofolio/ViewListPortofolio.tsx
+++ b/screens/Portofolio/ViewListPortofolio.tsx
@@ -1,4 +1,4 @@
-import { NewWrapper, TextCustom } from "@/components";
+import { OS_Wrapper, TextCustom } from "@/components";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MainColor } from "@/constants/color-palet";
 import { usePagination } from "@/hooks/use-pagination";
@@ -52,7 +52,7 @@ export default function ViewListPortofolio() {
  });

  return (
-    <NewWrapper
+    <OS_Wrapper
      listData={pagination.listData}
      renderItem={renderItem}
      refreshControl={
--- a/screens/UserSeach/MainView_V2.tsx
+++ b/screens/UserSeach/MainView_V2.tsx
@@ -2,7 +2,7 @@ import {
  AvatarComp,
  ClickableCustom,
  Grid,
-  NewWrapper_V2,
+  NewWrapper,
  StackCustom,
  TextCustom,
  TextInputCustom,
@@ -140,9 +140,7 @@ export default function UserSearchMainView_V2() {
    });

  return (
-    <NewWrapper_V2
-      hideFooter
-      contentPaddingHorizontal={16}
+    <NewWrapper
      headerComponent={renderHeader(search, setSearch)}
      listData={pagination.listData}
      renderItem={renderItem}
--- a/tasks/TASK-004-newwrapper-migration.md
+++ b/tasks/TASK-004-newwrapper-migration.md
@@ -15,47 +15,29 @@ Migrasi bertahap dari `NewWrapper` ke `NewWrapper_V2` untuk memperbaiki bug keyb

 ## 📊 Migration Priority

-### **Phase 1: Job Screens** (Week 1) ✅ COMPLETED
+### **Phase 1: Job Screens** (Week 1) - CURRENT
 - [x] `screens/Job/ScreenJobCreate2.tsx` → Already using keyboard handling
- [x] `screens/Job/ScreenJobCreate.tsx` → Migrate to NewWrapper_V2
- [x] `screens/Job/ScreenJobEdit.tsx` → Migrate to NewWrapper_V2
- [x] Delete test files after migration
+- [ ] `screens/Job/ScreenJobCreate.tsx` → Migrate to NewWrapper_V2
+- [ ] `screens/Job/ScreenJobEdit.tsx` → Migrate to NewWrapper_V2
+- [ ] Delete test files after migration

-### **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)
+### **Phase 2: Event & Profile Screens** (Week 2)
 - [ ] `screens/Event/ScreenEventCreate.tsx`
 - [ ] `screens/Event/ScreenEventEdit.tsx`
+- [ ] `screens/Profile/ScreenProfileCreate.tsx`
+- [ ] `screens/Profile/ScreenProfileEdit.tsx`

-### **Phase 5: Other Form Screens** (Week 5)
+### **Phase 3: Other Form Screens** (Week 3)
 - [ ] `screens/Donation/` - All create/edit screens
 - [ ] `screens/Investment/` - All create/edit screens
 - [ ] `screens/Voting/` - All create/edit screens

-### **Phase 6: Complex Screens** (Week 6)
+### **Phase 4: Complex Screens** (Week 4)
 - [ ] `screens/Forum/` - Create/edit with rich text
 - [ ] `screens/Collaboration/` - Complex forms
 - [ ] Other complex forms

-### **Phase 7: Cleanup** (Week 7)
+### **Phase 5: Cleanup** (Week 5)
 - [ ] Remove old `NewWrapper.tsx` (or deprecate)
 - [ ] Rename `NewWrapper_V2.tsx` → `NewWrapper.tsx`
 - [ ] Update documentation
@@ -232,12 +214,10 @@ import { View } from "react-native";
 | Phase | Screens | Status | Completed Date |
 |-------|---------|--------|----------------|
 | **Phase 1: Job** | 6 screens | ✅ COMPLETED | 2026-04-01 |
-| **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 | - |
+| **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 | - |

 ---

@@ -276,63 +256,30 @@ 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 2 - Profile Screens ✅ COMPLETED
-**Next Phase**: Phase 3 - Portofolio & Maps Screens
+**Current Phase**: Phase 1 - Job Screens
 **Started**: 2026-04-01
-**Last Updated**: 2026-04-04
-**Overall Progress**: 13/34+ screens completed (38%)
+**ETA**: 2026-04-07 (Phase 1 complete)

 ---

 ## 📞 Next Actions

 1. **Immediate** (Today):
-   - [ ] 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
+   - [ ] Migrate `ScreenJobCreate.tsx`
+   - [ ] Migrate `ScreenJobEdit.tsx`
+   - [ ] Test both screens

 2. **This Week**:
-   - [ ] Complete Phase 3 (Portofolio & Maps screens)
+   - [ ] Delete test files
   - [ ] Document any issues
-   - [ ] Prepare Phase 4
+   - [ ] Prepare Phase 2

 3. **Next Week**:
-   - [ ] Start Phase 4 (Event screens)
-   - [ ] Review Phase 2-3 results
+   - [ ] Start Phase 2 (Event & Profile)
+   - [ ] Review Phase 1 results
   - [ ] Adjust migration guide if needed

 ---
@@ -350,13 +297,8 @@ import { View } from "react-native";
 - `tasks/TASK-004-newwrapper-migration.md` (This file)

 **Screens to Migrate:**
- `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)
+- `screens/Job/ScreenJobCreate.tsx`
+- `screens/Job/ScreenJobEdit.tsx`
 - (More in subsequent phases)

 ---
@@ -380,23 +322,12 @@ import { View } from "react-native";

 ## ✅ Success Criteria

-**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
+**Phase 1 Complete when:**
+- [ ] Job Create migrated
+- [ ] Job Edit migrated
+- [ ] Both screens tested on iOS & Android
 - [ ] No critical bugs
+- [ ] Test files deleted
 - [ ] Documentation updated

 **Overall Migration Complete when:**
@@ -408,6 +339,6 @@ import { View } from "react-native";

 ---

-**Last Updated**: 2026-04-04
+**Last Updated**: 2026-04-01
 **Created by**: AI Assistant
-**Status**: 🟡 IN PROGRESS - Phase 2 Complete, Ready for Phase 3 (Portofolio & Maps)
+**Status**: 🟡 IN PROGRESS
--- a/tasks/TASK-005-OS-Wrapper-Implementation.md
+++ b/tasks/TASK-005-OS-Wrapper-Implementation.md
@@ -0,0 +1,271 @@
+# TASK-005: OS_Wrapper Implementation
+
+## 📋 Overview
+Migrasi dari `NewWrapper` dan `NewWrapper_V2` ke `OS_Wrapper` yang otomatis menyesuaikan dengan platform (iOS/Android).
+
+## 🎯 Goals
+- ✅ Mengganti penggunaan `NewWrapper` → `OS_Wrapper` di user screens
+- ✅ Mengganti penggunaan `NewWrapper_V2` → `OS_Wrapper` di form screens (dengan keyboard handling props)
+- ✅ Memastikan tabs dan UI konsisten di iOS dan Android
+- ✅ Backward compatible (wrapper lama tetap ada)
+- ✅ **SIMPLIFIED**: Satu komponen `OS_Wrapper` untuk semua use cases (tidak ada `PageWrapper` terpisah)
+
+## 📦 Available Wrappers
+
+### 1. **OS_Wrapper** (Recommended - Unified API)
+Auto-detect platform dan routing ke wrapper yang sesuai:
+- iOS → `IOSWrapper` (berbasis NewWrapper)
+- Android → `AndroidWrapper` (berbasis NewWrapper_V2 dengan keyboard handling)
+
+**Props:**
+```tsx
+// Base props (kedua platform)
+withBackground?: boolean;
+headerComponent?: React.ReactNode;
+footerComponent?: React.ReactNode;
+floatingButton?: React.ReactNode;
+hideFooter?: boolean;
+edgesFooter?: Edge[];
+style?: ViewStyle;
+refreshControl?: RefreshControl;
+
+// Keyboard handling (Android only - iOS mengabaikan)
+enableKeyboardHandling?: boolean;      // Default: false
+keyboardScrollOffset?: number;         // Default: 100
+contentPaddingBottom?: number;         // Default: 100
+contentPadding?: number;               // Default: 0
+```
+
+### 2. **IOSWrapper** / **AndroidWrapper** (Direct Usage)
+Untuk kasus khusus yang butuh platform-specific behavior.
+
+## 📝 Migration Guide
+
+### Before (Old Way)
+```tsx
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+// atau
+import { NewWrapper_V2 } from "@/components/_ShareComponent/NewWrapper_V2";
+```
+
+### After (New Way - Unified API)
+```tsx
+import { OS_Wrapper } from "@/components";
+
+// Static mode (simple content)
+<OS_Wrapper>
+  <YourContent />
+</OS_Wrapper>
+
+// List mode (with pagination)
+<OS_Wrapper
+  listData={data}
+  renderItem={({ item }) => <ItemCard item={item} />}
+  ListEmptyComponent={<EmptyState />}
+  onEndReached={loadMore}
+/>
+
+// Form mode (with keyboard handling - Android only)
+<OS_Wrapper
+  enableKeyboardHandling
+  contentPaddingBottom={250}  // ← HANYA untuk screens dengan TextInput
+>
+  <FormContent />
+</OS_Wrapper>
+```
+
+## 🚀 Implementation Status
+
+### ✅ Phase 1: Job Screens - COMPLETED (2026-04-06 to 2026-04-07)
+
+**Files migrated: 9**
+
+#### Job List Screens (OS_Wrapper):
+- ✅ `screens/Job/ScreenBeranda.tsx` - ViewWrapper → OS_Wrapper + PADDING_INLINE
+- ✅ `screens/Job/ScreenBeranda2.tsx` - NewWrapper_V2 → OS_Wrapper + PADDING_INLINE
+- ✅ `screens/Job/ScreenArchive.tsx` - ViewWrapper → OS_Wrapper + PADDING_INLINE
+- ✅ `screens/Job/ScreenArchive2.tsx` - NewWrapper_V2 → OS_Wrapper + PADDING_INLINE
+- ✅ `screens/Job/MainViewStatus.tsx` - ViewWrapper → OS_Wrapper + PADDING_INLINE
+- ✅ `screens/Job/MainViewStatus2.tsx` - NewWrapper_V2 → OS_Wrapper + PADDING_INLINE
+
+#### Job Form Screens (OS_Wrapper with keyboard handling):
+- ✅ `screens/Job/ScreenJobCreate.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling + contentPaddingBottom={250}
+- ✅ `screens/Job/ScreenJobEdit.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling + contentPaddingBottom={250}
+
+#### Job Detail Screen:
+- ✅ `app/(application)/(user)/job/[id]/[status]/detail.tsx` - NewWrapper_V2 → OS_Wrapper
+
+**Testing Status:**
+- ✅ TypeScript: No errors
+- ✅ Build: Success
+- ✅ iOS Testing: Complete ✅
+- ✅ Android Testing: Complete ✅
+
+### ✅ Phase 2: Profile, Waiting Room, Delete Account - COMPLETED (2026-04-08)
+
+**Files migrated: 10**
+
+#### Profile Screens:
+- ✅ `app/(application)/(user)/profile/[id]/index.tsx` - NewWrapper → OS_Wrapper (list with pull-to-refresh)
+- ✅ `app/(application)/(user)/profile/[id]/edit.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `app/(application)/(user)/profile/create.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `app/(application)/(user)/profile/[id]/blocked-list.tsx` - NewWrapper → OS_Wrapper (pagination list)
+- ✅ `app/(application)/(user)/profile/[id]/detail-blocked.tsx` - NewWrapper → OS_Wrapper (static with footer)
+- ✅ `app/(application)/(user)/profile/[id]/update-background.tsx` - ViewWrapper → OS_Wrapper (static with footer)
+- ✅ `app/(application)/(user)/profile/[id]/update-photo.tsx` - ViewWrapper → OS_Wrapper (static with footer)
+
+#### Other Screens:
+- ✅ `app/(application)/(user)/waiting-room.tsx` - NewWrapper → OS_Wrapper (static with refresh + footer)
+- ✅ `app/(application)/(user)/delete-account.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+
+### ✅ Phase 3: Portfolio Screens - COMPLETED (2026-04-08)
+
+**Files migrated: 6**
+
+#### Portfolio Screens:
+- ✅ `app/(application)/(user)/portofolio/[id]/index.tsx` - ViewWrapper → OS_Wrapper (detail screen with pull-to-refresh)
+- ✅ `app/(application)/(user)/portofolio/[id]/edit.tsx` - NewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `app/(application)/(user)/portofolio/[id]/edit-logo.tsx` - ViewWrapper → OS_Wrapper (static with footer)
+- ✅ `app/(application)/(user)/portofolio/[id]/edit-social-media.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `screens/Portofolio/ViewListPortofolio.tsx` - NewWrapper → OS_Wrapper (pagination list)
+- ✅ `screens/Portofolio/ScreenPortofolioCreate.tsx` - NewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+
+### ✅ Phase 4: Maps Screens - COMPLETED (2026-04-08)
+
+**Files migrated: 2**
+
+#### Maps Screens:
+- ✅ `screens/Maps/ScreenMapsCreate.tsx` - NewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `screens/Maps/ScreenMapsEdit.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+
+### ⏳ Phase 5: Event Management (Priority: MEDIUM)
+
+- [ ] `screens/Admin/Event/ScreenEventList.tsx`
+- [ ] `screens/Admin/Event/ScreenEventCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- [ ] `screens/Admin/Event/ScreenEventEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+
+### ⏳ Phase 6: Voting Management (Priority: MEDIUM)
+
+- [ ] `screens/Admin/Voting/ScreenVotingList.tsx`
+- [ ] `screens/Admin/Voting/ScreenVotingCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- [ ] `screens/Admin/Voting/ScreenVotingEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+
+### ⏳ Phase 7: Forum/Discussion Screens (Priority: LOW)
+
+- [ ] `screens/Forum/ScreenForum.tsx`
+- [ ] `screens/Forum/ScreenForumDetail.tsx`
+- [ ] `screens/Forum/ScreenForumCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+
+### ⏳ Phase 8: Donation Management (Priority: LOW)
+
+- [ ] `screens/Admin/Donation/ScreenDonationList.tsx`
+- [ ] `screens/Admin/Donation/ScreenDonationCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+- [ ] `screens/Admin/Donation/ScreenDonationEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
+
+### ⏳ Phase 9: Other Screens (Priority: LOW)
+- [ ] `screens/Investasi/` - Investment screens
+- [ ] `screens/Kolaborasi/` - Collaboration screens
+- [ ] Other user-facing screens
+
+## 📌 Notes & Patterns
+
+### Spacing Pattern:
+- **Default**: `contentPaddingBottom=100` (list & static screens)
+- **Forms**: `contentPaddingBottom={250}` (HANYA untuk screens dengan TextInput/TextArea)
+- **contentPadding=0** (default, per-screen control jika perlu)
+
+### User Preference:
+- **NO PADDING_INLINE by default** - Bisa mempersempit box tampilan
+- User akan review dan tambahkan sendiri jika diperlukan per-screen
+
+### Keyboard Handling:
+- `enableKeyboardHandling` → Auto-scroll saat keyboard muncul (Android only)
+- **Bug Fixed (2026-04-08)**: Input di paling atas tidak lagi "terlempar" keluar layar saat keyboard muncul
+- **Solusi**: Menggunakan `UIManager.measure` untuk mendapatkan posisi absolut input (`pageY`), lalu conditional scroll:
+  - Jika input DI ATAS keyboard (terlihat) → **TIDAK SCROLL**
+  - Jika input DI BAWAH keyboard (tertutup) → **Scroll secukupnya**
+- Tap anywhere di luar input → keyboard dismiss (sudah implementasi di kedua mode)
+
+### Migration Pattern:
+
+#### Untuk List Screen:
+```tsx
+<OS_Wrapper
+  listData={pagination.listData}
+  renderItem={renderItem}
+  ListEmptyComponent={ListEmptyComponent}
+  ListFooterComponent={ListFooterComponent}
+  onEndReached={pagination.loadMore}
+  refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+/>
+```
+
+#### Untuk Static Screen:
+```tsx
+<OS_Wrapper
+  headerComponent={<HeaderSection />}
+  footerComponent={<FooterSection />}
+  refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+>
+  <YourContent />
+</OS_Wrapper>
+```
+
+#### Untuk Form Screen (dengan keyboard handling):
+```tsx
+<OS_Wrapper
+  enableKeyboardHandling
+  contentPaddingBottom={250}  // ← HANYA untuk screens dengan TextInput
+  footerComponent={<SubmitButton />}
+>
+  <FormContent />
+</OS_Wrapper>
+```
+
+## 🐛 Troubleshooting
+
+### Issue: Tabs tidak muncul di Android
+**Solution**: Pastikan tidak ada custom padding yang overriding default behavior. Jika masih bermasalah, cek apakah `contentPadding` atau `contentPaddingBottom` terlalu besar.
+
+### Issue: Keyboard menutupi input di Android
+**Solution**: Pastikan pakai `OS_Wrapper` dengan `enableKeyboardHandling={true}` dan `contentPaddingBottom={250}` untuk form screens.
+
+### Issue: Pull-to-refresh tidak berfungsi di static mode
+**Solution**: Sudah diperbaiki! `refreshControl` sekarang di-pass ke ScrollView di AndroidWrapper.
+
+### Issue: Footer terlalu jauh dari bottom
+**Solution**: Kurangi `contentPaddingBottom` (default: 100 untuk list). Untuk form screens tetap 250.
+
+### Issue: White space di bottom saat keyboard close (Android)
+**Solution**: Ini sudah di-fix di AndroidWrapper. Pastikan screen pakai OS_Wrapper, bukan NewWrapper langsung.
+
+## 📊 Progress Tracking
+
+| Phase | Total Files | Migrated | Testing | Status |
+|-------|-------------|----------|---------|--------|
+| Phase 1 (Job) | 9 | 9 | ✅ Complete | ✅ Complete |
+| Phase 2 (Profile + Others) | 10 | 10 | ⏳ Pending | ✅ Complete |
+| Phase 3 (Portfolio) | 6 | 6 | ⏳ Pending | ✅ Complete |
+| Phase 4 (Maps) | 2 | 2 | ⏳ Pending | ✅ Complete |
+| Phase 5 (Event) | TBD | 0 | 0 | ⏳ Pending |
+| Phase 6 (Voting) | TBD | 0 | 0 | ⏳ Pending |
+| Phase 7 (Forum) | TBD | 0 | 0 | ⏳ Pending |
+| Phase 8 (Donation) | TBD | 0 | 0 | ⏳ Pending |
+| Phase 9 (Other) | TBD | 0 | 0 | ⏳ Pending |
+| **Total** | **27+** | **27** | **9** | **Phase 1-4 Complete** |
+
+## 🔄 Rollback Plan
+
+Jika ada issue yang tidak bisa di-fix dalam 1 jam:
+1. Revert perubahan di file yang bermasalah
+2. Kembali ke NewWrapper/NewWrapper_V2
+3. Dokumentasikan issue di CHANGE_LOG.md
+4. Investigasi lebih lanjut dan coba lagi
+
+---
+
+**Co-authored-by**: Qwen-Coder <qwen-coder@alibabacloud.com>
+**Created**: 2026-04-06
+**Last Updated**: 2026-04-08
+**Status**: Phase 1-4 Complete ✅ (27 files migrated)
+**Next**: Phase 5 - Event Management Screens
Author	SHA1	Message	Date
bagasbanuna	c3cf354c28	feat: Migrate Portfolio & Maps screens + perbaiki bug auto-scroll keyboard Phase 3 - Portfolio Screens (6 files): - [id]/index.tsx: ViewWrapper → OS_Wrapper (detail dengan pull-to-refresh) - [id]/edit.tsx: NewWrapper → OS_Wrapper (form + keyboard handling) - [id]/edit-logo.tsx: ViewWrapper → OS_Wrapper (upload logo) - [id]/edit-social-media.tsx: ViewWrapper → OS_Wrapper (form + keyboard handling) - ViewListPortofolio.tsx: NewWrapper → OS_Wrapper (pagination list) - ScreenPortofolioCreate.tsx: NewWrapper → OS_Wrapper (form + keyboard handling) Phase 4 - Maps Screens (2 files): - ScreenMapsCreate.tsx: NewWrapper → OS_Wrapper (form + keyboard handling) - ScreenMapsEdit.tsx: ViewWrapper → OS_Wrapper (form + keyboard handling) Bug Fixes: - Perbaiki auto-scroll keyboard yang membuat input paling atas 'terlempar' keluar layar - Gunakan UIManager.measure untuk mendapatkan posisi absolut input (pageY) secara akurat - Logika conditional scroll: * Jika input terlihat (di atas keyboard) → TIDAK SCROLL * Jika input tertutup keyboard → Scroll secukupnya - Helper cloneChildrenWithFocusHandler sekarang aktif menyuntikan onFocus handler ke semua TextInput/TextArea/PhoneInput/Select - Hapus KeyboardAvoidingView dari AndroidWrapper static mode (tidak diperlukan lagi) Pattern yang diterapkan: - List screens: contentPaddingBottom=100 (default) - Form screens: contentPaddingBottom={250} + enableKeyboardHandling - NO PADDING_INLINE (sesuai preferensi user - mencegah box menyempit) Dokumentasi: - Update TASK-005 dengan status lengkap Phase 1-4 (27 files migrated) - Tambahkan urutan phase baru: Event (Phase 5), Voting (Phase 6), Forum (Phase 7), Donation (Phase 8) Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-04-08 17:27:06 +08:00
bagasbanuna	6ec839fd67	feat: Migrate Profile, Waiting Room, and Delete Account to OS_Wrapper Profile Screens (8 files): - [id]/index.tsx: NewWrapper → OS_Wrapper (list with refresh) - [id]/edit.tsx: ViewWrapper → OS_Wrapper (form + keyboard handling) - create.tsx: ViewWrapper → OS_Wrapper (form + keyboard handling) - [id]/blocked-list.tsx: NewWrapper → OS_Wrapper (pagination list) - [id]/detail-blocked.tsx: NewWrapper → OS_Wrapper (static with footer) - [id]/update-background.tsx: ViewWrapper → OS_Wrapper (static with footer) - [id]/update-photo.tsx: ViewWrapper → OS_Wrapper (static with footer) - All Profile forms use enableKeyboardHandling + contentPaddingBottom={250} Other Screens (2 files): - waiting-room.tsx: NewWrapper → OS_Wrapper (static with refresh + footer) - delete-account.tsx: ViewWrapper → OS_Wrapper (form + keyboard handling) Bug Fixes: - AndroidWrapper: Add refreshControl to ScrollView (fix pull-to-refresh on static mode) Pattern Applied: - List screens: contentPaddingBottom=100 (default) - Form screens: contentPaddingBottom=250 (with TextInput) - No PADDING_INLINE (user preference - prevents box narrowing) Documentation: - Update TASK-005 with Phase 1 completion details Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-04-08 14:32:11 +08:00
bagasbanuna	b8f8a361d6	refactor: Adjust OS_Wrapper defaults for better spacing - Reduce default contentPaddingBottom from 250 to 100 - Better for list screens (less empty space) - Only form screens with TextInput need 250px - Set OS_ANDROID_PADDING_TOP to 6px - More compact tabs on Android - Update form screens (Create/Edit): - Explicit contentPaddingBottom={250} - Only screens with TextInput use larger spacing - Remove unnecessary PADDING_INLINE from detail screens - Detail screen doesn't need inline padding Pattern: - Default: contentPaddingBottom=100 (list screens) - Forms: contentPaddingBottom=250 (screens with TextInput) - contentPadding=0 (per-screen control) Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-04-08 10:31:36 +08:00
bagasbanuna	1a5ca78041	feat: Complete OS_Wrapper implementation with keyboard handling and PADDING_INLINE OS_Wrapper System: - Simplify API: Remove PageWrapper, merge keyboard props into OS_Wrapper - Add auto-scroll when keyboard appears (Android only) - Add tap-to-dismiss keyboard for both Static and List modes - Fix contentPaddingBottom default to 250px (prevent keyboard overlap) - Change default contentPadding to 0 (per-screen control) - Remove Platform.OS checks from IOSWrapper and AndroidWrapper Constants: - Add PADDING_INLINE constant (16px) for consistent inline padding - Add OS_PADDING_TOP constants for tab layouts Job Screens Migration (9 files): - Apply PADDING_INLINE to all Job screens: - ScreenBeranda, ScreenBeranda2 - ScreenArchive, ScreenArchive2 - MainViewStatus, MainViewStatus2 - ScreenJobCreate, ScreenJobEdit - Job detail screen Keyboard Handling: - Simplified useKeyboardForm hook - Auto-scroll by keyboard height when keyboard appears - Track scroll position for accurate scroll targets - TouchableWithoutFeedback wraps all content for tap-to-dismiss Documentation: - Update TASK-005 with Phase 1 completion status - Update Quick Reference with unified API examples Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-04-07 17:50:15 +08:00
bagasbanuna	502cd7bc65	feat: Implement OS_Wrapper system and migrate all Job screens Create OS-specific wrapper system: - Add IOSWrapper (based on NewWrapper for iOS) - Add AndroidWrapper (based on NewWrapper_V2 with keyboard handling) - Add OS_Wrapper (auto platform detection) - Add PageWrapper (with keyboard handling for Android forms) Migrate all Job screens (8 files): - ScreenJobCreate: NewWrapper_V2 → PageWrapper - ScreenJobEdit: NewWrapper_V2 → PageWrapper - ScreenBeranda2: NewWrapper_V2 → OS_Wrapper - ScreenArchive2: NewWrapper_V2 → OS_Wrapper - MainViewStatus2: NewWrapper_V2 → OS_Wrapper - ScreenBeranda: ViewWrapper → OS_Wrapper - ScreenArchive: ViewWrapper → OS_Wrapper - MainViewStatus: ViewWrapper → OS_Wrapper Benefits: - Automatic platform detection (no manual Platform.OS checks) - Consistent tabs behavior across iOS and Android - Keyboard handling for forms (Android only) - Cleaner code with unified API Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-04-07 14:14:00 +08:00
bagasbanuna	44d9025afe	refactor: Update header components and improve job edit footer layout - Replace Waiting Room header with AppHeader component - Replace Profile Create header with AppHeader with showBack=false - Wrap Job Edit submit button with BoxButtonOnFooter for consistent footer layout Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-04-06 17:49:28 +08:00