feat: Complete Phase 6 Event screens migration + add PADDING_INLINE to tabs

User Phase 6 - Event Screens (16 files):
- Beranda, Status, History, Contribution (tabs screens)
  → NewWrapper → OS_Wrapper + contentPadding={PADDING_INLINE}
- create.tsx & edit.tsx → Forms with enableKeyboardHandling + contentPaddingBottom={250}
- [id]/publish.tsx, history.tsx, contribution.tsx, confirmation.tsx → Static detail screens
- [id]/[status]/detail-event.tsx → Status detail screen
- detail/[id].tsx → Detail route screen
- ScreenListOfParticipants.tsx → Participants list screen

Key Improvements:
- Added contentPadding={PADDING_INLINE} to all Event (tabs) screens to prevent tight edge margins.
- Form screens (create, edit) use enableKeyboardHandling + contentPaddingBottom={250}.
- Removed all ViewWrapper and NewWrapper instances from Event feature.

Documentation:
- Update TASK-005 with Phase 6 completion details and new progress totals.
- Added note about PADDING_INLINE usage for tab screens.

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

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

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

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>
     </>
   );
 }

app/(application)/(user)/event/[id]/[status]/detail-event.tsx

@@ -5,10 +5,10 @@ import {
   DrawerCustom,
   Grid,
   MenuDrawerDynamicGrid,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
@@ -95,7 +95,7 @@ export default function EventDetailStatus() {
           ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper>
         <BaseBox>
           <StackCustom>
             <TextCustom bold align="center" size="xlarge">
@@ -118,7 +118,7 @@ export default function EventDetailStatus() {
           status={status as string}
         />
         <Spacing />
-      </ViewWrapper>
+      </OS_Wrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

app/(application)/(user)/event/[id]/confirmation.tsx

@@ -5,9 +5,9 @@ import {
   ButtonCustom,
   CenterCustom,
   LoaderCustom,
+  OS_Wrapper,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { MainColor } from "@/constants/color-palet";
@@ -281,7 +281,7 @@ export default function UserEventConfirmation() {
           ),
         }}
       />
-      <ViewWrapper>{handlerReturn()}</ViewWrapper>
+      <OS_Wrapper>{handlerReturn()}</OS_Wrapper>
     </>
   );
 }

app/(application)/(user)/event/[id]/contribution.tsx

@@ -4,8 +4,8 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
+  OS_Wrapper,
   Spacing,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
@@ -59,14 +59,14 @@ export default function EventDetailContribution() {
           ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper>
         {isLoadData ? (
           <LoaderCustom />
         ) : (
           <Event_BoxDetailPublishSection data={data} />
         )}
         <Spacing />
-      </ViewWrapper>
+      </OS_Wrapper>
       <DrawerCustom
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}

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

@@ -3,14 +3,13 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   LoaderCustom,
-  NewWrapper,
+  OS_Wrapper,
   SelectCustom,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextCustom,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
@@ -186,7 +185,9 @@ export default function EventEdit() {
 
   return (
     <>
-      <NewWrapper
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
         footerComponent={
           <BoxButtonOnFooter>
             <ButtonCustom
@@ -283,7 +284,7 @@ export default function EventEdit() {
             />
           </StackCustom>
         )}
-      </NewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

app/(application)/(user)/event/[id]/history.tsx

@@ -3,7 +3,7 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  ViewWrapper,
+  OS_Wrapper,
   Spacing,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
@@ -54,10 +54,10 @@ export default function EventDetailHistory() {
           ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper>
         <Event_BoxDetailPublishSection data={data} />
         <Spacing />
-      </ViewWrapper>
+      </OS_Wrapper>
       <DrawerCustom
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}

app/(application)/(user)/event/[id]/publish.tsx

@@ -6,7 +6,7 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  ViewWrapper,
+  OS_Wrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
@@ -122,9 +122,9 @@ export default function EventDetailPublish() {
 
   if (isEventFinished) {
     return (
-      <ViewWrapper>
+      <OS_Wrapper>
         <CustomSkeleton />
-      </ViewWrapper>
+      </OS_Wrapper>
     );
   }
 
@@ -166,7 +166,7 @@ export default function EventDetailPublish() {
           ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper>
         {isLoadingData ? (
           <CustomSkeleton height={400} />
         ) : (
@@ -175,7 +175,7 @@ export default function EventDetailPublish() {
             footerButton={FooterButton()}
           />
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

app/(application)/(user)/event/create.tsx

@@ -1,7 +1,7 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
-  NewWrapper,
+  OS_Wrapper,
   SelectCustom,
   Spacing,
   StackCustom,
@@ -112,7 +112,9 @@ export default function EventCreate() {
 
   return (
     <>
-      <NewWrapper
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
         footerComponent={<BoxButtonOnFooter>{buttonSubmit}</BoxButtonOnFooter>}
       >
         <StackCustom gap={"xs"}>
@@ -182,7 +184,7 @@ export default function EventCreate() {
             />
           </StackCustom>
         </StackCustom>
-      </NewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

app/(application)/(user)/event/detail/[id].tsx

@@ -1,4 +1,4 @@
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { OS_Wrapper } from "@/components";
 import { GStyles } from "@/styles/global-styles";
 import { useLocalSearchParams } from "expo-router";
 import { Text } from "react-native";
@@ -7,8 +7,8 @@ export default function DetailEvent() {
   const { id } = useLocalSearchParams();
   console.log("id event >", id);
   return (
-    <ViewWrapper>
+    <OS_Wrapper>
       <Text style={GStyles.textLabel}>Detail Event {id}</Text>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -2,8 +2,8 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   LoaderCustom,
+  OS_Wrapper,
   TextAreaCustom,
-  ViewWrapper,
 } from "@/components";
 import AlertWarning from "@/components/Alert/AlertWarning";
 import { apiForumGetOne, apiForumUpdate } from "@/service/api-client/api-forum";
@@ -88,7 +88,11 @@ export default function ForumEdit() {
   };
 
   return (
-    <ViewWrapper footerComponent={buttonFooter()}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={buttonFooter()}
+    >
       {!loadingGetData ? (
         <TextAreaCustom
           placeholder="Ketik diskusi anda..."
@@ -102,6 +106,6 @@ export default function ForumEdit() {
       ) : (
         <LoaderCustom />
       )}
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

app/(application)/(user)/forum/[id]/other-report-commentar.tsx

@@ -1,8 +1,8 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
+  OS_Wrapper,
   TextAreaCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
@@ -62,13 +62,17 @@ export default function ForumOtherReportCommentar() {
 
   return (
     <>
-      <ViewWrapper footerComponent={handleSubmit}>
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
+        footerComponent={handleSubmit}
+      >
         <TextAreaCustom
           placeholder="Laporkan Komentar"
           value={value}
           onChangeText={setValue}
         />
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

app/(application)/(user)/forum/[id]/other-report-posting.tsx

@@ -1,8 +1,8 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
+  OS_Wrapper,
   TextAreaCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
@@ -61,13 +61,17 @@ export default function ForumOtherReportPosting() {
   );
   return (
     <>
-      <ViewWrapper footerComponent={handleSubmit}>
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
+        footerComponent={handleSubmit}
+      >
         <TextAreaCustom
           placeholder="Laporkan Diskusi"
           value={value}
           onChangeText={setValue}
         />
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

app/(application)/(user)/forum/[id]/preview-report-comment.tsx

@@ -1,6 +1,6 @@
 import {
   BaseBox,
-  NewWrapper,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
@@ -41,7 +41,7 @@ export default function ForumPreviewReportComment() {
 
   return (
     <>
-      <NewWrapper>
+      <OS_Wrapper>
         <StackCustom>
           <TextCustom color="red" bold>
             Komentar anda telah melanggar aturan forum ! Admin mengambil
@@ -85,7 +85,7 @@ export default function ForumPreviewReportComment() {
               </BaseBox>
           ))
         )}
-      </NewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

app/(application)/(user)/forum/[id]/preview-report-posting.tsx

@@ -1,6 +1,6 @@
 import {
   BaseBox,
-  NewWrapper,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
@@ -41,7 +41,7 @@ export default function ForumPreviewReportPosting() {
 
   return (
     <>
-      <NewWrapper>
+      <OS_Wrapper>
         <StackCustom>
           <TextCustom color="red" bold>
             Postingan anda telah melanggar aturan forum ! Admin mengambil
@@ -85,7 +85,7 @@ export default function ForumPreviewReportPosting() {
             </BaseBox>
           ))
         )}
-      </NewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

app/(application)/(user)/forum/[id]/report-commentar.tsx

@@ -1,9 +1,9 @@
 import {
   ButtonCustom,
   LoaderCustom,
+  OS_Wrapper,
   Spacing,
   StackCustom,
-  ViewWrapper,
 } from "@/components";
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
@@ -69,7 +69,7 @@ export default function ForumReportCommentar() {
 
   return (
     <>
-      <ViewWrapper>
+      <OS_Wrapper>
         {isLoadingList ? (
           <LoaderCustom />
         ) : (
@@ -101,7 +101,7 @@ export default function ForumReportCommentar() {
             <Spacing />
           </StackCustom>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

app/(application)/(user)/forum/[id]/report-posting.tsx

@@ -2,9 +2,9 @@ import {
   AlertDefaultSystem,
   ButtonCustom,
   LoaderCustom,
+  OS_Wrapper,
   Spacing,
   StackCustom,
-  ViewWrapper,
 } from "@/components";
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
@@ -73,7 +73,7 @@ export default function ForumReportPosting() {
 
   return (
     <>
-      <ViewWrapper>
+      <OS_Wrapper>
         {isLoadingList ? (
           <LoaderCustom />
         ) : (
@@ -114,7 +114,7 @@ export default function ForumReportPosting() {
             <Spacing />
           </StackCustom>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

app/(application)/(user)/forum/create.tsx

@@ -1,8 +1,8 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
+  OS_Wrapper,
   TextAreaCustom,
-  ViewWrapper,
 } from "@/components";
 import AlertWarning from "@/components/Alert/AlertWarning";
 import { useAuth } from "@/hooks/use-auth";
@@ -67,7 +67,11 @@ export default function ForumCreate() {
   );
 
   return (
-    <ViewWrapper footerComponent={buttonFooter}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={buttonFooter}
+    >
       <TextAreaCustom
         placeholder="Ketik diskusi anda..."
         maxLength={1000}
@@ -75,6 +79,6 @@ export default function ForumCreate() {
         value={text}
         onChangeText={setText}
       />
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

app/(application)/(user)/forum/terms.tsx

@@ -2,7 +2,7 @@ import {
     BaseBox,
     ButtonCustom,
     CheckboxCustom,
-    NewWrapper,
+    OS_Wrapper,
     StackCustom,
     TextCustom,
 } from "@/components";
@@ -54,7 +54,7 @@ export default function ForumSplash() {
   };
 
   return (
-    <NewWrapper>
+    <OS_Wrapper>
       {/* <TextCustom bold>HIPMI Badung Connect</TextCustom> . */}
 
       <BaseBox>
@@ -162,7 +162,7 @@ export default function ForumSplash() {
           </ButtonCustom>
         </StackCustom>
       </BaseBox>
-    </NewWrapper>
+    </OS_Wrapper>
   );
 }
 

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 {
+import { router, Tabs, useLocalSearchParams } from "expo-router";
-  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,
+              paddingTop: OS_IOS_PADDING_TOP,
-              height: 80,
+              height: OS_IOS_HEIGHT,
             },
             android: {
               borderTopWidth: 0,
-              paddingTop: 5,
+              paddingTop: OS_ANDROID_PADDING_TOP,
-              height: 70 + paddingBottom,
+              height: OS_ANDROID_HEIGHT + paddingBottom,
             },
           }),
           header: () => (
             <AppHeader
               title="Job Vacancy"
               left={
-                <BackButtonFromNotification from={from || ""} category={category} />
+                <BackButtonFromNotification
+                  from={from || ""}
+                  category={category}
+                />
               }
             />
           ),

app/(application)/(user)/job/[id]/[status]/detail.tsx

@@ -5,7 +5,7 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
-  NewWrapper_V2,
+  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() {
           ),
         }}
       />
-      <NewWrapper_V2>
+      <OS_Wrapper >
         {isLoadData ? (
           <LoaderCustom />
         ) : (
@@ -96,7 +97,7 @@ export default function JobDetailStatus() {
             <Spacing />
           </>
         )}
-      </NewWrapper_V2>
+      </OS_Wrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

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

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

@@ -1,8 +1,8 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
+  OS_Wrapper,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import {
   apiGetOnePortofolio,
@@ -91,7 +91,11 @@ export default function PortofolioEditSocialMedia() {
 
   return (
     <>
-      <ViewWrapper footerComponent={buttonFooter}>
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
+        footerComponent={buttonFooter}
+      >
         <TextInputCustom
           value={data.tiktok}
           onChangeText={(value) => setData({ ...data, tiktok: value })}
@@ -122,7 +126,7 @@ export default function PortofolioEditSocialMedia() {
           label="Youtube"
           placeholder="Masukkan youtube"
         />
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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

@@ -4,7 +4,7 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   CenterCustom,
-  NewWrapper,
+  OS_Wrapper,
   PhoneInputCustom,
   SelectCustom,
   Spacing,
@@ -16,7 +16,11 @@ import {
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
-import { DEFAULT_COUNTRY, type CountryData, COUNTRIES } from "@/constants/countries";
+import {
+  DEFAULT_COUNTRY,
+  type CountryData,
+  COUNTRIES,
+} from "@/constants/countries";
 import {
   apiMasterBidangBisnis,
   apiMasterSubBidangBisnis,
@@ -61,7 +65,8 @@ export default function PortofolioEdit() {
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<any>({});
   const [phoneNumber, setPhoneNumber] = useState<string>("");
-  const [selectedCountry, setSelectedCountry] = useState<CountryData>(DEFAULT_COUNTRY);
+  const [selectedCountry, setSelectedCountry] =
+    useState<CountryData>(DEFAULT_COUNTRY);
   const [bidangBisnis, setBidangBisnis] = useState<
     IMasterBidangBisnis[] | null
   >(null);
@@ -75,38 +80,38 @@ export default function PortofolioEdit() {
 
   function handlePhoneChange(phone: string) {
     setPhoneNumber(phone);
-    
+
     // Format phone number for API
     const callingCode = selectedCountry.callingCode;
     let fixNumber = phone.replace(/\s+/g, "").replace(/^0+/, "");
-    
+
     // Remove country code if already present
     if (fixNumber.startsWith(callingCode)) {
       fixNumber = fixNumber.substring(callingCode.length);
     }
-    
+
     // Remove leading zero
     fixNumber = fixNumber.replace(/^0+/, "");
-    
+
     const realNumber = callingCode + fixNumber;
     setData({ ...data, tlpn: realNumber });
   }
 
   function handleCountryChange(country: CountryData) {
     setSelectedCountry(country);
-    
+
     // Re-format with new country code
     const callingCode = country.callingCode;
     let fixNumber = phoneNumber.replace(/\s+/g, "").replace(/^0+/, "");
-    
+
     // Remove country code if already present
     if (fixNumber.startsWith(callingCode)) {
       fixNumber = fixNumber.substring(callingCode.length);
     }
-    
+
     // Remove leading zero
     fixNumber = fixNumber.replace(/^0+/, "");
-    
+
     const realNumber = callingCode + fixNumber;
     setData({ ...data, tlpn: realNumber });
   }
@@ -157,7 +162,7 @@ export default function PortofolioEdit() {
       const fullNumber = response.data.tlpn;
       let displayNumber = fullNumber;
       let detectedCountry = DEFAULT_COUNTRY;
-      
+
       // Try to detect country from calling code
       for (const country of COUNTRIES) {
         if (fullNumber.startsWith(country.callingCode)) {
@@ -166,12 +171,12 @@ export default function PortofolioEdit() {
           break;
         }
       }
-      
+
       setSelectedCountry(detectedCountry);
-      
+
       // Remove leading zero if present
       displayNumber = displayNumber.replace(/^0+/, "");
-      
+
       setPhoneNumber(displayNumber);
       setData({ ...response.data, tlpn: displayNumber });
 
@@ -363,161 +368,159 @@ export default function PortofolioEdit() {
     </BoxButtonOnFooter>
   );
 
-  if (!bidangBisnis || !subBidangBisnis) {
-    return (
-      <>
-        <NewWrapper>
-          <ListSkeletonComponent height={80} />
-        </NewWrapper>
-      </>
-    );
-  }
-
   return (
     <>
-      <NewWrapper footerComponent={buttonUpdate}>
+      <OS_Wrapper
-        <StackCustom gap={"xs"}>
+        enableKeyboardHandling
-          <TextInputCustom
+        contentPaddingBottom={250}
-            required
+        footerComponent={buttonUpdate}
-            label="Nama Bisnis"
+      >
-            placeholder="Masukkan nama bisnis"
+        {!bidangBisnis || !subBidangBisnis ? (
-            value={data.namaBisnis}
+          <ListSkeletonComponent height={80} />
-            onChangeText={(value: any) =>
+        ) : (
-              setData({ ...data, namaBisnis: value })
+          <StackCustom gap={"xs"}>
-            }
+            <TextInputCustom
-          />
+              required
-
+              label="Nama Bisnis"
-          <SelectCustom
+              placeholder="Masukkan nama bisnis"
-            label="Bidang Usaha"
+              value={data.namaBisnis}
-            required
+              onChangeText={(value: any) =>
-            data={bidangBisnis?.map((item) => ({
+                setData({ ...data, namaBisnis: value })
-              label: item.name,
+              }
-              value: item.id,
-            }))}
-            value={data.masterBidangBisnisId}
-            onChange={(value: any) => {
-              handleBidangBisnisChange(value);
-            }}
-          />
-
-          {listSubBidangSelected.map((item, index) => {
-            // Filter data untuk select sub bidang, menghilangkan yang sudah dipilih kecuali untuk item ini sendiri
-            const selectedIds = listSubBidangSelected
-              .filter((_, i) => i !== index)
-              .map((s) => s.MasterSubBidangBisnis?.id)
-              .filter((id) => id); // Filter hanya yang memiliki id (tidak kosong)
-
-            const availableSubBidangOptions = (selectedSubBidang || [])
-              .filter((sub: any) => {
-                // Tampilkan jika ini adalah opsi yang dipilih saat ini atau belum dipilih di sub bidang lainnya
-
-                return (
-                  sub.id === item.MasterSubBidangBisnis?.id ||
-                  !selectedIds.includes(sub.id)
-                );
-              })
-              .map((sub: any) => ({
-                value: sub.id,
-                label: sub.name,
-              }));
-
-            return (
-              <SelectCustom
-                key={index}
-                label="Sub Bidang Usaha"
-                required
-                data={availableSubBidangOptions}
-                value={item.MasterSubBidangBisnis?.id || null}
-                onChange={(value: any) => {
-                  handleSubBidangChange(value, index);
-                }}
-              />
-            );
-          })}
-
-          <CenterCustom>
-            <View
-              style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
-            >
-              <ActionIcon
-                disabled={
-                  selectedSubBidang.length === listSubBidangSelected.length
-                }
-                onPress={() => {
-                  handleAddSubBidang();
-                }}
-                icon={
-                  <Ionicons
-                    name="add-circle-outline"
-                    size={ICON_SIZE_XLARGE}
-                    color={MainColor.black}
-                  />
-                }
-                size="xl"
-              />
-              <ActionIcon
-                disabled={listSubBidangSelected.length <= 1}
-                onPress={() => {
-                  handleRemoveSubBidang(listSubBidangSelected.length - 1);
-                }}
-                icon={
-                  <Ionicons
-                    name="remove-circle-outline"
-                    size={ICON_SIZE_XLARGE}
-                    color={MainColor.black}
-                  />
-                }
-                size="xl"
-              />
-            </View>
-          </CenterCustom>
-          <Spacing />
-
-          <View>
-            <View style={{ flexDirection: "row", alignItems: "center" }}>
-              <TextCustom semiBold style={{ color: MainColor.white_gray }}>
-                Nomor Telepon
-              </TextCustom>
-              <Text style={{ color: "red" }}> *</Text>
-            </View>
-            <Spacing height={5} />
-            <PhoneInputCustom
-              value={phoneNumber}
-              onChangePhoneNumber={handlePhoneChange}
-              selectedCountry={selectedCountry}
-              onChangeCountry={handleCountryChange}
-              placeholder="xxx-xxx-xxx"
             />
-          </View>
-          <Spacing />
 
-          <TextInputCustom
+            <SelectCustom
-            required
+              label="Bidang Usaha"
-            label="Alamat Bisnis"
+              required
-            placeholder="Masukkan alamat bisnis"
+              data={bidangBisnis?.map((item) => ({
-            value={data.alamatKantor}
+                label: item.name,
-            onChangeText={(value: any) =>
+                value: item.id,
-              setData({ ...data, alamatKantor: value })
+              }))}
-            }
+              value={data.masterBidangBisnisId}
-          />
+              onChange={(value: any) => {
+                handleBidangBisnisChange(value);
+              }}
+            />
 
-          <TextAreaCustom
+            {listSubBidangSelected.map((item, index) => {
-            label="Deskripsi Bisnis"
+              // Filter data untuk select sub bidang, menghilangkan yang sudah dipilih kecuali untuk item ini sendiri
-            placeholder="Masukkan deskripsi bisnis"
+              const selectedIds = listSubBidangSelected
-            value={data.deskripsi}
+                .filter((_, i) => i !== index)
-            onChangeText={(value: any) =>
+                .map((s) => s.MasterSubBidangBisnis?.id)
-              setData({ ...data, deskripsi: value })
+                .filter((id) => id); // Filter hanya yang memiliki id (tidak kosong)
-            }
+
-            autosize
+              const availableSubBidangOptions = (selectedSubBidang || [])
-            minRows={2}
+                .filter((sub: any) => {
-            maxRows={5}
+                  // Tampilkan jika ini adalah opsi yang dipilih saat ini atau belum dipilih di sub bidang lainnya
-            required
+
-            showCount
+                  return (
-            maxLength={1000}
+                    sub.id === item.MasterSubBidangBisnis?.id ||
-          />
+                    !selectedIds.includes(sub.id)
-          <Spacing />
+                  );
-        </StackCustom>
+                })
-      </NewWrapper>
+                .map((sub: any) => ({
+                  value: sub.id,
+                  label: sub.name,
+                }));
+
+              return (
+                <SelectCustom
+                  key={index}
+                  label="Sub Bidang Usaha"
+                  required
+                  data={availableSubBidangOptions}
+                  value={item.MasterSubBidangBisnis?.id || null}
+                  onChange={(value: any) => {
+                    handleSubBidangChange(value, index);
+                  }}
+                />
+              );
+            })}
+
+            <CenterCustom>
+              <View
+                style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
+              >
+                <ActionIcon
+                  disabled={
+                    selectedSubBidang.length === listSubBidangSelected.length
+                  }
+                  onPress={() => {
+                    handleAddSubBidang();
+                  }}
+                  icon={
+                    <Ionicons
+                      name="add-circle-outline"
+                      size={ICON_SIZE_XLARGE}
+                      color={MainColor.black}
+                    />
+                  }
+                  size="xl"
+                />
+                <ActionIcon
+                  disabled={listSubBidangSelected.length <= 1}
+                  onPress={() => {
+                    handleRemoveSubBidang(listSubBidangSelected.length - 1);
+                  }}
+                  icon={
+                    <Ionicons
+                      name="remove-circle-outline"
+                      size={ICON_SIZE_XLARGE}
+                      color={MainColor.black}
+                    />
+                  }
+                  size="xl"
+                />
+              </View>
+            </CenterCustom>
+            <Spacing />
+
+            <View>
+              <View style={{ flexDirection: "row", alignItems: "center" }}>
+                <TextCustom semiBold style={{ color: MainColor.white_gray }}>
+                  Nomor Telepon
+                </TextCustom>
+                <Text style={{ color: "red" }}> *</Text>
+              </View>
+              <Spacing height={5} />
+              <PhoneInputCustom
+                value={phoneNumber}
+                onChangePhoneNumber={handlePhoneChange}
+                selectedCountry={selectedCountry}
+                onChangeCountry={handleCountryChange}
+                placeholder="xxx-xxx-xxx"
+              />
+            </View>
+            <Spacing />
+
+            <TextInputCustom
+              required
+              label="Alamat Bisnis"
+              placeholder="Masukkan alamat bisnis"
+              value={data.alamatKantor}
+              onChangeText={(value: any) =>
+                setData({ ...data, alamatKantor: value })
+              }
+            />
+
+            <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>
+        )}
+      </OS_Wrapper>
     </>
   );
 }

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

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

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 from "@/components/_ShareComponent/NewWrapper";
 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
+      <OS_Wrapper
         // headerComponent={renderHeader()}
         listData={listData}
         renderItem={renderItem}

app/(application)/(user)/profile/[id]/detail-blocked.tsx

@@ -5,7 +5,7 @@ import {
   BoxButtonOnFooter,
   BoxWithHeaderSection,
   ButtonCustom,
-  NewWrapper,
+  OS_Wrapper,
   StackCustom,
   TextCustom,
 } from "@/components";
@@ -46,7 +46,7 @@ export default function ProfileDetailBlocked() {
 
   return (
     <>
-      <NewWrapper
+      <OS_Wrapper
         footerComponent={
           <BoxButtonOnFooter>
             <ButtonCustom
@@ -86,7 +86,7 @@ export default function ProfileDetailBlocked() {
             </TextCustom>
           </StackCustom>
         </BoxWithHeaderSection>
-      </NewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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

@@ -1,11 +1,12 @@
 import {
   ButtonCustom,
+  OS_Wrapper,
   SelectCustom,
   StackCustom,
   TextInputCustom,
-  ViewWrapper,
 } 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";
@@ -70,7 +71,9 @@ export default function ProfileEdit() {
   };
 
   return (
-    <ViewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
@@ -119,6 +122,6 @@ export default function ProfileEdit() {
           }}
         />
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { NewWrapper, 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
+      <OS_Wrapper
         refreshControl={
           <RefreshControl
             refreshing={refreshing}
@@ -144,7 +144,7 @@ export default function Profile() {
             />
           </>
         )}
-      </NewWrapper>
+      </OS_Wrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom

app/(application)/(user)/profile/[id]/update-background.tsx

@@ -3,8 +3,8 @@ import {
     BoxButtonOnFooter,
     ButtonCenteredOnly,
     ButtonCustom,
+    OS_Wrapper,
 } 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,7 @@ export default function UpdateBackgroundProfile() {
   );
 
   return (
-    <ViewWrapper footerComponent={buttonFooter}>
+    <OS_Wrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
@@ -144,6 +144,6 @@ export default function UpdateBackgroundProfile() {
       >
         Update
       </ButtonCenteredOnly>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

app/(application)/(user)/profile/[id]/update-photo.tsx

@@ -3,8 +3,8 @@ import {
   BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
+  OS_Wrapper,
 } 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,7 @@ export default function UpdatePhotoProfile() {
   );
 
   return (
-    <ViewWrapper footerComponent={buttonFooter}>
+    <OS_Wrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
@@ -143,6 +143,6 @@ export default function UpdatePhotoProfile() {
       >
         Upload
       </ButtonCenteredOnly>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

app/(application)/(user)/profile/create.tsx

@@ -2,16 +2,17 @@ import {
     BaseBox,
     ButtonCenteredOnly,
     ButtonCustom,
+    OS_Wrapper,
     SelectCustom,
     Spacing,
     StackCustom,
     TextInputCustom,
-    ViewWrapper,
 } from "@/components";
 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,7 +156,11 @@ export default function CreateProfile() {
   );
 
   return (
-    <ViewWrapper footerComponent={footerComponent}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={footerComponent}
+    >
       <StackCustom>
         <InformationBox text="Upload foto profile anda." />
         <View style={{ alignItems: "center" }}>
@@ -241,6 +246,6 @@ export default function CreateProfile() {
         />
         <Spacing />
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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>
     </>
   );
 }

app/(application)/admin/user-access/[id]/index.tsx

@@ -3,9 +3,9 @@ import {
     BoxButtonOnFooter,
     ButtonCustom,
     LoaderCustom,
+    OS_Wrapper,
     StackCustom,
     TextCustom,
-    ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
@@ -76,7 +76,7 @@ export default function AdminUserAccessDetail() {
 
   return (
     <>
-      <ViewWrapper
+      <OS_Wrapper
         headerComponent={<AdminBackButtonAntTitle title={`Detail User`} />}
         footerComponent={
           data && (
@@ -108,7 +108,7 @@ export default function AdminUserAccessDetail() {
             ))}
           </StackCustom>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

components/_ShareComponent/AndroidWrapper.tsx

@@ -7,7 +7,6 @@ import {
   ImageBackground,
   Keyboard,
   KeyboardAvoidingView,
-  Platform,
   ScrollView,
   FlatList,
   TouchableWithoutFeedback,
@@ -20,7 +19,7 @@ import {
   SafeAreaView,
 } from "react-native-safe-area-context";
 import type { ScrollViewProps, FlatListProps } from "react-native";
-import { useKeyboardForm } from "@/hooks/useKeyboardForm";
+import { useKeyboardForm, cloneChildrenWithFocusHandler } from "@/hooks/useKeyboardForm";
 
 // --- Base Props ---
 interface BaseProps {
@@ -53,6 +52,12 @@ interface BaseProps {
    * @default 16
    */
   contentPadding?: number;
+  /**
+   * Disable flexGrow: 1 in contentContainerStyle
+   * Use this for screens with very large headers to fix scroll issues
+   * @default false
+   */
+  disableFlexGrow?: boolean;
 }
 
 interface StaticModeProps extends BaseProps {
@@ -85,16 +90,22 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
     style,
     refreshControl,
     enableKeyboardHandling = false,
-    keyboardScrollOffset = 100,
+    keyboardScrollOffset,
-    contentPaddingBottom = 80,
+    contentPaddingBottom,
-    contentPadding = 16,
+    contentPadding,
+    disableFlexGrow = false,
   } = 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(keyboardScrollOffset)
+    ? useKeyboardForm(finalKeyboardScrollOffset)
     : null;
 
   const renderContainer = (content: React.ReactNode) => {
@@ -119,40 +130,41 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
     const listProps = props as ListModeProps;
 
     return (
-      <KeyboardAvoidingView
+      <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-        behavior={Platform.OS === "ios" ? "padding" : undefined}
-        style={{ flex: 1, backgroundColor: MainColor.darkblue }}
-      >
         {headerComponent && (
           <View style={GStyles.stickyHeader}>{headerComponent}</View>
         )}
         <FlatList
-          data={listProps.listData}
+            style={{ flex: 1 }}
-          renderItem={listProps.renderItem}
+            data={listProps.listData}
-          keyExtractor={
+            renderItem={listProps.renderItem}
-            listProps.keyExtractor ||
+            keyExtractor={
-            ((item, index) => `${String(item.id)}-${index}`)
+              listProps.keyExtractor ||
-          }
+              ((item, index) => `${String(item.id)}-${index}`)
-          refreshControl={refreshControl}
+            }
-          onEndReached={listProps.onEndReached}
+            refreshControl={refreshControl}
-          onEndReachedThreshold={0.5}
+            onEndReached={listProps.onEndReached}
-          ListHeaderComponent={listProps.ListHeaderComponent}
+            onEndReachedThreshold={0.5}
-          ListFooterComponent={listProps.ListFooterComponent}
+            ListHeaderComponent={listProps.ListHeaderComponent}
-          ListEmptyComponent={listProps.ListEmptyComponent}
+            ListFooterComponent={listProps.ListFooterComponent}
-          contentContainerStyle={{
+            ListEmptyComponent={listProps.ListEmptyComponent}
-            flexGrow: 1,
+            contentContainerStyle={{
-            paddingBottom:
+              flexGrow: disableFlexGrow ? 0 : 1,
-              (footerComponent && !hideFooter ? OS_HEIGHT : 0) +
+              paddingBottom:
-              contentPaddingBottom,
+                (footerComponent && !hideFooter ? OS_HEIGHT : 0) +
-            padding: contentPadding,
+                finalContentPaddingBottom,
-          }}
+              padding: finalContentPadding,
-          keyboardShouldPersistTaps="handled"
+            }}
-        />
+            keyboardShouldPersistTaps="handled"
+            removeClippedSubviews={false}
+            stickyHeaderIndices={[]}
+            nestedScrollEnabled={true}
+          />
 
         {/* Footer - Fixed di bawah dengan width 100% */}
         {footerComponent && !hideFooter && (
           <SafeAreaView
-            edges={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
+            edges={["bottom"]}
             style={{ backgroundColor: MainColor.darkblue, width: "100%" }}
           >
             <View style={{ width: "100%" }}>{footerComponent}</View>
@@ -169,37 +181,42 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
         {floatingButton && (
           <View style={GStyles.floatingContainer}>{floatingButton}</View>
         )}
-      </KeyboardAvoidingView>
+      </View>
     );
   }
 
   // 🔹 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 (
-    <KeyboardAvoidingView
+    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-      behavior={Platform.OS === "ios" ? "padding" : undefined}
-      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,
+          flexGrow: disableFlexGrow ? 0 : 1,
           paddingBottom:
             (footerComponent && !hideFooter ? OS_HEIGHT : 0) +
-            contentPaddingBottom,
+            finalContentPaddingBottom,
-          padding: contentPadding,
+          padding: finalContentPadding,
         }}
         keyboardShouldPersistTaps="handled"
         showsVerticalScrollIndicator={false}
       >
         <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-          {renderContainer(staticProps.children)}
+          {renderContainer(childrenWithFocus)}
         </TouchableWithoutFeedback>
       </ScrollView>
 
@@ -210,8 +227,8 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
           style={{
             backgroundColor: MainColor.darkblue,
             width: "100%",
-            position: Platform.OS === "android" ? "absolute" : undefined,
+            position: "absolute",
-            bottom: Platform.OS === "android" ? 0 : undefined,
+            bottom: 0,
             left: 0,
             right: 0,
           }}
@@ -230,7 +247,7 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
       {floatingButton && (
         <View style={GStyles.floatingContainer}>{floatingButton}</View>
       )}
-    </KeyboardAvoidingView>
+    </View>
   );
 }
 

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,

components/_ShareComponent/IOSWrapper.tsx

@@ -7,7 +7,6 @@ import {
   ImageBackground,
   Keyboard,
   KeyboardAvoidingView,
-  Platform,
   ScrollView,
   FlatList,
   TouchableWithoutFeedback,
@@ -89,7 +88,7 @@ const iOSWrapper = (props: iOSWrapperProps) => {
 
     return (
       <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        behavior="padding"
         style={{ flex: 1, backgroundColor: MainColor.darkblue }}
       >
         {headerComponent && (
@@ -128,7 +127,7 @@ const iOSWrapper = (props: iOSWrapperProps) => {
         {footerComponent && !hideFooter && (
           <View style={styles.footerContainer}>
             <SafeAreaView
-              edges={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
+              edges={edgesFooter}
               style={{ backgroundColor: MainColor.darkblue }}
             >
               {footerComponent}
@@ -155,7 +154,7 @@ const iOSWrapper = (props: iOSWrapperProps) => {
 
   return (
     <KeyboardAvoidingView
-      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      behavior="padding"
       style={{ flex: 1, backgroundColor: MainColor.darkblue }}
     >
       {headerComponent && (
@@ -181,7 +180,7 @@ const iOSWrapper = (props: iOSWrapperProps) => {
       {footerComponent && !hideFooter && (
         <View style={styles.footerContainer}>
           <SafeAreaView
-            edges={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
+            edges={edgesFooter}
             style={{ backgroundColor: MainColor.darkblue }}
           >
             {footerComponent}

components/_ShareComponent/OS_Wrapper.tsx

@@ -22,6 +22,7 @@ interface BaseProps {
   edgesFooter?: NativeSafeAreaViewProps["edges"];
   style?: StyleProp<ViewStyle>;
   refreshControl?: ScrollViewProps["refreshControl"];
+  disableFlexGrow?: boolean;
 }
 
 // ========== Static Mode Props ==========
@@ -43,10 +44,10 @@ interface ListModeProps extends BaseProps {
   keyExtractor?: FlatListProps<any>["keyExtractor"];
 }
 
-// ========== PageWrapper Props (Android-specific keyboard handling) ==========
+// ========== Keyboard Handling Props (Android only) ==========
-interface PageWrapperBaseProps extends BaseProps {
+interface KeyboardHandlingProps {
   /**
-   * Enable keyboard handling (Android only - NewWrapper_V2)
+   * Enable keyboard handling with auto-scroll (Android only)
    * iOS ignores this prop
    * @default false
    */
@@ -74,81 +75,76 @@ interface PageWrapperBaseProps extends BaseProps {
   contentPadding?: number;
 }
 
-interface PageWrapperStaticProps extends PageWrapperBaseProps {
+// ========== Final Props Types ==========
-  children: React.ReactNode;
+type OS_WrapperStaticProps = StaticModeProps & KeyboardHandlingProps;
-  listData?: never;
+type OS_WrapperListProps = ListModeProps & KeyboardHandlingProps;
-  renderItem?: never;
-}
 
-interface PageWrapperListProps extends PageWrapperBaseProps {
+type OS_WrapperProps = OS_WrapperStaticProps | OS_WrapperListProps;
-  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 OS_WrapperProps = StaticModeProps | ListModeProps;
-type PageWrapperProps = PageWrapperStaticProps | PageWrapperListProps;
 
 /**
  * OS_Wrapper - Automatically selects iOSWrapper or AndroidWrapper based on platform
  * 
- * @example Static Mode
+ * 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
+ * @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,
+    disableFlexGrow = false,
+    ...wrapperProps
+  } = props;
+
   // iOS uses IOSWrapper (based on NewWrapper)
   if (Platform.OS === "ios") {
-    return <IOSWrapper {...props} />;
+    // Keyboard handling props are ignored on iOS
+    return <IOSWrapper {...(wrapperProps as any)} disableFlexGrow={disableFlexGrow} />;
   }
 
-  // Android uses AndroidWrapper (based on NewWrapper_V2 with keyboard handling)
+  // Android uses AndroidWrapper (with keyboard handling support)
-  return <AndroidWrapper {...props} />;
+  return (
-}
+    <AndroidWrapper
-
+      {...(wrapperProps as any)}
-/**
+      enableKeyboardHandling={enableKeyboardHandling}
- * PageWrapper - OS_Wrapper with keyboard handling support (Android only)
+      keyboardScrollOffset={keyboardScrollOffset}
- * Use this for forms with input fields
+      contentPaddingBottom={contentPaddingBottom}
- * 
+      contentPadding={contentPadding}
- * @example
+      disableFlexGrow={disableFlexGrow}
- * ```tsx
+    />
- * <PageWrapper enableKeyboardHandling keyboardScrollOffset={150}>
+  );
- *   <FormContent />
- * </PageWrapper>
- * ```
- */
-export function PageWrapper(props: PageWrapperProps) {
-  // iOS: Keyboard handling props are ignored
-  if (Platform.OS === "ios") {
-    const {
-      enableKeyboardHandling: _,
-      keyboardScrollOffset: __1,
-      contentPaddingBottom: __2,
-      contentPadding: __3,
-      ...iosProps
-    } = props;
-    return <IOSWrapper {...iosProps} />;
-  }
-
-  // Android: Keyboard handling props are used
-  return <AndroidWrapper {...props} />;
 }
 
 // Re-export individual wrappers for direct usage if needed

components/index.ts

@@ -66,7 +66,7 @@ import BasicWrapper from "./_ShareComponent/BasicWrapper";
 import { FormWrapper } from "./_ShareComponent/FormWrapper";
 import { NewWrapper_V2 } from "./_ShareComponent/NewWrapper_V2";
 // OS-Specific Wrappers
-import OS_Wrapper, { PageWrapper, IOSWrapper, AndroidWrapper } from "./_ShareComponent/OS_Wrapper";
+import OS_Wrapper, { IOSWrapper, AndroidWrapper } from "./_ShareComponent/OS_Wrapper";
 
 // Progress
 import ProgressCustom from "./Progress/ProgressCustom";
@@ -136,7 +136,6 @@ export {
   NewWrapper_V2,
   // OS-Specific Wrappers
   OS_Wrapper,
-  PageWrapper,
   IOSWrapper,
   AndroidWrapper,
   // Stack

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

docs/OS-Wrapper-Quick-Reference.md

@@ -2,7 +2,7 @@
 
 ## 📦 Import
 ```tsx
-import { OS_Wrapper, PageWrapper, IOSWrapper, AndroidWrapper } from "@/components";
+import { OS_Wrapper, IOSWrapper, AndroidWrapper } from "@/components";
 ```
 
 ## 🎯 Usage Examples
@@ -35,9 +35,9 @@ import { OS_Wrapper, PageWrapper, IOSWrapper, AndroidWrapper } from "@/component
 </OS_Wrapper>
 ```
 
-### 3. PageWrapper - Form dengan Keyboard Handling
+### 3. OS_Wrapper - Form dengan Keyboard Handling
 ```tsx
-<PageWrapper
+<OS_Wrapper
   enableKeyboardHandling
   keyboardScrollOffset={150}
   contentPaddingBottom={100}
@@ -53,7 +53,7 @@ import { OS_Wrapper, PageWrapper, IOSWrapper, AndroidWrapper } from "@/component
     <TextInputCustom />
     <TextInputCustom />
   </ScrollView>
-</PageWrapper>
+</OS_Wrapper>
 ```
 
 ### 4. Platform-Specific (Rare Cases)
@@ -107,21 +107,21 @@ import { OS_Wrapper, PageWrapper, IOSWrapper, AndroidWrapper } from "@/component
 
 ```diff
 - import { NewWrapper_V2 } from "@/components/_ShareComponent/NewWrapper_V2";
-+ import { PageWrapper } from "@/components";
++ import { OS_Wrapper } from "@/components";
 
 - <NewWrapper_V2 enableKeyboardHandling>
-+ <PageWrapper enableKeyboardHandling>
++ <OS_Wrapper enableKeyboardHandling>
     <FormContent />
   </NewWrapper_V2>
 ```
 
 ## 💡 Tips
 
-1. **Pakai OS_Wrapper** untuk screen biasa (list, detail, dll)
+1. **Pakai OS_Wrapper** untuk semua screen (list, detail, form)
-2. **Pakai PageWrapper** untuk screen dengan form input (create, edit)
+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 dengan PageWrapper
+5. **Keyboard handling** hanya bekerja di Android (iOS mengabaikan props ini)
 
 ## ⚠️ Common Mistakes
 
@@ -134,6 +134,9 @@ import OS_Wrapper from "@/components/_ShareComponent/OS_Wrapper";
 <OS_Wrapper>
   <NewWrapper>{content}</NewWrapper>
 </OS_Wrapper>
+
+// Jangan pakai PageWrapper (sudah tidak ada)
+import { PageWrapper } from "@/components";
 ```
 
 ### ✅ Correct
@@ -141,8 +144,13 @@ import OS_Wrapper from "@/components/_ShareComponent/OS_Wrapper";
 // Import dari @/components
 import { OS_Wrapper } from "@/components";
 
-// Pakai salah satu saja
+// Simple content
 <OS_Wrapper>{content}</OS_Wrapper>
+
+// Form with keyboard handling
+<OS_Wrapper enableKeyboardHandling keyboardScrollOffset={150}>
+  <FormContent />
+</OS_Wrapper>
 ```
 
 ---

hooks/useKeyboardForm.ts

@@ -1,25 +1,62 @@
 // useKeyboardForm.ts - Hook untuk keyboard handling pada form
-import { Keyboard, ScrollView } from "react-native";
+import { Keyboard, ScrollView, Dimensions, findNodeHandle, UIManager } from "react-native";
-import { useState, useEffect, useRef } from "react";
+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
+  // Track scroll position
-  useEffect(() => {
+  const handleScroll = (event: any) => {
-    if (focusedInputY !== null && keyboardHeight > 0 && scrollViewRef.current) {
+    currentScrollY.current = event.nativeEvent.contentOffset.y;
-      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);
-        }
-      });
-    };
   };
 
   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;
+  });
+}

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

screens/Admin/User-Access/ScreenUserAccess.tsx

@@ -3,13 +3,13 @@ import {
   BadgeCustom,
   CenterCustom,
   Grid,
+  OS_Wrapper,
   SearchInput,
   StackCustom,
   TextCustom,
 } from "@/components";
 import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
@@ -101,7 +101,7 @@ export function Admin_ScreenUserAccess() {
   );
 
   return (
-    <NewWrapper
+    <OS_Wrapper
       headerComponent={
         <AdminComp_BoxTitle
           title="User Access"

screens/Event/ScreenBeranda.tsx

@@ -1,8 +1,7 @@
-import { TextCustom } from "@/components";
+import { TextCustom, OS_Wrapper } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import FloatingButton from "@/components/Button/FloatingButton";
 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 { usePagination } from "@/hooks/use-pagination";
 import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
@@ -52,7 +51,8 @@ export default function Event_ScreenBeranda() {
 
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={renderEventItem}
       refreshControl={

screens/Event/ScreenContribution.tsx

@@ -4,11 +4,11 @@ import {
     BoxWithHeaderSection,
     Spacing,
     StackCustom,
-    TextCustom
+    TextCustom,
+    OS_Wrapper,
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 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";
@@ -82,7 +82,8 @@ export default function Event_ScreenContribution() {
   //   }, []);
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={renderEventItem}
       refreshControl={

screens/Event/ScreenHistory.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { ButtonCustom, Spacing, TextCustom } from "@/components";
+import { ButtonCustom, Spacing, TextCustom, OS_Wrapper } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { AccentColor, 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";
@@ -100,8 +99,9 @@ export default function Event_ScreenHistory() {
   );
 
   return (
-    <NewWrapper
+    <OS_Wrapper
       headerComponent={headerComponent}
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={renderEventItem}
       refreshControl={

screens/Event/ScreenListOfParticipants.tsx

@@ -2,11 +2,11 @@
 import {
     AvatarUsernameAndOtherComponent,
     BadgeCustom,
-    BaseBox
+    BaseBox,
+    OS_Wrapper,
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
-import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { PADDING_INLINE, PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
 import {
@@ -102,7 +102,8 @@ export default function Event_ScreenListOfParticipants() {
   );
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={renderParticipantItem}
       refreshControl={

screens/Event/ScreenStatus.tsx

@@ -5,9 +5,9 @@ import {
   ScrollableCustom,
   StackCustom,
   TextCustom,
+  OS_Wrapper,
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+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";
@@ -103,8 +103,9 @@ export default function Event_ScreenStatus() {
   );
 
   return (
-    <NewWrapper
+    <OS_Wrapper
       hideFooter
+      contentPadding={PADDING_INLINE}
       headerComponent={<View style={{ paddingTop: 8 }}>{tabsComponent}</View>}
       listData={pagination.listData}
       renderItem={renderEventItem}

screens/Forum/DetailForum.tsx

@@ -3,12 +3,11 @@ import {
   ButtonCustom,
   DrawerCustom,
   LoaderCustom,
-  NewWrapper,
+  OS_Wrapper,
   Spacing,
   TextAreaCustom,
   TextCustom,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import AlertWarning from "@/components/Alert/AlertWarning";
@@ -193,7 +192,7 @@ export default function DetailForum() {
 
   return (
     <>
-      <NewWrapper
+      <OS_Wrapper
       // headerComponent={headerComponent()}
       >
         {!data && !listComment ? (
@@ -225,7 +224,7 @@ export default function DetailForum() {
             ))}
           </>
         )}
-      </NewWrapper>
+      </OS_Wrapper>
 
       {/* Posting Drawer */}
       <DrawerCustom

screens/Forum/DetailForum2.tsx

@@ -3,13 +3,12 @@ import {
   ButtonCustom,
   DrawerCustom,
   LoaderCustom,
-  NewWrapper,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextCustom,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import AlertWarning from "@/components/Alert/AlertWarning";
@@ -34,6 +33,7 @@ import _ from "lodash";
 import { useCallback, useEffect, useState } from "react";
 import { RefreshControl } from "react-native";
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
+import { PADDING_INLINE } from "@/constants/constans-value";
 
 export default function DetailForum2() {
   const { id } = useLocalSearchParams();
@@ -213,20 +213,6 @@ export default function DetailForum2() {
         }}
       />
   )
-    // !data || !commentPagination.listData ? (
-    //   // <ListSkeletonComponent height={120} />
-    //   <LoaderCustom />
-    // ) : (
-    //   <Forum_CommentarBoxSection
-    //     key={item.id}
-    //     data={item}
-    //     onSetData={(value) => {
-    //       setCommentId(value.setCommentId);
-    //       setOpenDrawerCommentar(value.setOpenDrawer);
-    //       setCommentAuthorId(value.setCommentAuthorId);
-    //     }}
-    //   />
-    // );
 
   // Generate pagination components using helper
   const { ListEmptyComponent, ListFooterComponent } =
@@ -242,8 +228,9 @@ export default function DetailForum2() {
 
   return (
     <>
-      <NewWrapper
+      <OS_Wrapper
-        // headerComponent={}
+        contentPadding={PADDING_INLINE}
+        disableFlexGrow
         listData={commentPagination.listData}
         renderItem={renderCommentItem}
         refreshControl={

screens/Forum/ViewBeranda.tsx

@@ -1,7 +1,7 @@
 import {
   BackButton,
   AvatarComp,
-  ViewWrapper,
+  OS_Wrapper,
   SearchInput,
   FloatingButton,
   LoaderCustom,
@@ -71,7 +71,7 @@ export default function Forum_ViewBeranda() {
         }}
       />
 
-      <ViewWrapper
+      <OS_Wrapper
         headerComponent={
           <SearchInput
             placeholder="Cari topik diskusi"
@@ -107,7 +107,7 @@ export default function Forum_ViewBeranda() {
             />
           ))
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

screens/Forum/ViewBeranda2.tsx

@@ -6,11 +6,11 @@ import {
   LoaderCustom,
   SearchInput,
   StackCustom,
-  TextCustom, // ← gunakan NewWrapper yang sudah diperbaiki
+  TextCustom,
+  OS_Wrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import SkeletonCustom from "@/components/_ShareComponent/SkeletonCustom";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { useAuth } from "@/hooks/use-auth";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
 import { apiForumGetAll } from "@/service/api-client/api-forum";
@@ -172,8 +172,8 @@ export default function Forum_ViewBeranda2() {
         }}
       />
 
-      {/* 🔹 NewWrapper dalam mode list */}
+      {/* 🔹 OS_Wrapper dalam mode list */}
-      <NewWrapper
+      <OS_Wrapper
         // Header global (di atas FlatList, sticky)
         headerComponent={
           <View style={{ paddingHorizontal: 16, paddingTop: 8 }}>

screens/Forum/ViewBeranda3.tsx

@@ -2,11 +2,12 @@ import {
   AvatarComp,
   BackButton,
   FloatingButton,
+  OS_Wrapper,
   SearchInput,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { useAuth } from "@/hooks/use-auth";
 import { usePagination } from "@/hooks/use-pagination";
@@ -75,12 +76,6 @@ export default function Forum_ViewBeranda3() {
     />
   );
 
-  //   const ListHeaderComponent = (
-  //     <View style={{ paddingVertical: 8, alignItems: "center" }}>
-  //       <TextCustom>Diskusi Terbaru</TextCustom>
-  //     </View>
-  //   );
-
   return (
     <>
       <Stack.Screen
@@ -105,8 +100,9 @@ export default function Forum_ViewBeranda3() {
         }}
       />
 
-      <NewWrapper
+      <OS_Wrapper
         hideFooter
+        contentPadding={PADDING_INLINE}
         headerComponent={
           <View style={{ paddingTop: 8 }}>
             <SearchInput

screens/Forum/ViewForumku.tsx

@@ -7,9 +7,9 @@ import {
   FloatingButton,
   Grid,
   LoaderCustom,
+  OS_Wrapper,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { useAuth } from "@/hooks/use-auth";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
@@ -66,7 +66,7 @@ export default function View_Forumku() {
 
   return (
     <>
-      <ViewWrapper
+      <OS_Wrapper
         floatingButton={
           user?.id === id && (
             <FloatingButton
@@ -121,7 +121,7 @@ export default function View_Forumku() {
             </>
           )}
         </StackCustom>
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom

screens/Forum/ViewForumku2.tsx

@@ -6,11 +6,11 @@ import {
   FloatingButton,
   Grid,
   LoaderCustom,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import NoDataText from "@/components/_ShareComponent/NoDataText";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MainColor } from "@/constants/color-palet";
@@ -24,6 +24,7 @@ import { router, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { useEffect, useState } from "react";
 import { RefreshControl, View } from "react-native";
+import { PADDING_INLINE } from "@/constants/constans-value";
 
 export default function View_Forumku2() {
   const { id } = useLocalSearchParams();
@@ -120,7 +121,8 @@ export default function View_Forumku2() {
 
   return (
     <>
-      <NewWrapper
+      <OS_Wrapper
+      contentPadding={PADDING_INLINE}
         floatingButton={
           user?.id === id && (
             <FloatingButton

screens/Job/MainViewStatus.tsx

@@ -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 (
     <>
-      <OS_Wrapper headerComponent={scrollComponent} hideFooter>
+      <OS_Wrapper headerComponent={scrollComponent} hideFooter contentPadding={PADDING_INLINE}>
         {isLoadList ? (
           <LoaderCustom />
         ) : _.isEmpty(listData) ? (

screens/Job/MainViewStatus2.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 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";
@@ -102,6 +102,7 @@ export default function Job_MainViewStatus2() {
       ListEmptyComponent={ListEmptyComponent}
       ListFooterComponent={ListFooterComponent}
       hideFooter
+      contentPadding={PADDING_INLINE}
     />
   );
 }

screens/Job/ScreenArchive.tsx

@@ -5,6 +5,7 @@ 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 (
-    <OS_Wrapper hideFooter>
+    <OS_Wrapper hideFooter contentPadding={PADDING_INLINE}>
       {isLoadData ? (
         <LoaderCustom />
       ) : _.isEmpty(listData) ? (

screens/Job/ScreenArchive2.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { BaseBox, OS_Wrapper, TextCustom, ViewWrapper } 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();
@@ -70,6 +70,7 @@ export default function Job_ScreenArchive2() {
       ListEmptyComponent={ListEmptyComponent}
       ListFooterComponent={ListFooterComponent}
       hideFooter
+      contentPadding={PADDING_INLINE}
     />
   );
 }

screens/Job/ScreenBeranda.tsx

@@ -13,6 +13,7 @@ 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[]>([]);
@@ -45,6 +46,7 @@ export default function Job_ScreenBeranda() {
   return (
     <OS_Wrapper
       hideFooter
+      contentPadding={PADDING_INLINE}
       floatingButton={
         <FloatingButton onPress={() => router.push("/job/create")} />
       }

screens/Job/ScreenBeranda2.tsx

@@ -7,7 +7,6 @@ import {
   Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
@@ -17,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;
 
@@ -76,6 +75,7 @@ export default function Job_ScreenBeranda2() {
   return (
     <OS_Wrapper
       hideFooter
+      contentPadding={PADDING_INLINE}
       headerComponent={
         <View style={{ paddingTop: 8 }}>
           <SearchInput

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,9 +119,11 @@ export function Job_ScreenCreate() {
   };
 
   return (
-    <PageWrapper
+    <OS_Wrapper
       enableKeyboardHandling
-      keyboardScrollOffset={100}
+      keyboardScrollOffset={10}
+      // contentPadding={PADDING_INLINE}
+      contentPaddingBottom={250}
       footerComponent={buttonSubmit()}
     >
       <StackCustom gap={"xs"}>
@@ -173,7 +176,9 @@ export function Job_ScreenCreate() {
             onChangeText={(value) => setData({ ...data, deskripsi: value })}
           />
         </View>
+
+        
       </StackCustom>
-    </PageWrapper>
+    </OS_Wrapper>
   );
 }

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,9 +135,10 @@ export function Job_ScreenEdit() {
   };
 
   return (
-    <PageWrapper
+    <OS_Wrapper
       enableKeyboardHandling
       keyboardScrollOffset={100}
+      contentPaddingBottom={250}
       footerComponent={buttonSubmit()}
     >
       {isLoadData ? (
@@ -203,6 +205,6 @@ export function Job_ScreenEdit() {
           {buttonSubmit()}
         </StackCustom>
       )}
-    </PageWrapper>
+    </OS_Wrapper>
   );
 }

screens/Maps/ScreenMapsCreate.tsx

@@ -1,4 +1,3 @@
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import {
   BoxButtonOnFooter,
   ButtonCustom,
@@ -8,6 +7,7 @@ import {
   TextInputCustom,
   LandscapeFrameUploaded,
   ButtonCenteredOnly,
+  OS_Wrapper,
 } from "@/components";
 import { MapSelectedPlatform } from "@/components/Map/MapSelectedPlatform";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -142,10 +142,14 @@ export function Maps_ScreenMapsCreate() {
   );
 
   /**
-   * Render screen dengan NewWrapper
+   * Render screen dengan OS_Wrapper
    */
   return (
-    <NewWrapper footerComponent={buttonFooter}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={buttonFooter}
+    >
       <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
 
       <BaseBox>
@@ -179,7 +183,7 @@ export function Maps_ScreenMapsCreate() {
       </ButtonCenteredOnly>
 
       <Spacing height={50} />
-    </NewWrapper>
+    </OS_Wrapper>
   );
 }
 

screens/Maps/ScreenMapsEdit.tsx

@@ -7,7 +7,7 @@ import {
   LandscapeFrameUploaded,
   Spacing,
   TextInputCustom,
-  ViewWrapper,
+  OS_Wrapper,
 } from "@/components";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MapSelectedPlatform } from "@/components/Map/MapSelectedPlatform";
@@ -166,7 +166,11 @@ export function Maps_ScreenMapsEdit() {
       : defaultRegion;
 
   return (
-    <ViewWrapper footerComponent={buttonFooter}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={buttonFooter}
+    >
       <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
 
       {/* <MapSelectedPlatform
@@ -223,6 +227,6 @@ export function Maps_ScreenMapsEdit() {
         Upload
       </ButtonCenteredOnly>
       <Spacing height={50} />
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

screens/Portofolio/ScreenPortofolioCreate.tsx

@@ -4,7 +4,7 @@ import {
   ButtonCenteredOnly,
   CenterCustom,
   InformationBox,
-  NewWrapper,
+  OS_Wrapper,
   PhoneInputCustom,
   SelectCustom,
   Spacing,
@@ -142,7 +142,9 @@ export function ScreenPortofolioCreate() {
   };
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
       footerComponent={
         <Portofolio_ButtonCreate
           id={id as string}
@@ -362,6 +364,6 @@ export function ScreenPortofolioCreate() {
           }
         />
       </StackCustom>
-    </NewWrapper>
+    </OS_Wrapper>
   );
 }

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";
@@ -9,7 +9,7 @@ import { useCallback } from "react";
 import { RefreshControl } from "react-native";
 import Portofolio_BoxView from "./BoxPortofolioView";
 import NoDataText from "@/components/_ShareComponent/NoDataText";
-import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { PADDING_INLINE, PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 
 export default function ViewListPortofolio() {
   const { id } = useLocalSearchParams();
@@ -19,9 +19,9 @@ export default function ViewListPortofolio() {
     fetchFunction: async (page) => {
       return await apiGetPortofolio({
         id: id as string,
-        page: String(page) // API expects string
+        page: String(page), // API expects string
       });
-    //   return response.data;
+      //   return response.data;
     },
     pageSize: PAGINATION_DEFAULT_TAKE,
     dependencies: [id],
@@ -41,18 +41,20 @@ export default function ViewListPortofolio() {
   );
 
   // Generate pagination components using helper
-  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
+  const { ListEmptyComponent, ListFooterComponent } =
-    loading: pagination.loading,
+    createPaginationComponents({
-    refreshing: pagination.refreshing,
+      loading: pagination.loading,
-    listData: pagination.listData,
+      refreshing: pagination.refreshing,
-    isInitialLoad: pagination.isInitialLoad,
+      listData: pagination.listData,
-    emptyMessage: "Tidak ada portofolio",
+      isInitialLoad: pagination.isInitialLoad,
-    skeletonCount: 3,
+      emptyMessage: "Tidak ada portofolio",
-    skeletonHeight: 100,
+      skeletonCount: 3,
-  });
+      skeletonHeight: 100,
+    });
 
   return (
-    <NewWrapper
+    <OS_Wrapper
+      contentPadding={PADDING_INLINE}
       listData={pagination.listData}
       renderItem={renderItem}
       refreshControl={

tasks/TASK-005-OS-Wrapper-Implementation.md

@@ -5,25 +5,38 @@ Migrasi dari `NewWrapper` dan `NewWrapper_V2` ke `OS_Wrapper` yang otomatis meny
 
 ## 🎯 Goals
 - ✅ Mengganti penggunaan `NewWrapper` → `OS_Wrapper` di user screens
-- ✅ Mengganti penggunaan `NewWrapper_V2` → `OS_Wrapper` atau `PageWrapper` di form 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)
+### 1. **OS_Wrapper** (Recommended - Unified API)
 Auto-detect platform dan routing ke wrapper yang sesuai:
 - iOS → `IOSWrapper` (berbasis NewWrapper)
-- Android → `AndroidWrapper` (berbasis NewWrapper_V2)
+- Android → `AndroidWrapper` (berbasis NewWrapper_V2 dengan keyboard handling)
 
-### 2. **PageWrapper** (For Forms)
+**Props:**
-Sama seperti OS_Wrapper tapi dengan keyboard handling (Android only):
+```tsx
-- `enableKeyboardHandling` - Auto scroll saat input focus
+// Base props (kedua platform)
-- `keyboardScrollOffset` - Offset scroll (default: 100)
+withBackground?: boolean;
-- `contentPaddingBottom` - Extra padding bottom (default: 80)
+headerComponent?: React.ReactNode;
-- `contentPadding` - Content padding (default: 16)
+footerComponent?: React.ReactNode;
+floatingButton?: React.ReactNode;
+hideFooter?: boolean;
+edgesFooter?: Edge[];
+style?: ViewStyle;
+refreshControl?: RefreshControl;
 
-### 3. **IOSWrapper** / **AndroidWrapper** (Direct Usage)
+// 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
@@ -31,124 +44,239 @@ Untuk kasus khusus yang butuh platform-specific behavior.
 ### Before (Old Way)
 ```tsx
 import NewWrapper from "@/components/_ShareComponent/NewWrapper";
-
 // atau
 import { NewWrapper_V2 } from "@/components/_ShareComponent/NewWrapper_V2";
 ```
 
-### After (New Way)
+### After (New Way - Unified API)
 ```tsx
-import { OS_Wrapper, PageWrapper } from "@/components";
+import { OS_Wrapper } from "@/components";
 
-// Static mode
+// Static mode (simple content)
 <OS_Wrapper>
   <YourContent />
 </OS_Wrapper>
 
-// List mode
+// List mode (with pagination)
 <OS_Wrapper
   listData={data}
   renderItem={({ item }) => <ItemCard item={item} />}
   ListEmptyComponent={<EmptyState />}
+  onEndReached={loadMore}
 />
 
-// Form dengan keyboard handling
+// Form mode (with keyboard handling - Android only)
-<PageWrapper
+<OS_Wrapper
   enableKeyboardHandling
-  keyboardScrollOffset={150}
+  contentPaddingBottom={250}  // ← HANYA untuk screens dengan TextInput
 >
   <FormContent />
-</PageWrapper>
+</OS_Wrapper>
 ```
 
-## 🚀 Implementation Phases
+---
 
-### Phase 1: User Screens (Priority: HIGH)
+# 🔵 USER PHASES (User-Facing Screens)
-Files yang perlu di-migrate:
 
-#### 1.1 Home/Beranda
+## ✅ User Phase 1: Job Screens - COMPLETED (2026-04-06 to 2026-04-07)
-- [ ] `screens/Beranda/ScreenBeranda.tsx` atau `ScreenBeranda2.tsx`
-  - Ganti `NewWrapper` → `OS_Wrapper`
-  - Test tabs behavior di iOS dan Android
 
-#### 1.2 Profile Screens
+**Files migrated: 9**
-- [ ] `screens/Profile/ScreenProfile.tsx`
-- [ ] `screens/Profile/ScreenProfileEdit.tsx`
-- [ ] `screens/Profile/ScreenProfileCreate.tsx`
 
-#### 1.3 Forum/Discussion
+#### Job List Screens (OS_Wrapper):
-- [ ] `screens/Forum/ScreenForum.tsx`
+- ✅ `screens/Job/ScreenBeranda.tsx` - ViewWrapper → OS_Wrapper
-- [ ] `screens/Forum/ScreenForumDetail.tsx`
+- ✅ `screens/Job/ScreenBeranda2.tsx` - NewWrapper_V2 → OS_Wrapper
-- [ ] `screens/Forum/ScreenForumCreate.tsx` → pakai `PageWrapper` (ada form)
+- ✅ `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
 
-#### 1.4 Portfolio
+#### Job Form Screens (OS_Wrapper with keyboard handling):
-- [ ] `screens/Portfolio/ScreenPortfolio.tsx`
+- ✅ `screens/Job/ScreenJobCreate.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling + contentPaddingBottom={250}
-- [ ] `screens/Portfolio/ScreenPortfolioCreate.tsx` → pakai `PageWrapper`
+- ✅ `screens/Job/ScreenJobEdit.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling + contentPaddingBottom={250}
-- [ ] `screens/Portfolio/ScreenPortfolioEdit.tsx` → pakai `PageWrapper`
 
-### Phase 2: Admin Screens (Priority: MEDIUM)
+#### Job Detail Screen:
-Files yang perlu di-migrate:
+- ✅ `app/(application)/(user)/job/[id]/[status]/detail.tsx` - NewWrapper_V2 → OS_Wrapper
 
-#### 2.1 Event Management
+**Testing Status:**
+- ✅ TypeScript: No errors
+- ✅ Build: Success
+- ✅ iOS Testing: Complete ✅
+- ✅ Android Testing: Complete ✅
+
+## ✅ User 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})
+
+## ✅ User 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})
+
+## ✅ User 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})
+
+## ✅ User Phase 5: Forum Screens - COMPLETED (2026-04-09)
+
+**Files migrated: 17**
+
+#### Forum List & Create Screens:
+- ✅ `screens/Forum/ViewBeranda.tsx` - ViewWrapper → OS_Wrapper
+- ✅ `screens/Forum/ViewBeranda2.tsx` - NewWrapper → OS_Wrapper
+- ✅ `screens/Forum/ViewBeranda3.tsx` - NewWrapper → OS_Wrapper (Active)
+- ✅ `screens/Forum/create.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `screens/Forum/terms.tsx` - NewWrapper → OS_Wrapper (Terms page)
+
+#### Forum Detail & Comments Screens:
+- ✅ `screens/Forum/DetailForum.tsx` - NewWrapper → OS_Wrapper
+- ✅ `screens/Forum/DetailForum2.tsx` - NewWrapper → OS_Wrapper (Active + disableFlexGrow fix)
+
+#### User's Forum ("Forumku") Screens:
+- ✅ `screens/Forum/ViewForumku.tsx` - ViewWrapper → OS_Wrapper
+- ✅ `screens/Forum/ViewForumku2.tsx` - NewWrapper → OS_Wrapper
+
+#### Report & Edit Screens:
+- ✅ `app/(application)/(user)/forum/[id]/edit.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `app/(application)/(user)/forum/[id]/report-commentar.tsx` - ViewWrapper → OS_Wrapper (Static report form)
+- ✅ `app/(application)/(user)/forum/[id]/report-posting.tsx` - ViewWrapper → OS_Wrapper (Static report form)
+- ✅ `app/(application)/(user)/forum/[id]/other-report-commentar.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `app/(application)/(user)/forum/[id]/other-report-posting.tsx` - ViewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `app/(application)/(user)/forum/[id]/preview-report-comment.tsx` - NewWrapper → OS_Wrapper
+- ✅ `app/(application)/(user)/forum/[id]/preview-report-posting.tsx` - NewWrapper → OS_Wrapper
+- ✅ `app/(application)/(user)/forum/[id]/index.tsx` - Checked (No wrapper to migrate, just imports)
+
+**Bug Fixes Implemented:**
+- ✅ **Scroll Macet (Ghost Scroll):** Fixed dengan menghapus `KeyboardAvoidingView` & `TouchableWithoutFeedback` di List Mode `AndroidWrapper`.
+- ✅ **Header Besar Terpotong:** Menambahkan props `disableFlexGrow={true}` untuk layar dengan header besar (DetailForum2).
+- ✅ **Keyboard Dismiss:** Menggunakan `keyboardShouldPersistTaps="handled"` agar tap di area kosong menutup keyboard.
+
+## ✅ User Phase 6: Event Screens - COMPLETED (2026-04-10)
+
+**Files migrated: 16**
+
+#### Event List & Create Screens:
+- ✅ `screens/Event/ScreenBeranda.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list)
+- ✅ `screens/Event/ScreenStatus.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list)
+- ✅ `screens/Event/ScreenHistory.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list)
+- ✅ `screens/Event/ScreenContribution.tsx` - NewWrapper → OS_Wrapper + `contentPadding={PADDING_INLINE}` (tabs list)
+- ✅ `app/(application)/(user)/event/create.tsx` - NewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+
+#### Event Detail & Sub-Screens (`[id]/`):
+- ✅ `app/(application)/(user)/event/[id]/edit.tsx` - NewWrapper → OS_Wrapper (form + enableKeyboardHandling + contentPaddingBottom={250})
+- ✅ `app/(application)/(user)/event/[id]/publish.tsx` - ViewWrapper → OS_Wrapper (detail with join button)
+- ✅ `app/(application)/(user)/event/[id]/history.tsx` - ViewWrapper → OS_Wrapper (history detail)
+- ✅ `app/(application)/(user)/event/[id]/contribution.tsx` - ViewWrapper → OS_Wrapper (contribution detail)
+- ✅ `app/(application)/(user)/event/[id]/confirmation.tsx` - ViewWrapper → OS_Wrapper (confirmation flow)
+- ✅ `app/(application)/(user)/event/[id]/[status]/detail-event.tsx` - ViewWrapper → OS_Wrapper (status detail)
+
+#### Event `detail/` Sub-Routes:
+- ✅ `app/(application)/(user)/event/detail/[id].tsx` - ViewWrapper → OS_Wrapper
+
+---
+
+# 🔴 ADMIN PHASES (Admin-Facing Screens)
+
+## ✅ Admin Phase 9: User Access - COMPLETED (2026-04-09)
+
+**Files migrated: 2**
+
+#### User Access:
+- ✅ `screens/Admin/User-Access/ScreenUserAccess.tsx` - NewWrapper → OS_Wrapper (list with pagination + search)
+- ✅ `app/(application)/admin/user-access/[id]/index.tsx` - ViewWrapper → OS_Wrapper (detail with footer button)
+
+## ⏳ Admin Phase 1: Event Management (Priority: HIGH)
 - [ ] `screens/Admin/Event/ScreenEventList.tsx`
-- [ ] `screens/Admin/Event/ScreenEventCreate.tsx` → pakai `PageWrapper`
+- [ ] `screens/Admin/Event/ScreenEventCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
-- [ ] `screens/Admin/Event/ScreenEventEdit.tsx` → pakai `PageWrapper`
+- [ ] `screens/Admin/Event/ScreenEventEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
 
-#### 2.2 Voting Management
+## ⏳ Admin Phase 2: Voting Management (Priority: HIGH)
 - [ ] `screens/Admin/Voting/ScreenVotingList.tsx`
-- [ ] `screens/Admin/Voting/ScreenVotingCreate.tsx` → pakai `PageWrapper`
+- [ ] `screens/Admin/Voting/ScreenVotingCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
-- [ ] `screens/Admin/Voting/ScreenVotingEdit.tsx` → pakai `PageWrapper`
+- [ ] `screens/Admin/Voting/ScreenVotingEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
 
-#### 2.3 Donation Management
+## ⏳ Admin Phase 3: Donation Management (Priority: HIGH)
 - [ ] `screens/Admin/Donation/ScreenDonationList.tsx`
-- [ ] `screens/Admin/Donation/ScreenDonationCreate.tsx` → pakai `PageWrapper`
+- [ ] `screens/Admin/Donation/ScreenDonationCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
-- [ ] `screens/Admin/Donation/ScreenDonationEdit.tsx` → pakai `PageWrapper`
+- [ ] `screens/Admin/Donation/ScreenDonationEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
 
-#### 2.4 Job Management
+## ⏳ Admin Phase 4: Forum Admin (Priority: MEDIUM)
-- [ ] `screens/Job/ScreenJobList.tsx` (jika ada)
+- [ ] `screens/Admin/Forum/ScreenForumList.tsx`
-- [ ] `screens/Job/ScreenJobCreate.tsx` → sudah pakai `BoxButtonOnFooter`?
+- [ ] `screens/Admin/Forum/ScreenForumPosting.tsx`
-- [ ] `screens/Job/ScreenJobEdit.tsx` → sudah pakai `BoxButtonOnFooter`?
+- [ ] `screens/Admin/Forum/ScreenForumReportPosting.tsx`
+- [ ] `screens/Admin/Forum/ScreenForumReportComment.tsx`
+- [ ] `screens/Admin/Forum/ScreenForumDetail.tsx`
 
-### Phase 3: Other Screens (Priority: LOW)
+## ⏳ Admin Phase 5: Collaboration Admin (Priority: MEDIUM)
-- [ ] `screens/Investasi/` - Investment screens
+- [ ] `screens/Admin/Collaboration/ScreenCollaborationList.tsx`
-- [ ] `screens/Kolaborasi/` - Collaboration screens
+- [ ] `screens/Admin/Collaboration/ScreenCollaborationGroup.tsx`
-- [ ] Other user-facing screens
+- [ ] `screens/Admin/Collaboration/ScreenCollaborationPublish.tsx`
+- [ ] `screens/Admin/Collaboration/ScreenCollaborationReject.tsx`
+- [ ] `screens/Admin/Collaboration/ScreenCollaborationDetail.tsx`
 
-## ✅ Testing Checklist
+## ⏳ Admin Phase 6: Job Admin (Priority: MEDIUM)
+- [ ] `screens/Admin/Job/ScreenJobAdminList.tsx`
+- [ ] `screens/Admin/Job/ScreenJobAdminDetail.tsx`
+- [ ] `screens/Admin/Job/ScreenJobAdminStatus.tsx`
 
-Setiap screen yang sudah di-migrate, test:
+## ⏳ Admin Phase 7: Investment Admin (Priority: LOW)
+- [ ] `screens/Admin/Investment/ScreenInvestmentList.tsx`
+- [ ] `screens/Admin/Investment/ScreenInvestmentDetail.tsx`
+- [ ] `screens/Admin/Investment/ScreenInvestmentStatus.tsx`
 
-### iOS Testing
+## ⏳ Admin Phase 8: App Information (Priority: LOW)
-- [ ] UI tampil sesuai design
+- [ ] `screens/Admin/App-Information/ScreenAppInfoList.tsx`
-- [ ] Tabs berfungsi dengan baik
+- [ ] `screens/Admin/App-Information/ScreenBusinessField.tsx`
-- [ ] ScrollView/FlatList scroll dengan smooth
+- [ ] `screens/Admin/App-Information/ScreenInformationBank.tsx`
-- [ ] Keyboard tidak menutupi input (jika pakai PageWrapper)
+- [ ] `screens/Admin/App-Information/ScreenSticker.tsx`
-- [ ] 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 PageWrapper)
-- [ ] Footer muncul di posisi yang benar (tidak tertutup navigation bar)
-- [ ] Pull to refresh berfungsi (jika ada)
 
-### Common Testing
+# 📌 Notes & Patterns
-- [ ] 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
+### 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)
+- **contentPadding={PADDING_INLINE}** (16px, ditambahkan khusus ke screen dalam `(tabs)` agar tidak terlalu mepet ke pinggir).
 
-### Kapan pakai OS_Wrapper vs PageWrapper?
+### User Preference:
-- **OS_Wrapper**: Untuk screen yang hanya menampilkan data (list, detail, dll)
+- **NO PADDING_INLINE by default** - Bisa mempersempit box tampilan
-- **PageWrapper**: Untuk screen yang ada form input (create, edit, login, dll)
+- User akan review dan tambahkan sendiri jika diperlukan per-screen
+- Khusus untuk tab screen (`(tabs)/`), ditambahkan `contentPadding={PADDING_INLINE}` agar tampilan lebih rapi.
 
-### Props yang sering digunakan:
+### 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
@@ -158,12 +286,8 @@ Setiap screen yang sudah di-migrate, test:
   ListEmptyComponent={ListEmptyComponent}
   ListFooterComponent={ListFooterComponent}
   onEndReached={pagination.loadMore}
-  refreshControl={
+  refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
-    <RefreshControl
+  contentPadding={PADDING_INLINE} // Jika screen berada di dalam (tabs)
-      refreshing={pagination.refreshing}
-      onRefresh={pagination.onRefresh}
-    />
-  }
 />
 ```
 
@@ -172,49 +296,21 @@ Setiap screen yang sudah di-migrate, test:
 <OS_Wrapper
   headerComponent={<HeaderSection />}
   footerComponent={<FooterSection />}
+  refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
 >
   <YourContent />
 </OS_Wrapper>
 ```
 
-#### Untuk Form Screen:
+#### Untuk Form Screen (dengan keyboard handling):
 ```tsx
-<PageWrapper
+<OS_Wrapper
   enableKeyboardHandling
-  keyboardScrollOffset={150}
+  contentPaddingBottom={250}  // ← HANYA untuk screens dengan TextInput
-  contentPaddingBottom={100}
+  footerComponent={<SubmitButton />}
-  footerComponent={
-    <BoxButtonOnFooter>
-      <ButtonCustom onPress={handleSubmit}>Submit</ButtonCustom>
-    </BoxButtonOnFooter>
-  }
 >
   <FormContent />
-</PageWrapper>
+</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}
-/>
 ```
 
 ## 🐛 Troubleshooting
@@ -223,22 +319,55 @@ import { OS_Wrapper } from "@/components";
 **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 `PageWrapper` dengan `enableKeyboardHandling={true}`. Adjust `keyboardScrollOffset` jika perlu.
+**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: 80). Untuk list screen tanpa navigation bar overlay, bisa set ke 0.
+**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/PageWrapper, bukan NewWrapper langsung.
+**Solution**: Ini sudah di-fix di AndroidWrapper. Pastikan screen pakai OS_Wrapper, bukan NewWrapper langsung.
 
 ## 📊 Progress Tracking
 
+### User Phases:
 | Phase | Total Files | Migrated | Testing | Status |
 |-------|-------------|----------|---------|--------|
-| Phase 1 (User) | TBD | 0 | 0 | ⏳ Pending |
+| User Phase 1 (Job) | 9 | 9 | ✅ Complete | ✅ Complete |
-| Phase 2 (Admin) | TBD | 0 | 0 | ⏳ Pending |
+| User Phase 2 (Profile + Others) | 10 | 10 | ⏳ Pending | ✅ Complete |
-| Phase 3 (Other) | TBD | 0 | 0 | ⏳ Pending |
+| User Phase 3 (Portfolio) | 6 | 6 | ⏳ Pending | ✅ Complete |
-| **Total** | **TBD** | **0** | **0** | **0%** |
+| User Phase 4 (Maps) | 2 | 2 | ⏳ Pending | ✅ Complete |
+| User Phase 5 (Forum) | 17 | 17 | ⏳ Pending | ✅ Complete |
+| User Phase 6 (Event) | 16 | 16 | ⏳ Pending | ✅ Complete |
+| User Phase 7 (Voting) | ~10 | 0 | 0 | ⏳ Pending |
+| User Phase 8 (Donation) | ~4 | 0 | 0 | ⏳ Pending |
+| User Phase 9 (Investment) | ~3 | 0 | 0 | ⏳ Pending |
+| User Phase 10 (Collaboration) | ~3 | 0 | 0 | ⏳ Pending |
+| User Phase 11 (Others) | ~4 | 0 | 0 | ⏳ Pending |
+| **User Total** | **~84** | **60** | **9** | **~71% Complete** |
+
+### Admin Phases:
+| Phase | Total Files | Migrated | Testing | Status |
+|-------|-------------|----------|---------|--------|
+| Admin Phase 1 (Event) | ~3 | 0 | 0 | ⏳ Pending |
+| Admin Phase 2 (Voting) | ~3 | 0 | 0 | ⏳ Pending |
+| Admin Phase 3 (Donation) | ~3 | 0 | 0 | ⏳ Pending |
+| Admin Phase 4 (Forum) | ~5 | 0 | 0 | ⏳ Pending |
+| Admin Phase 5 (Collaboration) | ~5 | 0 | 0 | ⏳ Pending |
+| Admin Phase 6 (Job) | ~3 | 0 | 0 | ⏳ Pending |
+| Admin Phase 7 (Investment) | ~3 | 0 | 0 | ⏳ Pending |
+| Admin Phase 8 (App Info) | ~4 | 0 | 0 | ⏳ Pending |
+| Admin Phase 9 (User Access) | 2 | 2 | 0 | ✅ Complete |
+| **Admin Total** | **~31** | **2** | **0** | **~6% Complete** |
+
+### Grand Total:
+| Category | Total Files | Migrated | Status |
+|----------|-------------|----------|--------|
+| **User Screens** | ~84 | 60 | ~71% Complete |
+| **Admin Screens** | ~31 | 2 | ~6% Complete |
+| **GRAND TOTAL** | **~115** | **62** | **~54% Complete** |
 
 ## 🔄 Rollback Plan
 
@@ -252,4 +381,6 @@ Jika ada issue yang tidak bisa di-fix dalam 1 jam:
 
 **Co-authored-by**: Qwen-Coder <qwen-coder@alibabacloud.com>
 **Created**: 2026-04-06
-**Status**: Ready for Implementation
+**Last Updated**: 2026-04-10
+**Status**: User Phase 1-6 Complete ✅ (60 files migrated)
+**Next**: User Phase 7 - Voting Screens