chore: Update layout headers and iOS build config

- Update waiting-room header to use AppHeader component - Update profile create header with 'Buat Profil' title - Update iOS Xcode project with MapLibre signature workaround - Add iOS workspace Package.resolved Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
refactor: Migrate Profile screens to NewWrapper_V2
2026-04-04 13:01:51 +08:00 · 2026-04-04 13:00:36 +08:00 · 2026-04-04 10:13:22 +08:00 · 2026-04-04 09:16:15 +08:00
32 changed files with 263 additions and 1310 deletions
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -21,7 +21,9 @@ export default function UserLayout() {
        <Stack.Screen
          name="waiting-room"
          options={{
-            header: () => <AppHeader title="Waiting Room" />,
+            // title: "Waiting Room",
+            // headerBackVisible: false,
+            header: () => <AppHeader title="Waiting Room" showBack={false} />,
          }}
        />

--- a/app/(application)/(user)/job/(tabs)/_layout.tsx
+++ b/app/(application)/(user)/job/(tabs)/_layout.tsx
@@ -5,17 +5,15 @@ 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();
@@ -33,23 +31,20 @@ function JobTabsWrapper() {
          tabBarStyle: Platform.select({
            ios: {
              borderTopWidth: 0,
-              paddingTop: OS_IOS_PADDING_TOP,
-              height: OS_IOS_HEIGHT,
+              paddingTop: 12,
+              height: 80,
            },
            android: {
              borderTopWidth: 0,
-              paddingTop: OS_ANDROID_PADDING_TOP,
-              height: OS_ANDROID_HEIGHT + paddingBottom,
+              paddingTop: 5,
+              height: 70 + 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,
-  OS_Wrapper,
+  NewWrapper_V2,
  Spacing,
  StackCustom,
 } from "@/components";
@@ -23,7 +23,6 @@ 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();
@@ -73,7 +72,7 @@ export default function JobDetailStatus() {
          ),
        }}
      />
-      <OS_Wrapper >
+      <NewWrapper_V2>
        {isLoadData ? (
          <LoaderCustom />
        ) : (
@@ -97,7 +96,7 @@ export default function JobDetailStatus() {
            <Spacing />
          </>
        )}
-      </OS_Wrapper>
+      </NewWrapper_V2>

      <DrawerCustom
        isVisible={openDrawer}
--- a/app/(application)/(user)/profile/[id]/blocked-list.tsx
+++ b/app/(application)/(user)/profile/[id]/blocked-list.tsx
@@ -9,7 +9,7 @@ import {
 import ListEmptyComponent from "@/components/_ShareComponent/ListEmptyComponent";
 import ListLoaderFooterComponent from "@/components/_ShareComponent/ListLoaderFooterComponent";
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+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
+      <NewWrapper_V2
        // 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,
+  NewWrapper_V2,
  StackCustom,
  TextCustom,
 } from "@/components";
@@ -46,7 +46,9 @@ export default function ProfileDetailBlocked() {

  return (
    <>
-      <NewWrapper
+      <NewWrapper_V2
+        enableKeyboardHandling
+        keyboardScrollOffset={100}
        footerComponent={
          <BoxButtonOnFooter>
            <ButtonCustom
@@ -86,7 +88,7 @@ export default function ProfileDetailBlocked() {
            </TextCustom>
          </StackCustom>
        </BoxWithHeaderSection>
-      </NewWrapper>
+      </NewWrapper_V2>
    </>
  );
 }
--- a/app/(application)/(user)/profile/[id]/edit.tsx
+++ b/app/(application)/(user)/profile/[id]/edit.tsx
@@ -1,15 +1,16 @@
 import {
  ButtonCustom,
+  NewWrapper_V2,
  SelectCustom,
  StackCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
 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() {
@@ -70,7 +71,9 @@ export default function ProfileEdit() {
  };

  return (
-    <ViewWrapper
+    <NewWrapper_V2
+      enableKeyboardHandling
+      keyboardScrollOffset={100}
      footerComponent={
        <BoxButtonOnFooter>
          <ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
@@ -80,45 +83,53 @@ export default function ProfileEdit() {
      }
    >
      <StackCustom gap={"xs"}>
-        <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 });
-          }}
-        />
+        <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>
      </StackCustom>
-    </ViewWrapper>
+    </NewWrapper_V2>
  );
 }
--- 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, StackCustom } from "@/components";
+import { NewWrapper_V2, 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
+      <NewWrapper_V2
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
@@ -144,7 +144,7 @@ export default function Profile() {
            />
          </>
        )}
-      </NewWrapper>
+      </NewWrapper_V2>

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

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

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

        <Stack.Screen
--- a/app/(application)/(user)/profile/create.tsx
+++ b/app/(application)/(user)/profile/create.tsx
@@ -2,11 +2,11 @@ import {
    BaseBox,
    ButtonCenteredOnly,
    ButtonCustom,
+    NewWrapper_V2,
    SelectCustom,
    Spacing,
    StackCustom,
    TextInputCustom,
-    ViewWrapper,
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
 import InformationBox from "@/components/Box/InformationBox";
@@ -155,7 +155,11 @@ export default function CreateProfile() {
  );

  return (
-    <ViewWrapper footerComponent={footerComponent}>
+    <NewWrapper_V2
+      enableKeyboardHandling
+      keyboardScrollOffset={100}
+      footerComponent={footerComponent}
+    >
      <StackCustom>
        <InformationBox text="Upload foto profile anda." />
        <View style={{ alignItems: "center" }}>
@@ -204,43 +208,51 @@ export default function CreateProfile() {
        </View>

        <Spacing />
-        <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 })
-          }
-        />
+        <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>
        <Spacing />
      </StackCustom>
-    </ViewWrapper>
+    </NewWrapper_V2>
  );
 }
--- a/components/_ShareComponent/AndroidWrapper.tsx
+++ b/components/_ShareComponent/AndroidWrapper.tsx
@@ -1,245 +0,0 @@
-// @/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 } 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;
-
-  return (
-    <KeyboardAvoidingView
-      behavior={undefined}
-      style={{ flex: 1, backgroundColor: MainColor.darkblue }}
-    >
-      {headerComponent && (
-        <View style={GStyles.stickyHeader}>{headerComponent}</View>
-      )}
-
-      <ScrollView
-        ref={keyboardForm?.scrollViewRef}
-        onScroll={keyboardForm?.handleScroll}
-        scrollEventThrottle={16}
-        style={{ flex: 1 }}
-        contentContainerStyle={{
-          flexGrow: 1,
-          paddingBottom:
-            (footerComponent && !hideFooter ? OS_HEIGHT : 0) +
-            finalContentPaddingBottom,
-          padding: finalContentPadding,
-        }}
-        keyboardShouldPersistTaps="handled"
-        showsVerticalScrollIndicator={false}
-      >
-        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-          {renderContainer(staticProps.children)}
-        </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>
-      )}
-    </KeyboardAvoidingView>
-  );
-}
-
-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, handleScroll } = useKeyboardForm(scrollOffset);
+  const { scrollViewRef, handleInputFocus } = useKeyboardForm(scrollOffset);

  return (
    <KeyboardAvoidingView
@@ -38,8 +38,6 @@ 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
@@ -1,216 +0,0 @@
-// @/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,10 +45,14 @@ interface BaseProps {
   */
  contentPaddingBottom?: number;
  /**
-   * Padding untuk content container (default: 16)
-   * Set to 0 untuk tidak ada padding, atau custom value sesuai kebutuhan
+   * Padding Top untuk content container (default: 8)
   */
-  contentPadding?: number;
+  contentPaddingTop?: number;
+  /**
+   * Padding Horizontal untuk content container (default: 0)
+   * Set ke 16 atau lebih jika butuh spacing di kiri-kanan
+   */
+  contentPaddingHorizontal?: number;
 }

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

  const assetBackground = require("../../assets/images/main-background.png");
@@ -137,8 +142,9 @@ 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"
        />
@@ -186,8 +192,9 @@ 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
@@ -1,154 +0,0 @@
-// @/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/index.ts
+++ b/components/index.ts
@@ -65,8 +65,6 @@ import NewWrapper from "./_ShareComponent/NewWrapper";
 import BasicWrapper from "./_ShareComponent/BasicWrapper";
 import { FormWrapper } from "./_ShareComponent/FormWrapper";
 import { NewWrapper_V2 } from "./_ShareComponent/NewWrapper_V2";
-// OS-Specific Wrappers
-import OS_Wrapper, { IOSWrapper, AndroidWrapper } from "./_ShareComponent/OS_Wrapper";

 // Progress
 import ProgressCustom from "./Progress/ProgressCustom";
@@ -134,10 +132,6 @@ export {
  BasicWrapper,
  FormWrapper,
  NewWrapper_V2,
-  // OS-Specific Wrappers
-  OS_Wrapper,
-  IOSWrapper,
-  AndroidWrapper,
  // Stack
  StackCustom,
  TabBarBackground,
--- a/constants/constans-value.ts
+++ b/constants/constans-value.ts
@@ -4,10 +4,6 @@ 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,
@@ -27,15 +23,10 @@ export {
 };

 // OS Height
-const OS_ANDROID_HEIGHT = 60
+const OS_ANDROID_HEIGHT = 65
 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;
@@ -56,7 +47,6 @@ 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
@@ -1,158 +0,0 @@
-# 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/hooks/useKeyboardForm.ts
+++ b/hooks/useKeyboardForm.ts
@@ -1,35 +1,25 @@
 // useKeyboardForm.ts - Hook untuk keyboard handling pada form
-import { Keyboard, ScrollView, Dimensions } from "react-native";
+import { Keyboard, ScrollView } from "react-native";
 import { useState, useEffect, useRef } from "react";
-import React from "react";

 export function useKeyboardForm(scrollOffset = 100) {
  const scrollViewRef = useRef<ScrollView>(null);
  const [keyboardHeight, setKeyboardHeight] = useState(0);
-  const currentScrollY = useRef(0);
+  const [focusedInputY, setFocusedInputY] = useState<number | null>(null);

  // Listen to keyboard events
  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      (e) => {
-        const kbHeight = e.endCoordinates.height;
-        setKeyboardHeight(kbHeight);
-        
-        // Simple: scroll by keyboard height saat keyboard muncul
-        if (scrollViewRef.current) {
-          const targetY = currentScrollY.current + kbHeight - scrollOffset;
-          scrollViewRef.current.scrollTo({
-            y: Math.max(0, targetY),
-            animated: true,
-          });
-        }
+        setKeyboardHeight(e.endCoordinates.height);
      }
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        setKeyboardHeight(0);
+        setFocusedInputY(null);
      }
    );

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

-  // Track scroll position
-  const handleScroll = (event: any) => {
-    currentScrollY.current = event.nativeEvent.contentOffset.y;
+  // 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);
  };

-  // Dummy handlers (for API compatibility)
+  // Helper untuk create onFocus handler
  const createFocusHandler = () => {
-    return () => {};
+    return (e: any) => {
+      e.target?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
+        if (pageY !== null) {
+          handleInputFocus(pageY);
+        }
+      });
+    };
  };

-  const registerInputFocus = () => {};
-
  return {
    scrollViewRef,
    keyboardHeight,
-    registerInputFocus,
+    focusedInputY,
+    handleInputFocus,
    createFocusHandler,
-    handleScroll,
  };
 }
-
-/**
- * Dummy helper (no-op, for API compatibility)
- */
-export function cloneChildrenWithFocusHandler(
-  children: React.ReactNode,
-  _focusHandler: (inputRef: any) => void
-): React.ReactNode {
-  return children;
-}
--- a/ios/HIPMIBadungConnect.xcodeproj/project.pbxproj
+++ b/ios/HIPMIBadungConnect.xcodeproj/project.pbxproj
@@ -154,7 +154,8 @@
 				3F53CC1C3B278545F11A1CAE /* [CP-User] [RNFB] Core Configuration */,
 				46ED08049A384B869D77364E /* Remove signature files (Xcode workaround) */,
 				92A25C61F4E34FB6A36E415B /* Remove signature files (Xcode workaround) */,
-				B122FE573BBA4E8C86B8F1C3 /* Remove signature files (Xcode workaround) */,
+				6440E59133324659A2C60D0B /* Remove signature files (Xcode workaround) */,
+				35CC0495598542E6801662A3 /* Remove signature files (Xcode workaround) */,
 			);
 			buildRules = (
 			);
@@ -466,7 +467,24 @@
          rm -rf \"$CONFIGURATION_BUILD_DIR/MapLibre.xcframework-ios.signature\";
        ";
 		};
-		B122FE573BBA4E8C86B8F1C3 /* Remove signature files (Xcode workaround) */ = {
+		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 = (
--- a/ios/HIPMIBadungConnect.xcworkspace/xcshareddata/swiftpm/Package.resolved
+++ b/ios/HIPMIBadungConnect.xcworkspace/xcshareddata/swiftpm/Package.resolved
@@ -0,0 +1,15 @@
+{
+  "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,7 +12,6 @@ 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();
@@ -65,7 +64,7 @@ export default function Job_MainViewStatus() {

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

  return (
-    <OS_Wrapper
+    <NewWrapper_V2
+      contentPaddingHorizontal={16}
      headerComponent={<View style={{ paddingTop: 8 }}>{scrollComponent}</View>}
      listData={pagination.listData}
      renderItem={renderJobItem}
@@ -102,7 +103,6 @@ export default function Job_MainViewStatus2() {
      ListEmptyComponent={ListEmptyComponent}
      ListFooterComponent={ListFooterComponent}
      hideFooter
-      contentPadding={PADDING_INLINE}
    />
  );
 }
--- a/screens/Job/ScreenArchive.tsx
+++ b/screens/Job/ScreenArchive.tsx
@@ -1,11 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { BaseBox, LoaderCustom, OS_Wrapper, TextCustom } from "@/components";
+import { BaseBox, LoaderCustom, TextCustom, ViewWrapper } 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();
@@ -34,7 +33,7 @@ export default function Job_ScreenArchive() {
  };

  return (
-    <OS_Wrapper hideFooter contentPadding={PADDING_INLINE}>
+    <ViewWrapper hideFooter>
      {isLoadData ? (
        <LoaderCustom />
      ) : _.isEmpty(listData) ? (
@@ -53,6 +52,6 @@ export default function Job_ScreenArchive() {
          </BaseBox>
        ))
      )}
-    </OS_Wrapper>
+    </ViewWrapper>
  );
 }
--- a/screens/Job/ScreenArchive2.tsx
+++ b/screens/Job/ScreenArchive2.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { BaseBox, OS_Wrapper, TextCustom } from "@/components";
+import { BaseBox, NewWrapper_V2, TextCustom, ViewWrapper } 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, PADDING_INLINE } from "@/constants/constans-value";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";

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

  return (
-    <OS_Wrapper
+    <NewWrapper_V2
+      contentPaddingHorizontal={16}
      listData={pagination.listData}
      renderItem={renderJobItem}
      refreshControl={
@@ -70,7 +71,6 @@ export default function Job_ScreenArchive2() {
      ListEmptyComponent={ListEmptyComponent}
      ListFooterComponent={ListFooterComponent}
      hideFooter
-      contentPadding={PADDING_INLINE}
    />
  );
 }
--- a/screens/Job/ScreenBeranda.tsx
+++ b/screens/Job/ScreenBeranda.tsx
@@ -3,17 +3,16 @@ 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[]>([]);
@@ -44,9 +43,8 @@ export default function Job_ScreenBeranda() {
  };

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

 const PAGE_SIZE = 10;

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

  return (
-    <OS_Wrapper
+    <NewWrapper_V2
+      contentPaddingHorizontal={16}
      hideFooter
-      contentPadding={PADDING_INLINE}
      headerComponent={
-        <View style={{ paddingTop: 8 }}>
+        <View >
          <SearchInput
            placeholder="Cari pekerjaan"
            onChangeText={_.debounce((text) => setSearch(text), 500)}
--- a/screens/Job/ScreenJobCreate.tsx
+++ b/screens/Job/ScreenJobCreate.tsx
@@ -4,14 +4,13 @@ import {
  ButtonCustom,
  InformationBox,
  LandscapeFrameUploaded,
-  OS_Wrapper,
+  NewWrapper_V2,
  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";
@@ -119,11 +118,10 @@ export function Job_ScreenCreate() {
  };

  return (
-    <OS_Wrapper
+    <NewWrapper_V2
      enableKeyboardHandling
-      keyboardScrollOffset={10}
-      // contentPadding={PADDING_INLINE}
-      contentPaddingBottom={250}
+      keyboardScrollOffset={100}
+      contentPaddingHorizontal={16}
      footerComponent={buttonSubmit()}
    >
      <StackCustom gap={"xs"}>
@@ -176,9 +174,7 @@ export function Job_ScreenCreate() {
            onChangeText={(value) => setData({ ...data, deskripsi: value })}
          />
        </View>
-
-        
      </StackCustom>
-    </OS_Wrapper>
+    </NewWrapper_V2>
  );
 }
--- a/screens/Job/ScreenJobEdit.tsx
+++ b/screens/Job/ScreenJobEdit.tsx
@@ -8,14 +8,13 @@ import {
  InformationBox,
  LandscapeFrameUploaded,
  LoaderCustom,
-  OS_Wrapper,
+  NewWrapper_V2,
  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";
@@ -135,16 +134,16 @@ export function Job_ScreenEdit() {
  };

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

          {imageUri ? (
@@ -201,10 +200,8 @@ export function Job_ScreenEdit() {
              onChangeText={(value) => setData({ ...data, deskripsi: value })}
            />
          </View>
-
-          {buttonSubmit()}
-        </StackCustom>
+        </View>
      )}
-    </OS_Wrapper>
+    </NewWrapper_V2>
  );
 }
--- a/screens/UserSeach/MainView_V2.tsx
+++ b/screens/UserSeach/MainView_V2.tsx
@@ -2,7 +2,7 @@ import {
  AvatarComp,
  ClickableCustom,
  Grid,
-  NewWrapper,
+  NewWrapper_V2,
  StackCustom,
  TextCustom,
  TextInputCustom,
@@ -140,7 +140,9 @@ export default function UserSearchMainView_V2() {
    });

  return (
-    <NewWrapper
+    <NewWrapper_V2
+      hideFooter
+      contentPaddingHorizontal={16}
      headerComponent={renderHeader(search, setSearch)}
      listData={pagination.listData}
      renderItem={renderItem}
--- a/tasks/TASK-005-OS-Wrapper-Implementation.md
+++ b/tasks/TASK-005-OS-Wrapper-Implementation.md
@@ -1,307 +0,0 @@
-# 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: 80
-contentPadding?: number;               // Default: 16
-```
-
-### 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
-  keyboardScrollOffset={150}
-  contentPaddingBottom={100}
-  footerComponent={<SubmitButton />}
->
-  <FormContent />
-</OS_Wrapper>
-```
-
-## 🚀 Implementation Status
-
-### ✅ Phase 1: Job Screens - COMPLETED (2026-04-06)
-
-**Files migrated: 8**
-
-#### Job List Screens (OS_Wrapper):
- ✅ `screens/Job/ScreenBeranda.tsx` - ViewWrapper → OS_Wrapper
- ✅ `screens/Job/ScreenBeranda2.tsx` - NewWrapper_V2 → OS_Wrapper
- ✅ `screens/Job/ScreenArchive.tsx` - ViewWrapper → OS_Wrapper
- ✅ `screens/Job/ScreenArchive2.tsx` - NewWrapper_V2 → OS_Wrapper
- ✅ `screens/Job/MainViewStatus.tsx` - ViewWrapper → OS_Wrapper
- ✅ `screens/Job/MainViewStatus2.tsx` - NewWrapper_V2 → OS_Wrapper
-
-#### Job Form Screens (OS_Wrapper with keyboard handling):
- ✅ `screens/Job/ScreenJobCreate.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling
- ✅ `screens/Job/ScreenJobEdit.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling
-
-**Testing Status:**
- ✅ TypeScript: No errors
- ✅ Build: Success
- ✅ iOS Testing: Complete ✅
- ✅ Android Testing: Complete ✅
-
-**Implementation Notes:**
- Semua form screens menggunakan `enableKeyboardHandling` untuk keyboard auto-scroll di Android
- Semua list screens menggunakan pagination dengan `onEndReached`
- Floating button dan sticky header berfungsi dengan baik
- Footer component tetap di posisi bawah
-
-### ⏳ Phase 2: Other User Screens (Priority: HIGH)
-
-#### Profile Screens:
- [ ] `screens/Profile/ScreenProfile.tsx`
- [ ] `screens/Profile/ScreenProfileEdit.tsx` → pakai `enableKeyboardHandling`
- [ ] `screens/Profile/ScreenProfileCreate.tsx` → pakai `enableKeyboardHandling`
-
-#### Forum/Discussion:
- [ ] `screens/Forum/ScreenForum.tsx`
- [ ] `screens/Forum/ScreenForumDetail.tsx`
- [ ] `screens/Forum/ScreenForumCreate.tsx` → pakai `enableKeyboardHandling`
-
-#### Portfolio:
- [ ] `screens/Portfolio/ScreenPortfolio.tsx`
- [ ] `screens/Portfolio/ScreenPortfolioCreate.tsx` → pakai `enableKeyboardHandling`
- [ ] `screens/Portfolio/ScreenPortfolioEdit.tsx` → pakai `enableKeyboardHandling`
-
-### ⏳ Phase 3: Admin Screens (Priority: MEDIUM)
-
-#### Event Management:
- [ ] `screens/Admin/Event/ScreenEventList.tsx`
- [ ] `screens/Admin/Event/ScreenEventCreate.tsx` → pakai `enableKeyboardHandling`
- [ ] `screens/Admin/Event/ScreenEventEdit.tsx` → pakai `enableKeyboardHandling`
-
-#### Voting Management:
- [ ] `screens/Admin/Voting/ScreenVotingList.tsx`
- [ ] `screens/Admin/Voting/ScreenVotingCreate.tsx` → pakai `enableKeyboardHandling`
- [ ] `screens/Admin/Voting/ScreenVotingEdit.tsx` → pakai `enableKeyboardHandling`
-
-#### Donation Management:
- [ ] `screens/Admin/Donation/ScreenDonationList.tsx`
- [ ] `screens/Admin/Donation/ScreenDonationCreate.tsx` → pakai `enableKeyboardHandling`
- [ ] `screens/Admin/Donation/ScreenDonationEdit.tsx` → pakai `enableKeyboardHandling`
-
-### ⏳ Phase 4: Other Screens (Priority: LOW)
- [ ] `screens/Investasi/` - Investment screens
- [ ] `screens/Kolaborasi/` - Collaboration screens
- [ ] Other user-facing screens
-
-## ✅ Testing Checklist
-
-Setiap screen yang sudah di-migrate, test:
-
-### iOS Testing
- [ ] UI tampil sesuai design
- [ ] Tabs berfungsi dengan baik
- [ ] ScrollView/FlatList scroll dengan smooth
- [ ] Keyboard tidak menutupi input (jika pakai `enableKeyboardHandling`)
- [ ] Footer muncul di posisi yang benar
- [ ] Pull to refresh berfungsi (jika ada)
-
-### Android Testing
- [ ] UI tampil sesuai design
- [ ] Tabs berfungsi dengan baik
- [ ] ScrollView/FlatList scroll dengan smooth
- [ ] Keyboard handling: auto scroll saat input focus (jika pakai `enableKeyboardHandling`)
- [ ] Footer muncul di posisi yang benar (tidak tertutup navigation bar)
- [ ] Pull to refresh berfungsi (jika ada)
-
-### Common Testing
- [ ] Background image muncul (jika `withBackground={true}`)
- [ ] Sticky header berfungsi (jika ada `headerComponent`)
- [ ] Footer fixed di bottom (jika ada `footerComponent`)
- [ ] Floating button muncul (jika ada `floatingButton`)
- [ ] Loading skeleton muncul saat pagination
- [ ] Empty state muncul saat data kosong
-
-## 📌 Notes
-
-### Usage Pattern:
-
-#### Untuk List Screen:
-```tsx
-<OS_Wrapper
-  listData={pagination.listData}
-  renderItem={renderItem}
-  ListEmptyComponent={ListEmptyComponent}
-  ListFooterComponent={ListFooterComponent}
-  onEndReached={pagination.loadMore}
-  refreshControl={
-    <RefreshControl
-      refreshing={pagination.refreshing}
-      onRefresh={pagination.onRefresh}
-    />
-  }
-/>
-```
-
-#### Untuk Static Screen:
-```tsx
-<OS_Wrapper
-  headerComponent={<HeaderSection />}
-  footerComponent={<FooterSection />}
->
-  <YourContent />
-</OS_Wrapper>
-```
-
-#### Untuk Form Screen (dengan keyboard handling):
-```tsx
-<OS_Wrapper
-  enableKeyboardHandling
-  keyboardScrollOffset={150}
-  contentPaddingBottom={100}
-  footerComponent={
-    <BoxButtonOnFooter>
-      <ButtonCustom onPress={handleSubmit}>Submit</ButtonCustom>
-    </BoxButtonOnFooter>
-  }
->
-  <FormContent />
-</OS_Wrapper>
-```
-
-### Migration Pattern:
-
-```tsx
-// OLD
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
-
-<NewWrapper
-  listData={data}
-  renderItem={renderItem}
-  headerComponent={header}
-  footerComponent={footer}
-/>
-
-// NEW
-import { OS_Wrapper } from "@/components";
-
-<OS_Wrapper
-  listData={data}
-  renderItem={renderItem}
-  headerComponent={header}
-  footerComponent={footer}
-/>
-```
-
-```tsx
-// OLD (Form with keyboard handling)
-import { NewWrapper_V2 } from "@/components/_ShareComponent/NewWrapper_V2";
-
-<NewWrapper_V2
-  enableKeyboardHandling
-  keyboardScrollOffset={150}
->
-  <FormContent />
-</NewWrapper_V2>
-
-// NEW (Unified API)
-import { OS_Wrapper } from "@/components";
-
-<OS_Wrapper
-  enableKeyboardHandling
-  keyboardScrollOffset={150}
->
-  <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}`. Adjust `keyboardScrollOffset` jika perlu.
-
-### Issue: Footer terlalu jauh dari bottom
-**Solution**: Kurangi `contentPaddingBottom` (default: 80). Untuk list screen tanpa navigation bar overlay, bisa set ke 0.
-
-### 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) | 8 | 8 | ✅ Complete | ✅ Complete |
-| Phase 2 (User) | TBD | 0 | 0 | ⏳ Pending |
-| Phase 3 (Admin) | TBD | 0 | 0 | ⏳ Pending |
-| Phase 4 (Other) | TBD | 0 | 0 | ⏳ Pending |
-| **Total** | **8+** | **8** | **8** | **100% (Phase 1)** |
-
-## 🔄 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-06
-**Status**: Phase 1 (Job Screens) Complete ✅
-**Next**: Phase 2 - Other User Screens
Author	SHA1	Message	Date
bagasbanuna	76759cc547	chore: Update layout headers and iOS build config - Update waiting-room header to use AppHeader component - Update profile create header with 'Buat Profil' title - Update iOS Xcode project with MapLibre signature workaround - Add iOS workspace Package.resolved Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-04-04 13:01:51 +08:00
bagasbanuna	3382c16cdb	refactor: Migrate Profile screens to NewWrapper_V2 - Replace ViewWrapper/NewWrapper with NewWrapper_V2 in all Profile screens - Add enableKeyboardHandling to form screens (create, edit, detail-blocked) - Wrap all TextInput/SelectCustom with View onStartShouldSetResponder - Fix keyboard handling issues (footer lift, white area, input cutoff) - Migrate 7 Profile screens: create, edit, index, detail-blocked, blocked-list, update-photo, update-background Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-04-04 13:00:36 +08:00
bagasbanuna	3290fa99d2	refactor: Migrate UserSearch MainView_V2 to NewWrapper_V2 - Replace NewWrapper with NewWrapper_V2 - Add contentPaddingHorizontal={16} for consistent spacing - Verify TypeScript compilation Phase 1 continued: UserSearch screen migrated! Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-04-04 10:13:22 +08:00
bagasbanuna	940d31bfdc	refactor: Update NewWrapper_V2 padding defaults - Change default paddingTop to 8 - Change default paddingHorizontal to 0 (safe for existing layouts) - Add explicit contentPaddingHorizontal={16} to Job screens - Update interface documentation This makes NewWrapper_V2 safer for mass migration while keeping Job screens looking good with proper spacing. Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-04-04 09:16:15 +08:00