feat: Implement PageWrapper and migrate all Job screens

Create PageWrapper component that routes to:
- iOS: NewWrapper (stable, tested)
- Android: NewWrapper_V2 (keyboard handling fix)

New Files:
- components/_ShareComponent/PageWrapper.tsx
- docs/PAGEWRAPPER-USAGE.md

Migrated Job Screens (10):
- screens/Job/ScreenJobCreate.tsx: NewWrapper_V2 → PageWrapper
- screens/Job/ScreenJobEdit.tsx: NewWrapper_V2 → PageWrapper
- screens/Job/ScreenArchive.tsx: ViewWrapper → PageWrapper
- screens/Job/ScreenArchive2.tsx: NewWrapper_V2 → PageWrapper
- screens/Job/ScreenBeranda2.tsx: NewWrapper_V2 → PageWrapper
- screens/Job/MainViewStatus2.tsx: NewWrapper_V2 → PageWrapper
- app/(application)/(user)/job/[id]/index.tsx: ViewWrapper → PageWrapper
- app/(application)/(user)/job/[id]/archive.tsx: ViewWrapper → PageWrapper
- app/(application)/(user)/job/[id]/[status]/detail.tsx: NewWrapper_V2 → PageWrapper

Benefits:
- iOS users (70%+) get stable NewWrapper
- Android users get keyboard handling fix
- Clean API - no Platform.OS checks in screens
- Easy future migration path

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

QWEN.md

@@ -513,31 +513,3 @@ 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
-- User ingin mengecek semua user layout tabs setelah perubahan height layout tabs donation di constants. Pattern yang perlu dicek: semua tabs screens harus pakai contentPadding={PADDING_INLINE} untuk konsistensi layout.

app/(application)/(user)/_layout.tsx

@@ -21,7 +21,9 @@ export default function UserLayout() {
         <Stack.Screen
           name="waiting-room"
           options={{
-            header: () => <AppHeader title="Waiting Room" />,
+            // title: "Waiting Room",
+            // headerBackVisible: false,
+            header: () => <AppHeader title="Waiting Room" showBack={false} />,
           }}
         />
 

app/(application)/(user)/crowdfunding/index.tsx

@@ -1,9 +1,9 @@
 import {
   BaseBox,
   Grid,
-  OS_Wrapper,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -25,7 +25,7 @@ export default function Crowdfunding() {
   ];
 
   return (
-    <OS_Wrapper>
+    <ViewWrapper>
       <StackCustom>
         <Image
           source={require("@/assets/images/constants/crowd-hipmi.png")}
@@ -63,6 +63,6 @@ export default function Crowdfunding() {
           </BaseBox>
         ))}
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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,10 +68,7 @@ export default function DeleteAccount() {
 
   return (
     <>
-      <OS_Wrapper
-        enableKeyboardHandling
-        contentPaddingBottom={250}
-      >
+      <ViewWrapper>
         <StackCustom>
           <BaseBox>
             <StackCustom>
@@ -108,7 +105,7 @@ export default function DeleteAccount() {
             </StackCustom>
           </BaseBox>
         </StackCustom>
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

app/(application)/(user)/donation/(tabs)/_layout.tsx

@@ -1,5 +1,5 @@
 import { IconHome, IconStatus } from "@/components/_Icon";
-import { ICON_SIZE_SMALL, OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { TabsStyles } from "@/styles/tabs-styles";
 import {
     FontAwesome5
@@ -23,12 +23,12 @@ function DonationTabsWrapper() {
             ios: {
               borderTopWidth: 0,
               paddingTop: 12,
-              height: OS_IOS_HEIGHT,
+              height: 80,
             },
             android: {
               borderTopWidth: 0,
               paddingTop: 5,
-              height: OS_ANDROID_HEIGHT + paddingBottom,
+              height: 70 + paddingBottom,
             },
           }),
         }}

app/(application)/(user)/donation/[id]/(news)/[news]/edit-news.tsx

@@ -5,11 +5,11 @@ import {
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -105,9 +105,7 @@ export default function DonationEditNews() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
+    <ViewWrapper
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom
@@ -167,6 +165,6 @@ export default function DonationEditNews() {
         <Spacing />
       </StackCustom>
       <Spacing />
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -7,9 +7,9 @@ import {
   DrawerCustom,
   DummyLandscapeImage,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconEdit } from "@/components/_Icon";
@@ -28,7 +28,6 @@ import {
 } from "expo-router";
 import { useCallback, useState } from "react";
 import Toast from "react-native-toast-message";
-import { dateTimeView } from "@/utils/dateTimeView";
 
 export default function DonationNews() {
   const { user } = useAuth();
@@ -72,11 +71,11 @@ export default function DonationNews() {
           ),
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         <BaseBox>
           <StackCustom>
-            <TextCustom color="gray" size={"small"} style={{ alignSelf: "flex-end" }}>
-              {dateTimeView({date: data?.createdAt})}
+            <TextCustom style={{ alignSelf: "flex-end" }}>
+              {formatChatTime(data?.createdAt)}
             </TextCustom>
 
             {data && data.imageId && (
@@ -90,7 +89,7 @@ export default function DonationNews() {
             <TextCustom>{data?.deskripsi || "-"}</TextCustom>
           </StackCustom>
         </BaseBox>
-      </OS_Wrapper>
+      </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

app/(application)/(user)/donation/[id]/(news)/add-news.tsx

@@ -4,11 +4,12 @@ import {
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  OS_Wrapper,
+  NewWrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { apiDonationCreateNews } from "@/service/api-client/api-donation";
@@ -71,9 +72,7 @@ export default function DonationAddNews() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
+    <NewWrapper
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom
@@ -134,6 +133,6 @@ export default function DonationAddNews() {
 
         <Spacing />
       </StackCustom>
-    </OS_Wrapper>
+    </NewWrapper>
   );
 }

app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/failed.tsx

@@ -2,10 +2,10 @@
 import {
   BaseBox,
   Grid,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiDonationGetInvoiceById } from "@/service/api-client/api-donation";
@@ -63,7 +63,7 @@ export default function DonasiFailed() {
   ];
 
   return (
-    <OS_Wrapper>
+    <ViewWrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -105,6 +105,6 @@ export default function DonasiFailed() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx

@@ -6,10 +6,10 @@ import {
   ButtonCustom,
   Grid,
   InformationBox,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import CopyButton from "@/components/Button/CoyButton";
 import { MainColor } from "@/constants/color-palet";
@@ -101,7 +101,8 @@ export default function DonationInvoice() {
 
   return (
     <>
-      <OS_Wrapper
+      <ViewWrapper
+        hideFooter
         footerComponent={
           <BoxButtonOnFooter>
             <ButtonCustom
@@ -221,7 +222,7 @@ export default function DonationInvoice() {
           </BaseBox>
         </StackCustom>
         <Spacing />
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/process.tsx

@@ -1,11 +1,11 @@
-import { BaseBox, OS_Wrapper, StackCustom, TextCustom } from "@/components";
+import { BaseBox, StackCustom, TextCustom, ViewWrapper } from "@/components";
 import MoneyTransferAnimation from "@/components/_ShareComponent/MoneyTransferAnimation";
 import { View } from "react-native";
 
 export default function DonationProcess() {
   return (
     <>
-      <OS_Wrapper>
+      <ViewWrapper>
         <BaseBox>
           <StackCustom>
             <TextCustom align="center" bold>
@@ -35,7 +35,7 @@ export default function DonationProcess() {
             </Grid.Col>
           </Grid>
         </BaseBox> */}
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/success.tsx

@@ -2,10 +2,10 @@
 import {
   BaseBox,
   Grid,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiDonationGetInvoiceById } from "@/service/api-client/api-donation";
@@ -63,7 +63,7 @@ export default function DonationSuccess() {
   ];
 
   return (
-    <OS_Wrapper>
+    <ViewWrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -105,7 +105,7 @@ export default function DonationSuccess() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }
 

app/(application)/(user)/donation/[id]/(transaction-flow)/index.tsx

@@ -3,9 +3,9 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   Grid,
-  OS_Wrapper,
   TextCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -64,7 +64,7 @@ export default function InvestmentInputDonation() {
   );
   return (
     <>
-      <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250} footerComponent={bottomComponent}>
+      <ViewWrapper footerComponent={bottomComponent}>
         {listData.map((item, i) => (
           <BaseBox key={i} onPress={() => setNominal(item.value)}>
             <Grid>
@@ -98,7 +98,7 @@ export default function InvestmentInputDonation() {
             Minimal donasi Rp. 10.000
           </TextCustom>
         </BaseBox>
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

app/(application)/(user)/donation/[id]/(transaction-flow)/select-bank.tsx

@@ -2,7 +2,7 @@ import {
   BaseBox,
   BoxButtonOnFooter,
   ButtonCustom,
-  OS_Wrapper,
+  ViewWrapper,
 } from "@/components";
 import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
 import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
@@ -91,7 +91,7 @@ export default function DonationSelectBank() {
     );
   };
   return (
-    <OS_Wrapper footerComponent={buttonSubmit()}>
+    <ViewWrapper footerComponent={buttonSubmit()}>
       <RadioGroup value={select} onChange={setSelect}>
         {_.isEmpty(listBank)
           ? []
@@ -101,6 +101,6 @@ export default function DonationSelectBank() {
               </BaseBox>
             ))}
       </RadioGroup>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -4,7 +4,7 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
+  NewWrapper,
   Spacing,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
@@ -113,7 +113,7 @@ export default function DonasiDetailStatus() {
           ),
         }}
       />
-      <OS_Wrapper
+      <NewWrapper
         refreshControl={
           <RefreshControl
             refreshing={refreshing}
@@ -156,7 +156,7 @@ export default function DonasiDetailStatus() {
             <Spacing />
           </>
         )}
-      </OS_Wrapper>
+      </NewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

app/(application)/(user)/donation/[id]/detail-story.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
   DummyLandscapeImage,
-  OS_Wrapper,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { apiDonationGetOne } from "@/service/api-client/api-donation";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
@@ -32,12 +32,12 @@ export default function DonationDetailStory() {
     }
   };
   return (
-    <OS_Wrapper>
+    <ViewWrapper>
       <StackCustom>
         <TextCustom>{data?.pembukaan || "-"}</TextCustom>
         <DummyLandscapeImage imageId={data?.imageId} />
         <TextCustom>{data?.cerita || "-"}</TextCustom>
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

app/(application)/(user)/donation/[id]/edit-rekening.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  OS_Wrapper,
+  ViewWrapper,
   StackCustom,
   InformationBox,
   TextInputCustom,
@@ -76,7 +76,7 @@ export default function DonationEditRekening() {
   };
 
   return (
-    <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250}>
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Pastikan Anda mengisi nama bank dan nomor rekening dengan benar. Informasi ini akan membantu admin memverifikasi dan memproses penggalangan dana Anda dengan cepat dan tepat setelah penggalangan dana dipublikasikan." />
         <TextInputCustom
@@ -105,6 +105,6 @@ export default function DonationEditRekening() {
         </ButtonCustom>
       </StackCustom>
       <Spacing />
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

app/(application)/(user)/donation/[id]/edit-story.tsx

@@ -4,10 +4,10 @@ import {
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
+  ViewWrapper,
 } from "@/components";
 import API_IMAGE from "@/constants/api-storage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -93,7 +93,7 @@ export default function DonationEditStory() {
   };
 
   return (
-    <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250}>
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Cerita Anda adalah kunci untuk menginspirasi kebaikan. Jelaskan dengan jujur dan jelas tujuan penggalangan dana ini agar calon donatur memahami dampak positif yang dapat mereka wujudkan melalui kontribusi mereka." />
         <TextAreaCustom
@@ -146,6 +146,6 @@ export default function DonationEditStory() {
         </ButtonCustom>
       </StackCustom>
       <Spacing />
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -6,11 +6,12 @@ import {
   InformationBox,
   LandscapeFrameUploaded,
   LoaderCustom,
-  OS_Wrapper,
+  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import API_IMAGE from "@/constants/api-storage";
@@ -183,9 +184,7 @@ export default function DonationEdit() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
+    <NewWrapper
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom
@@ -279,6 +278,6 @@ export default function DonationEdit() {
         </StackCustom>
       )}
       <Spacing />
-    </OS_Wrapper>
+    </NewWrapper>
   );
 }

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

@@ -6,8 +6,9 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
+  NewWrapper,
   StackCustom,
+  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconNews } from "@/components/_Icon";
@@ -103,7 +104,7 @@ export default function DonasiDetailBeranda() {
           ),
         }}
       />
-      <OS_Wrapper footerComponent={buttonSection}>
+      <NewWrapper footerComponent={buttonSection}>
         {!data ? (
           <CustomSkeleton height={400} />
         ) : (
@@ -126,7 +127,7 @@ export default function DonasiDetailBeranda() {
             />
           </StackCustom>
         )}
-      </OS_Wrapper>
+      </NewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

app/(application)/(user)/donation/[id]/infromation-fundrising.tsx

@@ -5,9 +5,9 @@ import {
   ButtonCustom,
   Grid,
   LoaderCustom,
-  OS_Wrapper,
   Spacing,
   TextCustom,
+  ViewWrapper
 } from "@/components";
 import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
 import { apiDonationFundrising } from "@/service/api-client/api-donation";
@@ -44,7 +44,7 @@ export default function DonationInformationFunrising() {
 
   return (
     <>
-      <OS_Wrapper>
+      <ViewWrapper>
         <BaseBox>
           <Grid>
             <Grid.Col span={6} style={{ justifyContent: "center" }}>
@@ -80,7 +80,7 @@ export default function DonationInformationFunrising() {
             <Donation_BoxPublish key={index} id={item?.id} data={item} />
           ))
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

app/(application)/(user)/donation/create-story.tsx

@@ -10,7 +10,7 @@ import {
   TextAreaCustom,
   TextInputCustom,
 } from "@/components";
-import OS_Wrapper from "@/components/_ShareComponent/OS_Wrapper";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { useAuth } from "@/hooks/use-auth";
 import {
@@ -113,9 +113,7 @@ export default function DonationCreateStory() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
+    <NewWrapper
       footerComponent={
         <>
          <BoxButtonOnFooter>
@@ -186,6 +184,6 @@ export default function DonationCreateStory() {
         />
       </StackCustom>
       <Spacing />
-    </OS_Wrapper>
+    </NewWrapper>
   );
 }

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

@@ -5,12 +5,12 @@ import {
   InformationBox,
   LandscapeFrameUploaded,
   LoaderCustom,
-  OS_Wrapper,
   SelectCustom,
   Spacing,
   StackCustom,
   TextInputCustom,
 } from "@/components";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { apiDonationCreate } from "@/service/api-client/api-donation";
 import { apiMasterDonation } from "@/service/api-client/api-master";
@@ -126,9 +126,7 @@ export default function DonationCreate() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
+    <NewWrapper
       footerComponent={
         <>
           <BoxButtonOnFooter>
@@ -222,6 +220,6 @@ export default function DonationCreate() {
         )}
       </StackCustom>
       <Spacing />
-    </OS_Wrapper>
+    </NewWrapper>
   );
 }

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() {
           ),
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         <BaseBox>
           <StackCustom>
             <TextCustom bold align="center" size="xlarge">
@@ -118,7 +118,7 @@ export default function EventDetailStatus() {
           status={status as string}
         />
         <Spacing />
-      </OS_Wrapper>
+      </ViewWrapper>
 
       <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() {
           ),
         }}
       />
-      <OS_Wrapper>{handlerReturn()}</OS_Wrapper>
+      <ViewWrapper>{handlerReturn()}</ViewWrapper>
     </>
   );
 }

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() {
           ),
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         {isLoadData ? (
           <LoaderCustom />
         ) : (
           <Event_BoxDetailPublishSection data={data} />
         )}
         <Spacing />
-      </OS_Wrapper>
+      </ViewWrapper>
       <DrawerCustom
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}

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

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

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

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

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

@@ -6,7 +6,7 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
+  ViewWrapper,
 } 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 (
-      <OS_Wrapper>
+      <ViewWrapper>
         <CustomSkeleton />
-      </OS_Wrapper>
+      </ViewWrapper>
     );
   }
 
@@ -166,7 +166,7 @@ export default function EventDetailPublish() {
           ),
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         {isLoadingData ? (
           <CustomSkeleton height={400} />
         ) : (
@@ -175,7 +175,7 @@ export default function EventDetailPublish() {
             footerButton={FooterButton()}
           />
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

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

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

@@ -1,4 +1,4 @@
-import { OS_Wrapper } from "@/components";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 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 (
-    <OS_Wrapper>
+    <ViewWrapper>
       <Text style={GStyles.textLabel}>Detail Event {id}</Text>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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,11 +88,7 @@ export default function ForumEdit() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonFooter()}
-    >
+    <ViewWrapper footerComponent={buttonFooter()}>
       {!loadingGetData ? (
         <TextAreaCustom
           placeholder="Ketik diskusi anda..."
@@ -106,6 +102,6 @@ export default function ForumEdit() {
       ) : (
         <LoaderCustom />
       )}
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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,17 +62,13 @@ export default function ForumOtherReportCommentar() {
 
   return (
     <>
-      <OS_Wrapper
-        enableKeyboardHandling
-        contentPaddingBottom={250}
-        footerComponent={handleSubmit}
-      >
+      <ViewWrapper footerComponent={handleSubmit}>
         <TextAreaCustom
           placeholder="Laporkan Komentar"
           value={value}
           onChangeText={setValue}
         />
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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,17 +61,13 @@ export default function ForumOtherReportPosting() {
   );
   return (
     <>
-      <OS_Wrapper
-        enableKeyboardHandling
-        contentPaddingBottom={250}
-        footerComponent={handleSubmit}
-      >
+      <ViewWrapper footerComponent={handleSubmit}>
         <TextAreaCustom
           placeholder="Laporkan Diskusi"
           value={value}
           onChangeText={setValue}
         />
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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

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

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

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

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 (
     <>
-      <OS_Wrapper>
+      <ViewWrapper>
         {isLoadingList ? (
           <LoaderCustom />
         ) : (
@@ -101,7 +101,7 @@ export default function ForumReportCommentar() {
             <Spacing />
           </StackCustom>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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 (
     <>
-      <OS_Wrapper>
+      <ViewWrapper>
         {isLoadingList ? (
           <LoaderCustom />
         ) : (
@@ -114,7 +114,7 @@ export default function ForumReportPosting() {
             <Spacing />
           </StackCustom>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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,11 +67,7 @@ export default function ForumCreate() {
   );
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonFooter}
-    >
+    <ViewWrapper footerComponent={buttonFooter}>
       <TextAreaCustom
         placeholder="Ketik diskusi anda..."
         maxLength={1000}
@@ -79,6 +75,6 @@ export default function ForumCreate() {
         value={text}
         onChangeText={setText}
       />
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

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

app/(application)/(user)/investment/(tabs)/_layout.tsx

@@ -1,5 +1,5 @@
 import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
-import { ICON_SIZE_SMALL, OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { Feather, FontAwesome6, Ionicons } from "@expo/vector-icons";
 import { router, Tabs, useLocalSearchParams, useNavigation } from "expo-router";
@@ -40,12 +40,12 @@ function InvestmentTabsWrapper() {
             ios: {
               borderTopWidth: 0,
               paddingTop: 12,
-              height: OS_IOS_HEIGHT,
+              height: 80,
             },
             android: {
               borderTopWidth: 0,
               paddingTop: 5,
-              height: OS_ANDROID_HEIGHT + paddingBottom,
+              height: 70 + paddingBottom,
             },
           }),
         }}

app/(application)/(user)/investment/[id]/(document)/add-document.tsx

@@ -5,11 +5,11 @@ import {
   ButtonCustom,
   CenterCustom,
   InformationBox,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -83,12 +83,9 @@ export default function InvestmentAddDocument() {
   );
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonFooter}
-    >
-      <StackCustom gap={"xs"}>
+    <>
+      <ViewWrapper footerComponent={buttonFooter}>
+        <StackCustom gap={"xs"}>
           <InformationBox text="File dokumen bersifat opsional, jika memang ada file yang bisa membantu meyakinkan investor. Anda bisa mengupload nya." />
           <Spacing />
           <TextInputCustom
@@ -127,6 +124,7 @@ export default function InvestmentAddDocument() {
             Upload
           </ButtonCenteredOnly>
         </StackCustom>
-    </OS_Wrapper>
+      </ViewWrapper>
+    </>
   );
 }

app/(application)/(user)/investment/[id]/(document)/edit-document.tsx

@@ -6,11 +6,11 @@ import {
   ButtonCustom,
   CenterCustom,
   InformationBox,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import {
@@ -105,12 +105,9 @@ export default function InvestmentEditDocument() {
   );
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonFooter}
-    >
-      <StackCustom gap={"xs"}>
+    <>
+      <ViewWrapper footerComponent={buttonFooter}>
+        <StackCustom gap={"xs"}>
           <InformationBox text="File dokumen bersifat opsional, jika memang ada file yang bisa membantu meyakinkan investor. Anda bisa mengupload nya." />
           <Spacing />
           <TextInputCustom
@@ -145,6 +142,7 @@ export default function InvestmentEditDocument() {
             Upload
           </ButtonCenteredOnly>
         </StackCustom>
-    </OS_Wrapper>
+      </ViewWrapper>
+    </>
   );
 }

app/(application)/(user)/investment/[id]/(my-holding)/[id].tsx

@@ -6,9 +6,9 @@ import {
   DrawerCustom,
   Grid,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
@@ -93,7 +93,7 @@ export default function InvestmentDetailHolding() {
         }}
       />
 
-      <OS_Wrapper>
+      <ViewWrapper>
         <BaseBox>
           <StackCustom gap={"xs"}>
             <Grid>
@@ -124,7 +124,7 @@ export default function InvestmentDetailHolding() {
           status={"publish"}
           bottomSection={bottomSection}
         />
-      </OS_Wrapper>
+      </ViewWrapper>
 
       {/* ========= Draft Drawer ========= */}
       <DrawerCustom

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

@@ -7,9 +7,9 @@ import {
   DrawerCustom,
   DummyLandscapeImage,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconTrash } from "@/components/_Icon/IconTrash";
@@ -70,7 +70,7 @@ export default function InvestmentNews() {
           ),
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         <BaseBox>
           <StackCustom>
             {data && data?.imageId && (
@@ -82,7 +82,7 @@ export default function InvestmentNews() {
             <TextCustom>{(data && data?.deskripsi) || "-"}</TextCustom>
           </StackCustom>
         </BaseBox>
-      </OS_Wrapper>
+      </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

app/(application)/(user)/investment/[id]/(news)/add-news.tsx

@@ -3,11 +3,11 @@ import {
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { apiInvestmentCreateNews } from "@/service/api-client/api-investment";
@@ -80,10 +80,7 @@ export default function InvestmentAddNews() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-    >
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Pengunggahan foto ke aplikasi bersifat opsional dan tidak diwajibkan, Anda dapat menyimpan berita tanpa mengunggah foto." />
         <LandscapeFrameUploaded image={image?.uri} />
@@ -126,6 +123,7 @@ export default function InvestmentAddNews() {
           Simpan
         </ButtonCustom>
       </StackCustom>
-    </OS_Wrapper>
+      <Spacing />
+    </ViewWrapper>
   );
 }

app/(application)/(user)/investment/[id]/(transaction-flow)/failed.tsx

@@ -2,10 +2,10 @@
 import {
   BaseBox,
   Grid,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiInvestmentGetInvoice } from "@/service/api-client/api-investment";
@@ -69,7 +69,7 @@ export default function InvestmentFailed() {
   ];
 
   return (
-    <OS_Wrapper>
+    <ViewWrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -110,6 +110,6 @@ export default function InvestmentFailed() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

app/(application)/(user)/investment/[id]/(transaction-flow)/index.tsx

@@ -5,10 +5,10 @@ import {
   ButtonCustom,
   Divider,
   Grid,
-  OS_Wrapper,
   StackCustom,
   TextCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
 import { apiInvestmentGetOne } from "@/service/api-client/api-investment";
@@ -99,12 +99,9 @@ export default function InvestmentInvest() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonSubmit()}
-    >
-      <BaseBox>
+    <>
+      <ViewWrapper footerComponent={buttonSubmit()}>
+        <BaseBox>
           <StackCustom gap={"xs"}>
             <Grid>
               <Grid.Col span={6}>
@@ -168,6 +165,7 @@ export default function InvestmentInvest() {
             </Grid>
           </StackCustom>
         </BaseBox>
-    </OS_Wrapper>
+      </ViewWrapper>
+    </>
   );
 }

app/(application)/(user)/investment/[id]/(transaction-flow)/process.tsx

@@ -1,11 +1,11 @@
-import { BaseBox, OS_Wrapper, StackCustom, TextCustom } from "@/components";
+import { BaseBox, StackCustom, TextCustom, ViewWrapper } from "@/components";
 import MoneyTransferAnimation from "@/components/_ShareComponent/MoneyTransferAnimation";
 import { View } from "react-native";
 
 export default function InvestmentProcess() {
   return (
     <>
-      <OS_Wrapper>
+      <ViewWrapper>
         <BaseBox>
           <StackCustom>
             <TextCustom align="center" bold>
@@ -35,7 +35,7 @@ export default function InvestmentProcess() {
             </Grid.Col>
           </Grid>
         </BaseBox> */}
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

app/(application)/(user)/investment/[id]/(transaction-flow)/select-bank.tsx

@@ -2,7 +2,7 @@ import {
   BaseBox,
   BoxButtonOnFooter,
   ButtonCustom,
-  OS_Wrapper,
+  ViewWrapper,
 } from "@/components";
 import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
 import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
@@ -86,7 +86,7 @@ export default function InvestmentSelectBank() {
   };
 
   return (
-    <OS_Wrapper footerComponent={buttonSubmit()}>
+    <ViewWrapper footerComponent={buttonSubmit()}>
       <RadioGroup value={select} onChange={setSelect}>
         {_.isEmpty(listBank)
           ? []
@@ -96,6 +96,6 @@ export default function InvestmentSelectBank() {
               </BaseBox>
             ))}
       </RadioGroup>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

app/(application)/(user)/investment/[id]/(transaction-flow)/success.tsx

@@ -2,10 +2,10 @@
 import {
   BaseBox,
   Grid,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiInvestmentGetInvoice } from "@/service/api-client/api-investment";
@@ -69,7 +69,7 @@ export default function InvestmentSuccess() {
   ];
 
   return (
-    <OS_Wrapper>
+    <ViewWrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -110,6 +110,6 @@ export default function InvestmentSuccess() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -4,7 +4,7 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
+  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
@@ -123,14 +123,14 @@ export default function InvestmentDetailStatus() {
         }}
       />
 
-      <OS_Wrapper>
+      <ViewWrapper>
         <Invesment_DetailDataPublishSection
           status={status as string}
           data={data}
           bottomSection={bottomSection}
           buttonSection={buttonSection}
         />
-      </OS_Wrapper>
+      </ViewWrapper>
 
       {/* ========= Draft Drawer ========= */}
       <DrawerCustom

app/(application)/(user)/investment/[id]/edit-prospectus.tsx

@@ -7,10 +7,10 @@ import {
   CenterCustom,
   InformationBox,
   LoaderCustom,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import {
@@ -116,7 +116,7 @@ export default function InvestmentEditProspectus() {
     </BoxButtonOnFooter>
   );
   return (
-    <OS_Wrapper footerComponent={!loadingGet && buttonFooter}>
+    <ViewWrapper footerComponent={!loadingGet && buttonFooter}>
       <StackCustom gap={"xs"}>
         <InformationBox text="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepan." />
         <Spacing />
@@ -153,6 +153,6 @@ export default function InvestmentEditProspectus() {
           Upload
         </ButtonCenteredOnly>
       </StackCustom>
-    </OS_Wrapper>
+    </ViewWrapper>
   );
 }

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

@@ -6,7 +6,7 @@ import {
   InformationBox,
   LandscapeFrameUploaded,
   LoaderCustom,
-  OS_Wrapper,
+  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
@@ -199,9 +199,7 @@ export default function InvestmentEdit() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
+    <NewWrapper
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom isLoading={isLoading} onPress={handleSubmitUpdate}>
@@ -352,6 +350,6 @@ export default function InvestmentEdit() {
 
         <Spacing />
       </StackCustom>
-    </OS_Wrapper>
+    </NewWrapper>
   );
 }

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

@@ -4,7 +4,7 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
+  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
@@ -122,14 +122,14 @@ export default function InvestmentDetail() {
         }}
       />
 
-      <OS_Wrapper>
+      <ViewWrapper>
         <Invesment_DetailDataPublishSection
           status={"publish"}
           data={data}
           bottomSection={bottomSection}
           buttonSection={buttonSection}
         />
-      </OS_Wrapper>
+      </ViewWrapper>
 
       {/* ========= Draft Drawer ========= */}
       <DrawerCustom

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

@@ -6,7 +6,7 @@ import {
   CenterCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  OS_Wrapper,
+  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
@@ -118,21 +118,6 @@ export default function InvestmentCreate() {
 
     try {
       setIsLoading(true);
-
-      const responseUploadPdf = await uploadFileService({
-        imageUri: pdf.uri,
-        dirId: DIRECTORY_ID.investasi_prospektus,
-      });
-
-      if (!responseUploadPdf.success) {
-        Toast.show({
-          type: "error",
-          text1: "Gagal mengunggah file PDF",
-        });
-        return;
-      }
-      const pdfId = responseUploadPdf.data.id;
-
       const responseUploadImage = await uploadFileService({
         imageUri: image,
         dirId: DIRECTORY_ID.investasi_image,
@@ -145,8 +130,22 @@ export default function InvestmentCreate() {
         });
         return;
       }
-      const imageId = responseUploadImage.data.id;
 
+      const imageId = responseUploadImage.data.id;
+      const responseUploadPdf = await uploadFileService({
+        imageUri: pdf.uri,
+        dirId: DIRECTORY_ID.investasi_prospektus,
+      });
+
+      if (!responseUploadPdf.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah file PDF",
+        });
+        return;
+      }
+
+      const pdfId = responseUploadPdf.data.id;
       const newData = {
         title: data.title,
         targetDana: data.targetDana,
@@ -186,9 +185,7 @@ export default function InvestmentCreate() {
 
   //   const [coba, setCoba] = useState("");
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
+    <NewWrapper
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom
@@ -376,6 +373,7 @@ export default function InvestmentCreate() {
 
         <Spacing />
       </StackCustom>
-    </OS_Wrapper>
+      {/* <Spacing height={50} /> */}
+    </NewWrapper>
   );
 }

app/(application)/(user)/job/(tabs)/_layout.tsx

@@ -5,17 +5,15 @@ import { IconHome, IconStatus } from "@/components/_Icon";
 import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { Ionicons } from "@expo/vector-icons";
-import { router, Tabs, useLocalSearchParams } from "expo-router";
+import {
+  router,
+  Tabs,
+  useLocalSearchParams
+} from "expo-router";
 import { View } from "react-native";
 import { MainColor } from "@/constants/color-palet";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Platform } from "react-native";
-import {
-  OS_ANDROID_HEIGHT,
-  OS_ANDROID_PADDING_TOP,
-  OS_IOS_HEIGHT,
-  OS_IOS_PADDING_TOP,
-} from "@/constants/constans-value";
 
 function JobTabsWrapper() {
   const insets = useSafeAreaInsets();
@@ -33,23 +31,20 @@ function JobTabsWrapper() {
           tabBarStyle: Platform.select({
             ios: {
               borderTopWidth: 0,
-              paddingTop: OS_IOS_PADDING_TOP,
-              height: OS_IOS_HEIGHT,
+              paddingTop: 12,
+              height: 80,
             },
             android: {
               borderTopWidth: 0,
-              paddingTop: OS_ANDROID_PADDING_TOP,
-              height: OS_ANDROID_HEIGHT + paddingBottom,
+              paddingTop: 5,
+              height: 70 + paddingBottom,
             },
           }),
           header: () => (
             <AppHeader
               title="Job Vacancy"
               left={
-                <BackButtonFromNotification
-                  from={from || ""}
-                  category={category}
-                />
+                <BackButtonFromNotification from={from || ""} category={category} />
               }
             />
           ),

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

@@ -5,7 +5,7 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
+  PageWrapper,
   Spacing,
   StackCustom,
 } from "@/components";
@@ -23,7 +23,6 @@ import {
   useLocalSearchParams,
 } from "expo-router";
 import { useCallback, useState } from "react";
-import { PADDING_INLINE } from "@/constants/constans-value";
 
 export default function JobDetailStatus() {
   const { id, status } = useLocalSearchParams();
@@ -73,7 +72,7 @@ export default function JobDetailStatus() {
           ),
         }}
       />
-      <OS_Wrapper >
+      <PageWrapper>
         {isLoadData ? (
           <LoaderCustom />
         ) : (
@@ -97,7 +96,7 @@ export default function JobDetailStatus() {
             <Spacing />
           </>
         )}
-      </OS_Wrapper>
+      </PageWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

@@ -2,9 +2,9 @@
 import {
   ButtonCustom,
   LoaderCustom,
+  PageWrapper,
   Spacing,
   StackCustom,
-  ViewWrapper,
 } from "@/components";
 import Job_BoxDetailSection from "@/screens/Job/BoxDetailSection";
 import { apiJobGetOne, apiJobUpdateData } from "@/service/api-client/api-job";
@@ -71,7 +71,7 @@ export default function JobDetailArchive() {
       {isLoadData ? (
         <LoaderCustom />
       ) : (
-        <ViewWrapper>
+        <PageWrapper>
           <>
             <StackCustom>
               <Job_BoxDetailSection data={data} />
@@ -83,17 +83,10 @@ export default function JobDetailArchive() {
               >
                 Publish kembali
               </ButtonCustom>
-              {/* <Job_ButtonStatusSection
-                id={id as string}
-                status={status as string}
-                isLoading={isLoading}
-                onSetLoading={setIsLoading}
-                isArchive={true}
-              /> */}
             </StackCustom>
             <Spacing />
           </>
-        </ViewWrapper>
+        </PageWrapper>
       )}
     </>
   );

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

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { ButtonCustom, LoaderCustom, Spacing, StackCustom, ViewWrapper } from "@/components";
+import { ButtonCustom, LoaderCustom, PageWrapper, Spacing, StackCustom } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Job_BoxDetailSection from "@/screens/Job/BoxDetailSection";
@@ -88,7 +88,7 @@ export default function JobDetail() {
   };
 
   return (
-    <ViewWrapper>
+    <PageWrapper>
       {isLoading ? (
         <LoaderCustom />
       ) : (
@@ -101,6 +101,6 @@ export default function JobDetail() {
           <Spacing />
         </>
       )}
-    </ViewWrapper>
+    </PageWrapper>
   );
 }

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   CenterCustom,
-  OS_Wrapper,
+  NewWrapper_V2,
   PhoneInputCustom,
   SelectCustom,
   Spacing,
@@ -368,39 +368,51 @@ export default function PortofolioEdit() {
     </BoxButtonOnFooter>
   );
 
+  // if (!bidangBisnis || !subBidangBisnis) {
+  //   return (
+  //     <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+  //       <ListSkeletonComponent height={80} />
+  //     </View>
+  //   );
+  // }
+
   return (
     <>
-      <OS_Wrapper
+      <NewWrapper_V2
         enableKeyboardHandling
-        contentPaddingBottom={250}
+        keyboardScrollOffset={100}
         footerComponent={buttonUpdate}
       >
         {!bidangBisnis || !subBidangBisnis ? (
           <ListSkeletonComponent height={80} />
         ) : (
           <StackCustom gap={"xs"}>
-            <TextInputCustom
-              required
-              label="Nama Bisnis"
-              placeholder="Masukkan nama bisnis"
-              value={data.namaBisnis}
-              onChangeText={(value: any) =>
-                setData({ ...data, namaBisnis: value })
-              }
-            />
+            <View onStartShouldSetResponder={() => true}>
+              <TextInputCustom
+                required
+                label="Nama Bisnis"
+                placeholder="Masukkan nama bisnis"
+                value={data.namaBisnis}
+                onChangeText={(value: any) =>
+                  setData({ ...data, namaBisnis: value })
+                }
+              />
+            </View>
 
-            <SelectCustom
-              label="Bidang Usaha"
-              required
-              data={bidangBisnis?.map((item) => ({
-                label: item.name,
-                value: item.id,
-              }))}
-              value={data.masterBidangBisnisId}
-              onChange={(value: any) => {
-                handleBidangBisnisChange(value);
-              }}
-            />
+            <View onStartShouldSetResponder={() => true}>
+              <SelectCustom
+                label="Bidang Usaha"
+                required
+                data={bidangBisnis?.map((item) => ({
+                  label: item.name,
+                  value: item.id,
+                }))}
+                value={data.masterBidangBisnisId}
+                onChange={(value: any) => {
+                  handleBidangBisnisChange(value);
+                }}
+              />
+            </View>
 
             {listSubBidangSelected.map((item, index) => {
               // Filter data untuk select sub bidang, menghilangkan yang sudah dipilih kecuali untuk item ini sendiri
@@ -424,16 +436,17 @@ export default function PortofolioEdit() {
                 }));
 
               return (
-                <SelectCustom
-                  key={index}
-                  label="Sub Bidang Usaha"
-                  required
-                  data={availableSubBidangOptions}
-                  value={item.MasterSubBidangBisnis?.id || null}
-                  onChange={(value: any) => {
-                    handleSubBidangChange(value, index);
-                  }}
-                />
+                <View onStartShouldSetResponder={() => true} key={index}>
+                  <SelectCustom
+                    label="Sub Bidang Usaha"
+                    required
+                    data={availableSubBidangOptions}
+                    value={item.MasterSubBidangBisnis?.id || null}
+                    onChange={(value: any) => {
+                      handleSubBidangChange(value, index);
+                    }}
+                  />
+                </View>
               );
             })}
 
@@ -493,34 +506,38 @@ export default function PortofolioEdit() {
             </View>
             <Spacing />
 
-            <TextInputCustom
-              required
-              label="Alamat Bisnis"
-              placeholder="Masukkan alamat bisnis"
-              value={data.alamatKantor}
-              onChangeText={(value: any) =>
-                setData({ ...data, alamatKantor: value })
-              }
-            />
+            <View onStartShouldSetResponder={() => true}>
+              <TextInputCustom
+                required
+                label="Alamat Bisnis"
+                placeholder="Masukkan alamat bisnis"
+                value={data.alamatKantor}
+                onChangeText={(value: any) =>
+                  setData({ ...data, alamatKantor: value })
+                }
+              />
+            </View>
 
-            <TextAreaCustom
-              label="Deskripsi Bisnis"
-              placeholder="Masukkan deskripsi bisnis"
-              value={data.deskripsi}
-              onChangeText={(value: any) =>
-                setData({ ...data, deskripsi: value })
-              }
-              autosize
-              minRows={2}
-              maxRows={5}
-              required
-              showCount
-              maxLength={1000}
-            />
+            <View onStartShouldSetResponder={() => true}>
+              <TextAreaCustom
+                label="Deskripsi Bisnis"
+                placeholder="Masukkan deskripsi bisnis"
+                value={data.deskripsi}
+                onChangeText={(value: any) =>
+                  setData({ ...data, deskripsi: value })
+                }
+                autosize
+                minRows={2}
+                maxRows={5}
+                required
+                showCount
+                maxLength={1000}
+              />
+            </View>
             <Spacing />
           </StackCustom>
         )}
-      </OS_Wrapper>
+      </NewWrapper_V2>
     </>
   );
 }

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

@@ -4,7 +4,7 @@ import {
   DrawerCustom,
   DummyLandscapeImage,
   LoaderCustom,
-  OS_Wrapper,
+  NewWrapper_V2,
   Spacing,
   StackCustom,
   TextCustom,
@@ -92,7 +92,7 @@ export default function Portofolio() {
           ),
         }}
       />
-      <OS_Wrapper>
+      <NewWrapper_V2>
         {!data || !profileId ? (
             <StackCustom>
             <CustomSkeleton height={400} />
@@ -125,7 +125,7 @@ export default function Portofolio() {
             <Spacing />
           </StackCustom>
         )}
-      </OS_Wrapper>
+      </NewWrapper_V2>
 
       {/* 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_V2 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import { usePaginatedApi } from "@/hooks/use-paginated-api";
@@ -120,7 +120,7 @@ export default function ProfileBlockedList() {
 
   return (
     <>
-      <OS_Wrapper
+      <NewWrapper_V2
         // headerComponent={renderHeader()}
         listData={listData}
         renderItem={renderItem}

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

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

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

@@ -1,16 +1,16 @@
 import {
   ButtonCustom,
-  OS_Wrapper,
+  NewWrapper_V2,
   SelectCustom,
   StackCustom,
   TextInputCustom,
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
-import { PADDING_INLINE } from "@/constants/constans-value";
 import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
 import { IProfile } from "@/types/Type-Profile";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
+import { View } from "react-native";
 import Toast from "react-native-toast-message";
 
 export default function ProfileEdit() {
@@ -71,9 +71,9 @@ export default function ProfileEdit() {
   };
 
   return (
-    <OS_Wrapper
+    <NewWrapper_V2
       enableKeyboardHandling
-      contentPaddingBottom={250}
+      keyboardScrollOffset={100}
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
@@ -83,45 +83,53 @@ export default function ProfileEdit() {
       }
     >
       <StackCustom gap={"xs"}>
-        <TextInputCustom
-          label="Nama"
-          placeholder="Nama"
-          value={data?.name}
-          onChangeText={(text) => {
-            setData({ ...data, name: text });
-          }}
-          required
-        />
-        <TextInputCustom
-          keyboardType="email-address"
-          label="Email"
-          placeholder="Email"
-          value={data?.email}
-          onChangeText={(text) => {
-            setData({ ...data, email: text });
-          }}
-          required
-        />
-        <TextInputCustom
-          label="Alamat"
-          placeholder="Alamat"
-          value={data?.alamat}
-          onChangeText={(text) => {
-            setData({ ...data, alamat: text });
-          }}
-          required
-        />
-        <SelectCustom
-          required
-          label="Jenis Kelamin"
-          placeholder="Pilih jenis kelamin"
-          data={options}
-          value={data?.jenisKelamin}
-          onChange={(value) => {
-            setData({ ...(data as any), jenisKelamin: value });
-          }}
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            label="Nama"
+            placeholder="Nama"
+            value={data?.name}
+            onChangeText={(text) => {
+              setData({ ...data, name: text });
+            }}
+            required
+          />
+        </View>
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            keyboardType="email-address"
+            label="Email"
+            placeholder="Email"
+            value={data?.email}
+            onChangeText={(text) => {
+              setData({ ...data, email: text });
+            }}
+            required
+          />
+        </View>
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            label="Alamat"
+            placeholder="Alamat"
+            value={data?.alamat}
+            onChangeText={(text) => {
+              setData({ ...data, alamat: text });
+            }}
+            required
+          />
+        </View>
+        <View onStartShouldSetResponder={() => true}>
+          <SelectCustom
+            required
+            label="Jenis Kelamin"
+            placeholder="Pilih jenis kelamin"
+            data={options}
+            value={data?.jenisKelamin}
+            onChange={(value) => {
+              setData({ ...(data as any), jenisKelamin: value });
+            }}
+          />
+        </View>
       </StackCustom>
-    </OS_Wrapper>
+    </NewWrapper_V2>
   );
 }

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

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { OS_Wrapper, StackCustom } from "@/components";
+import { NewWrapper_V2, StackCustom } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import LeftButtonCustom from "@/components/Button/BackButton";
@@ -119,7 +119,7 @@ export default function Profile() {
         }}
       />
       {/* Main View */}
-      <OS_Wrapper
+      <NewWrapper_V2
         refreshControl={
           <RefreshControl
             refreshing={refreshing}
@@ -144,7 +144,7 @@ export default function Profile() {
             />
           </>
         )}
-      </OS_Wrapper>
+      </NewWrapper_V2>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom

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

@@ -1,9 +1,9 @@
 import {
-    BaseBox,
-    BoxButtonOnFooter,
-    ButtonCenteredOnly,
-    ButtonCustom,
-    OS_Wrapper,
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  NewWrapper_V2,
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -127,7 +127,10 @@ export default function UpdateBackgroundProfile() {
   );
 
   return (
-    <OS_Wrapper footerComponent={buttonFooter}>
+    <NewWrapper_V2
+      contentPaddingHorizontal={16}
+      footerComponent={buttonFooter}
+    >
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
@@ -144,6 +147,6 @@ export default function UpdateBackgroundProfile() {
       >
         Update
       </ButtonCenteredOnly>
-    </OS_Wrapper>
+    </NewWrapper_V2>
   );
 }

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

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

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

@@ -23,11 +23,7 @@ export default function ProfileLayout() {
         />
         <Stack.Screen
           name="create"
-          options={{
-            header: () => (
-              <AppHeader title="Tambah Profil" showBack={false} />
-            ),
-          }}
+          options={{ header: () => <AppHeader title="Buat Profil" showBack={false} /> }}
         />
 
         <Stack.Screen

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

@@ -2,7 +2,7 @@ import {
     BaseBox,
     ButtonCenteredOnly,
     ButtonCustom,
-    OS_Wrapper,
+    NewWrapper_V2,
     SelectCustom,
     Spacing,
     StackCustom,
@@ -12,7 +12,6 @@ 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";
@@ -156,9 +155,9 @@ export default function CreateProfile() {
   );
 
   return (
-    <OS_Wrapper
+    <NewWrapper_V2
       enableKeyboardHandling
-      contentPaddingBottom={250}
+      keyboardScrollOffset={100}
       footerComponent={footerComponent}
     >
       <StackCustom>
@@ -209,43 +208,51 @@ export default function CreateProfile() {
         </View>
 
         <Spacing />
-        <TextInputCustom
-          required
-          label="Nama"
-          placeholder="Masukkan nama"
-          value={data.name}
-          onChangeText={(text) => setData({ ...data, name: text })}
-        />
-        <TextInputCustom
-          keyboardType="email-address"
-          required
-          label="Email"
-          placeholder="Masukkan email"
-          value={data.email}
-          onChangeText={(text) => setData({ ...data, email: text })}
-        />
-        <TextInputCustom
-          required
-          label="Alamat"
-          placeholder="Masukkan alamat"
-          value={data.alamat}
-          onChangeText={(text) => setData({ ...data, alamat: text })}
-        />
-        <SelectCustom
-          label="Jenis Kelamin"
-          placeholder="Pilih jenis kelamin"
-          data={[
-            { label: "Laki-laki", value: "laki-laki" },
-            { label: "Perempuan", value: "perempuan" },
-          ]}
-          value={data.jenisKelamin}
-          required
-          onChange={(value) =>
-            setData({ ...(data as any), jenisKelamin: value })
-          }
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            required
+            label="Nama"
+            placeholder="Masukkan nama"
+            value={data.name}
+            onChangeText={(text) => setData({ ...data, name: text })}
+          />
+        </View>
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            keyboardType="email-address"
+            required
+            label="Email"
+            placeholder="Masukkan email"
+            value={data.email}
+            onChangeText={(text) => setData({ ...data, email: text })}
+          />
+        </View>
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            required
+            label="Alamat"
+            placeholder="Masukkan alamat"
+            value={data.alamat}
+            onChangeText={(text) => setData({ ...data, alamat: text })}
+          />
+        </View>
+        <View onStartShouldSetResponder={() => true}>
+          <SelectCustom
+            label="Jenis Kelamin"
+            placeholder="Pilih jenis kelamin"
+            data={[
+              { label: "Laki-laki", value: "laki-laki" },
+              { label: "Perempuan", value: "perempuan" },
+            ]}
+            value={data.jenisKelamin}
+            required
+            onChange={(value) =>
+              setData({ ...(data as any), jenisKelamin: value })
+            }
+          />
+        </View>
         <Spacing />
       </StackCustom>
-    </OS_Wrapper>
+    </NewWrapper_V2>
   );
 }

app/(application)/(user)/voting/(tabs)/_layout.tsx

@@ -6,7 +6,6 @@ import {
 } from "@/components/_Icon";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
-import { OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { router, Tabs, useLocalSearchParams } from "expo-router";
 import { View } from "react-native";
@@ -31,12 +30,12 @@ function VotingTabsWrapper() {
             ios: {
               borderTopWidth: 0,
               paddingTop: 12,
-              height: OS_IOS_HEIGHT,
+              height: 80,
             },
             android: {
               borderTopWidth: 0,
               paddingTop: 5,
-              height: OS_ANDROID_HEIGHT + paddingBottom,
+              height: 70 + paddingBottom,
             },
           }),
           header: () => (

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

@@ -7,10 +7,10 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconArchive, IconContribution, IconEdit } from "@/components/_Icon";
@@ -119,7 +119,7 @@ export default function VotingDetailStatus() {
           ),
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -158,7 +158,7 @@ export default function VotingDetailStatus() {
             <Spacing />
           </>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
 
       {/* ========= Draft Drawer ========= */}
       <DrawerCustom

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

@@ -6,8 +6,8 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   Spacing,
+  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconContribution } from "@/components/_Icon";
@@ -94,7 +94,7 @@ export default function VotingDetailContribution() {
         }}
       />
 
-      <OS_Wrapper>
+      <ViewWrapper>
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -116,7 +116,7 @@ export default function VotingDetailContribution() {
             <Spacing />
           </>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
 
       {/* ========= Publish Drawer ========= */}
       <DrawerCustom

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

@@ -5,7 +5,7 @@ import {
   ButtonCustom,
   CenterCustom,
   LoaderCustom,
-  OS_Wrapper,
+  NewWrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
@@ -189,11 +189,7 @@ export default function VotingEdit() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonSubmit()}
-    >
+    <NewWrapper footerComponent={buttonSubmit()}>
       {loadingGetData ? (
         <ListSkeletonComponent />
       ) : (
@@ -332,6 +328,6 @@ export default function VotingEdit() {
           <Spacing />
         </StackCustom>
       )}
-    </OS_Wrapper>
+    </NewWrapper>
   );
 }

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

@@ -6,8 +6,8 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   Spacing,
+  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconContribution } from "@/components/_Icon";
@@ -94,7 +94,7 @@ export default function VotingDetailHistory() {
           ),
         }}
       />
-      <OS_Wrapper>
+      <ViewWrapper>
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -116,7 +116,7 @@ export default function VotingDetailHistory() {
             <Spacing />
           </>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
 
       {/* ========= Publish Drawer ========= */}
       <DrawerCustom

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

@@ -8,8 +8,8 @@ import {
   InformationBox,
   LoaderCustom,
   MenuDrawerDynamicGrid,
-  OS_Wrapper,
   StackCustom,
+  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconArchive, IconContribution } from "@/components/_Icon";
@@ -32,7 +32,6 @@ import {
   useLocalSearchParams,
 } from "expo-router";
 import React, { useCallback, useEffect, useState } from "react";
-import { RefreshControl } from "react-native";
 import Toast from "react-native-toast-message";
 
 export default function VotingDetail() {
@@ -134,9 +133,9 @@ export default function VotingDetail() {
 
   if (isEventFinished) {
     return (
-      <OS_Wrapper>
+      <ViewWrapper>
         <CustomSkeleton />
-      </OS_Wrapper>
+      </ViewWrapper>
     );
   }
 
@@ -156,14 +155,7 @@ export default function VotingDetail() {
         }}
       />
 
-      <OS_Wrapper
-        refreshControl={
-          <RefreshControl
-            refreshing={loadingGetData}
-            onRefresh={handlerLoadData}
-          />
-        }
-      >
+      <ViewWrapper>
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -190,7 +182,7 @@ export default function VotingDetail() {
             />
           </StackCustom>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
 
       {/* ========= Publish Drawer ========= */}
       <DrawerCustom

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

@@ -3,11 +3,12 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   CenterCustom,
-  OS_Wrapper,
+  NewWrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
 import { MainColor } from "@/constants/color-palet";
@@ -106,11 +107,7 @@ export default function VotingCreate() {
   };
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonSubmit()}
-    >
+    <NewWrapper footerComponent={buttonSubmit()}>
       <StackCustom gap={"xs"}>
         <TextInputCustom
           label="Judul Voting"
@@ -201,6 +198,6 @@ export default function VotingCreate() {
 
         <Spacing />
       </StackCustom>
-    </OS_Wrapper>
+    </NewWrapper>
   );
 }

app/(application)/(user)/waiting-room.tsx

@@ -3,7 +3,7 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   InformationBox,
-  OS_Wrapper,
+  NewWrapper,
   StackCustom
 } from "@/components";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
@@ -82,7 +82,7 @@ export default function WaitingRoom() {
 
   return (
     <>
-      <OS_Wrapper
+      <NewWrapper
         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>
-      </OS_Wrapper>
+      </NewWrapper>
     </>
   );
 }

app/(application)/admin/event/[id]/reject-input.tsx

@@ -2,8 +2,8 @@
 import {
   AlertDefaultSystem,
   BoxButtonOnFooter,
-  OS_Wrapper,
   TextAreaCustom,
+  ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
@@ -107,20 +107,20 @@ export default function AdminEventRejectInput() {
   );
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonSubmit}
-      headerComponent={<AdminBackButtonAntTitle title="Penolakan Event" />}
-    >
-      <TextAreaCustom
-        value={data}
-        onChangeText={setData}
-        placeholder="Masukan alasan"
-        required
-        showCount
-        maxLength={1000}
-      />
-    </OS_Wrapper>
+    <>
+      <ViewWrapper
+        footerComponent={buttonSubmit}
+        headerComponent={<AdminBackButtonAntTitle title="Penolakan Event" />}
+      >
+        <TextAreaCustom
+          value={data}
+          onChangeText={setData}
+          placeholder="Masukan alasan"
+          required
+          showCount
+          maxLength={1000}
+        />
+      </ViewWrapper>
+    </>
   );
 }

app/(application)/admin/event/index.tsx

@@ -1,4 +1,4 @@
-import { OS_Wrapper, Spacing, StackCustom } from "@/components";
+import { Spacing, StackCustom, ViewWrapper } from "@/components";
 import { IconArchive } from "@/components/_Icon";
 import {
   IconList,
@@ -65,15 +65,17 @@ export default function AdminVoting() {
   ];
 
   return (
-    <OS_Wrapper>
-      <AdminTitlePage title="Event" />
-      <Spacing />
+    <>
+      <ViewWrapper>
+        <AdminTitlePage title="Event" />
+        <Spacing />
 
-      <StackCustom gap={"xs"}>
-        {listData.map((item, i) => (
-          <AdminComp_BoxDashboard key={i} item={item} />
-        ))}
-      </StackCustom>
-    </OS_Wrapper>
+        <StackCustom gap={"xs"}>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
   );
 }

app/(application)/admin/event/type-create.tsx

@@ -1,8 +1,8 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
-  OS_Wrapper,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import { apiEventCreateTypeOfEvent } from "@/service/api-admin/api-master-admin";
@@ -50,17 +50,17 @@ export default function AdminEventTypeOfEventCreate() {
     </BoxButtonOnFooter>
   );
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      headerComponent={<AdminBackButtonAntTitle title="Tambah Tipe Acara" />}
-      footerComponent={buttonSubmit}
-    >
-      <TextInputCustom
-        placeholder="Masukkan Tipe Acara"
-        value={value}
-        onChangeText={setValue}
-      />
-    </OS_Wrapper>
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Tambah Tipe Acara" />}
+        footerComponent={buttonSubmit}
+      >
+        <TextInputCustom
+          placeholder="Masukkan Tipe Acara"
+          value={value}
+          onChangeText={setValue}
+        />
+      </ViewWrapper>
+    </>
   );
 }

app/(application)/admin/event/type-update.tsx

@@ -2,10 +2,10 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
-  OS_Wrapper,
   Spacing,
   TextCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import { MainColor } from "@/constants/color-palet";
@@ -89,25 +89,25 @@ export default function AdminEventTypeOfEventUpdate() {
     </BoxButtonOnFooter>
   );
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      headerComponent={<AdminBackButtonAntTitle title="Ubah Tipe Acara" />}
-      footerComponent={buttonSubmit}
-    >
-      <TextInputCustom
-        placeholder="Masukkan Tipe Acara"
-        value={data.name}
-        onChangeText={(text) => setData({ ...data, name: text })}
-      />
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title="Ubah Tipe Acara" />}
+        footerComponent={buttonSubmit}
+      >
+        <TextInputCustom
+          placeholder="Masukkan Tipe Acara"
+          value={data.name}
+          onChangeText={(text) => setData({ ...data, name: text })}
+        />
 
-      <TextCustom>Aktivasi</TextCustom>
-      <Spacing height={10} />
-      <Switch
-        color={MainColor.yellow}
-        value={data.active}
-        onValueChange={(value) => setData({ ...data, active: value })}
-      />
-    </OS_Wrapper>
+        <TextCustom>Aktivasi</TextCustom>
+        <Spacing height={10} />
+        <Switch
+          color={MainColor.yellow}
+          value={data.active}
+          onValueChange={(value) => setData({ ...data, active: value })}
+        />
+      </ViewWrapper>
+    </>
   );
 }

app/(application)/admin/job/[id]/[status]/index.tsx

@@ -5,10 +5,11 @@ import {
   BaseBox,
   DummyLandscapeImage,
   Grid,
-  OS_Wrapper,
+  NewWrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
@@ -120,7 +121,7 @@ export default function AdminJobDetailStatus() {
 
   return (
     <>
-      <OS_Wrapper
+      <NewWrapper
         headerComponent={<AdminBackButtonAntTitle title={`Detail Data`} />}
       >
         <BaseBox>
@@ -184,7 +185,7 @@ export default function AdminJobDetailStatus() {
           />
         )}
         <Spacing />
-      </OS_Wrapper>
+      </NewWrapper>
     </>
   );
 }

app/(application)/admin/job/[id]/[status]/reject-input.tsx

@@ -2,8 +2,9 @@
 import {
   AlertDefaultSystem,
   BoxButtonOnFooter,
-  OS_Wrapper,
+  NewWrapper,
   TextAreaCustom,
+  ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
@@ -100,9 +101,7 @@ export default function AdminJobRejectInput() {
 
   return (
     <>
-      <OS_Wrapper
-        enableKeyboardHandling
-        contentPaddingBottom={250}
+      <NewWrapper
         footerComponent={buttonSubmit}
         headerComponent={<AdminBackButtonAntTitle title="Penolakan Job" />}
       >
@@ -114,7 +113,7 @@ export default function AdminJobRejectInput() {
           showCount
           maxLength={1000}
         />
-      </OS_Wrapper>
+      </NewWrapper>
     </>
   );
 }

app/(application)/admin/job/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { OS_Wrapper, Spacing, StackCustom } from "@/components";
+import { Spacing, StackCustom, ViewWrapper } from "@/components";
 import {
   IconPublish,
   IconReject,
@@ -42,7 +42,7 @@ export default function AdminJob() {
 
   return (
     <>
-      <OS_Wrapper>
+      <ViewWrapper>
         <AdminTitlePage title="Job Vacancy" />
         <Spacing />
         <StackCustom gap={"xs"}>
@@ -50,7 +50,7 @@ export default function AdminJob() {
             <AdminComp_BoxDashboard key={i} item={item} />
           ))}
         </StackCustom>
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

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 (
     <>
-      <OS_Wrapper
+      <ViewWrapper
         headerComponent={<AdminBackButtonAntTitle title={`Detail User`} />}
         footerComponent={
           data && (
@@ -108,7 +108,7 @@ export default function AdminUserAccessDetail() {
             ))}
           </StackCustom>
         )}
-      </OS_Wrapper>
+      </ViewWrapper>
     </>
   );
 }

app/(application)/admin/voting/[id]/[status]/index.tsx

@@ -5,10 +5,11 @@ import {
   BaseBox,
   CircleContainer,
   Grid,
-  OS_Wrapper,
+  NewWrapper,
   Spacing,
   StackCustom,
   TextCustom,
+  ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
@@ -168,10 +169,11 @@ export default function AdminVotingDetail() {
   };
 
   return (
-    <OS_Wrapper
-      hideFooter
-      headerComponent={<AdminBackButtonAntTitle title={`Detail Data`} />}
-    >
+    <>
+      <NewWrapper
+        hideFooter
+        headerComponent={<AdminBackButtonAntTitle title={`Detail Data`} />}
+      >
         <BaseBox>
           <StackCustom>
             {listData.map((item, i) => (
@@ -251,6 +253,7 @@ export default function AdminVotingDetail() {
           />
         )}
         <Spacing />
-    </OS_Wrapper>
+      </NewWrapper>
+    </>
   );
 }

app/(application)/admin/voting/[id]/[status]/reject-input.tsx

@@ -2,8 +2,8 @@
 import {
   AlertDefaultSystem,
   BoxButtonOnFooter,
-  OS_Wrapper,
   TextAreaCustom,
+  ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
@@ -99,20 +99,20 @@ export default function AdminVotingRejectInput() {
   );
 
   return (
-    <OS_Wrapper
-      enableKeyboardHandling
-      contentPaddingBottom={250}
-      footerComponent={buttonSubmit}
-      headerComponent={<AdminBackButtonAntTitle title="Penolakan Voting" />}
-    >
-      <TextAreaCustom
-        value={data}
-        onChangeText={setData}
-        placeholder="Masukan alasan"
-        required
-        showCount
-        maxLength={1000}
-      />
-    </OS_Wrapper>
+    <>
+      <ViewWrapper
+        footerComponent={buttonSubmit}
+        headerComponent={<AdminBackButtonAntTitle title="Penolakan Voting" />}
+      >
+        <TextAreaCustom
+          value={data}
+          onChangeText={setData}
+          placeholder="Masukan alasan"
+          required
+          showCount
+          maxLength={1000}
+        />
+      </ViewWrapper>
+    </>
   );
 }

app/(application)/admin/voting/index.tsx

@@ -1,4 +1,4 @@
-import { OS_Wrapper, Spacing, StackCustom } from "@/components";
+import { Spacing, StackCustom, ViewWrapper } from "@/components";
 import { IconArchive } from "@/components/_Icon";
 import {
   IconPublish,
@@ -59,14 +59,16 @@ export default function AdminVoting() {
   ];
 
   return (
-    <OS_Wrapper>
-      <AdminTitlePage title="Voting" />
-      <Spacing />
-      <StackCustom gap={"xs"}>
-        {listData.map((item, i) => (
-          <AdminComp_BoxDashboard key={i} item={item} />
-        ))}
-      </StackCustom>
-    </OS_Wrapper>
+    <>
+      <ViewWrapper>
+        <AdminTitlePage title="Voting" />
+        <Spacing />
+        <StackCustom gap={"xs"}>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
+      </ViewWrapper>
+    </>
   );
 }

components/_ShareComponent/AndroidWrapper.tsx

@@ -1,254 +0,0 @@
-// @/components/AndroidWrapper.tsx
-// Android Wrapper - Based on NewWrapper_V2 (with keyboard handling for Android)
-import { MainColor } from "@/constants/color-palet";
-import { OS_HEIGHT } from "@/constants/constans-value";
-import { GStyles } from "@/styles/global-styles";
-import {
-  ImageBackground,
-  Keyboard,
-  KeyboardAvoidingView,
-  ScrollView,
-  FlatList,
-  TouchableWithoutFeedback,
-  View,
-  StyleProp,
-  ViewStyle,
-} from "react-native";
-import {
-  NativeSafeAreaViewProps,
-  SafeAreaView,
-} from "react-native-safe-area-context";
-import type { ScrollViewProps, FlatListProps } from "react-native";
-import { useKeyboardForm, cloneChildrenWithFocusHandler } from "@/hooks/useKeyboardForm";
-
-// --- Base Props ---
-interface BaseProps {
-  withBackground?: boolean;
-  headerComponent?: React.ReactNode;
-  footerComponent?: React.ReactNode;
-  floatingButton?: React.ReactNode;
-  hideFooter?: boolean;
-  edgesFooter?: NativeSafeAreaViewProps["edges"];
-  style?: StyleProp<ViewStyle>;
-  refreshControl?: ScrollViewProps["refreshControl"];
-  /**
-   * Enable keyboard handling with auto-scroll (Android only)
-   * @default false
-   */
-  enableKeyboardHandling?: boolean;
-  /**
-   * Scroll offset when keyboard appears (Android only)
-   * @default 100
-   */
-  keyboardScrollOffset?: number;
-  /**
-   * Extra padding bottom for content to avoid navigation bar (Android only)
-   * @default 80
-   */
-  contentPaddingBottom?: number;
-  /**
-   * Padding untuk content container (Android only)
-   * Set to 0 untuk tidak ada padding, atau custom value sesuai kebutuhan
-   * @default 16
-   */
-  contentPadding?: number;
-  /**
-   * 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 {
-  children: React.ReactNode;
-  listData?: never;
-  renderItem?: never;
-}
-
-interface ListModeProps extends BaseProps {
-  children?: never;
-  listData?: any[];
-  renderItem?: FlatListProps<any>["renderItem"];
-  onEndReached?: () => void;
-  ListHeaderComponent?: React.ReactElement | null;
-  ListFooterComponent?: React.ReactElement | null;
-  ListEmptyComponent?: React.ReactElement | null;
-  keyExtractor?: FlatListProps<any>["keyExtractor"];
-}
-
-type AndroidWrapperProps = StaticModeProps | ListModeProps;
-
-export function AndroidWrapper(props: AndroidWrapperProps) {
-  const {
-    withBackground = false,
-    headerComponent,
-    footerComponent,
-    floatingButton,
-    hideFooter = false,
-    edgesFooter = [],
-    style,
-    refreshControl,
-    enableKeyboardHandling = false,
-    keyboardScrollOffset,
-    contentPaddingBottom,
-    contentPadding,
-    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(finalKeyboardScrollOffset)
-    : null;
-
-  const renderContainer = (content: React.ReactNode) => {
-    if (withBackground) {
-      return (
-        <ImageBackground
-          source={assetBackground}
-          resizeMode="cover"
-          style={GStyles.imageBackground}
-        >
-          <View style={[GStyles.containerWithBackground, style]}>
-            {content}
-          </View>
-        </ImageBackground>
-      );
-    }
-    return <View style={[GStyles.container, style]}>{content}</View>;
-  };
-
-  // 🔹 Mode Dinamis (FlatList)
-  if ("listData" in props) {
-    const listProps = props as ListModeProps;
-
-    return (
-      <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-        {headerComponent && (
-          <View style={GStyles.stickyHeader}>{headerComponent}</View>
-        )}
-        <FlatList
-            style={{ flex: 1 }}
-            data={listProps.listData}
-            renderItem={listProps.renderItem}
-            keyExtractor={
-              listProps.keyExtractor ||
-              ((item, index) => `${String(item.id)}-${index}`)
-            }
-            refreshControl={refreshControl}
-            onEndReached={listProps.onEndReached}
-            onEndReachedThreshold={0.5}
-            ListHeaderComponent={listProps.ListHeaderComponent}
-            ListFooterComponent={listProps.ListFooterComponent}
-            ListEmptyComponent={listProps.ListEmptyComponent}
-            contentContainerStyle={{
-              flexGrow: disableFlexGrow ? 0 : 1,
-              paddingBottom:
-                (footerComponent && !hideFooter ? OS_HEIGHT : 0) +
-                finalContentPaddingBottom,
-              padding: finalContentPadding,
-            }}
-            keyboardShouldPersistTaps="handled"
-            removeClippedSubviews={false}
-            stickyHeaderIndices={[]}
-            nestedScrollEnabled={true}
-          />
-
-        {/* Footer - Fixed di bawah dengan width 100% */}
-        {footerComponent && !hideFooter && (
-          <SafeAreaView
-            edges={["bottom"]}
-            style={{ backgroundColor: MainColor.darkblue, width: "100%" }}
-          >
-            <View style={{ width: "100%" }}>{footerComponent}</View>
-          </SafeAreaView>
-        )}
-
-        {!footerComponent && !hideFooter && (
-          <SafeAreaView
-            edges={["bottom"]}
-            style={{ backgroundColor: MainColor.darkblue }}
-          />
-        )}
-
-        {floatingButton && (
-          <View style={GStyles.floatingContainer}>{floatingButton}</View>
-        )}
-      </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 (
-    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-      {headerComponent && (
-        <View style={GStyles.stickyHeader}>{headerComponent}</View>
-      )}
-
-      <ScrollView
-        ref={keyboardForm?.scrollViewRef}
-        onScroll={keyboardForm?.handleScroll}
-        scrollEventThrottle={16}
-        refreshControl={refreshControl}
-        style={{ flex: 1 }}
-        contentContainerStyle={{
-          flexGrow: disableFlexGrow ? 0 : 1,
-          paddingBottom:
-            (footerComponent && !hideFooter ? OS_HEIGHT : 0) +
-            finalContentPaddingBottom,
-          padding: finalContentPadding,
-        }}
-        keyboardShouldPersistTaps="handled"
-        showsVerticalScrollIndicator={false}
-      >
-        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-          {renderContainer(childrenWithFocus)}
-        </TouchableWithoutFeedback>
-      </ScrollView>
-
-      {/* Footer - Fixed di bawah dengan width 100% */}
-      {footerComponent && !hideFooter && (
-        <SafeAreaView
-          edges={["bottom"]}
-          style={{
-            backgroundColor: MainColor.darkblue,
-            width: "100%",
-            position: "absolute",
-            bottom: 0,
-            left: 0,
-            right: 0,
-          }}
-        >
-          <View style={{ width: "100%" }}>{footerComponent}</View>
-        </SafeAreaView>
-      )}
-
-      {!footerComponent && !hideFooter && (
-        <SafeAreaView
-          edges={["bottom"]}
-          style={{ backgroundColor: MainColor.darkblue }}
-        />
-      )}
-
-      {floatingButton && (
-        <View style={GStyles.floatingContainer}>{floatingButton}</View>
-      )}
-    </View>
-  );
-}
-
-export default AndroidWrapper;

components/_ShareComponent/FormWrapper.tsx

@@ -29,7 +29,7 @@ export function FormWrapper({
   contentPaddingBottom = 100,
   contentPadding = 16,
 }: FormWrapperProps) {
-  const { scrollViewRef, handleScroll } = useKeyboardForm(scrollOffset);
+  const { scrollViewRef, handleInputFocus } = useKeyboardForm(scrollOffset);
 
   return (
     <KeyboardAvoidingView
@@ -38,8 +38,6 @@ export function FormWrapper({
     >
       <ScrollView
         ref={scrollViewRef}
-        onScroll={handleScroll}
-        scrollEventThrottle={16}
         style={{ flex: 1 }}
         contentContainerStyle={{
           flexGrow: 1,

components/_ShareComponent/IOSWrapper.tsx

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

components/_ShareComponent/NewWrapper_V2.tsx

@@ -45,10 +45,14 @@ interface BaseProps {
    */
   contentPaddingBottom?: number;
   /**
-   * Padding untuk content container (default: 16)
-   * Set to 0 untuk tidak ada padding, atau custom value sesuai kebutuhan
+   * Padding Top untuk content container (default: 8)
    */
-  contentPadding?: number;
+  contentPaddingTop?: number;
+  /**
+   * Padding Horizontal untuk content container (default: 0)
+   * Set ke 16 atau lebih jika butuh spacing di kiri-kanan
+   */
+  contentPaddingHorizontal?: number;
 }
 
 interface StaticModeProps extends BaseProps {
@@ -83,7 +87,8 @@ export function NewWrapper_V2(props: NewWrapper_V2_Props) {
     enableKeyboardHandling = false,
     keyboardScrollOffset = 100,
     contentPaddingBottom = 80, // Default 80 untuk navigasi device
-    contentPadding = 16, // Default 16 untuk padding konsisten
+    contentPaddingTop = 8, // Default 8 untuk spacing atas
+    contentPaddingHorizontal = 0, // Default 0 agar aman untuk layout existing
   } = props;
 
   const assetBackground = require("../../assets/images/main-background.png");
@@ -137,8 +142,9 @@ export function NewWrapper_V2(props: NewWrapper_V2_Props) {
           ListEmptyComponent={listProps.ListEmptyComponent}
           contentContainerStyle={{
             flexGrow: 1,
+            paddingTop: contentPaddingTop,
+            paddingHorizontal: contentPaddingHorizontal,
             paddingBottom: (footerComponent && !hideFooter ? OS_HEIGHT : 0) + contentPaddingBottom,
-            padding: contentPadding,
           }}
           keyboardShouldPersistTaps="handled"
         />
@@ -186,8 +192,9 @@ export function NewWrapper_V2(props: NewWrapper_V2_Props) {
         style={{ flex: 1 }}
         contentContainerStyle={{
           flexGrow: 1,
+          paddingTop: contentPaddingTop,
+          paddingHorizontal: contentPaddingHorizontal,
           paddingBottom: (footerComponent && !hideFooter ? OS_HEIGHT : 0) + contentPaddingBottom,
-          padding: contentPadding,
         }}
         keyboardShouldPersistTaps="handled"
         showsVerticalScrollIndicator={false}

components/_ShareComponent/OS_Wrapper.tsx

@@ -1,157 +0,0 @@
-// @/components/OS_Wrapper.tsx
-// OS-Specific Wrapper - Automatically routes to iOSWrapper or AndroidWrapper
-// iOS: Uses NewWrapper (stable for iOS)
-// Android: Uses NewWrapper_V2 (with keyboard handling)
-
-import { Platform } from "react-native";
-import type { ScrollViewProps, FlatListProps } from "react-native";
-import {
-  NativeSafeAreaViewProps,
-} from "react-native-safe-area-context";
-import type { StyleProp, ViewStyle } from "react-native";
-import IOSWrapper from "./IOSWrapper";
-import AndroidWrapper from "./AndroidWrapper";
-
-// ========== Base Props ==========
-interface BaseProps {
-  withBackground?: boolean;
-  headerComponent?: React.ReactNode;
-  footerComponent?: React.ReactNode;
-  floatingButton?: React.ReactNode;
-  hideFooter?: boolean;
-  edgesFooter?: NativeSafeAreaViewProps["edges"];
-  style?: StyleProp<ViewStyle>;
-  refreshControl?: ScrollViewProps["refreshControl"];
-  disableFlexGrow?: boolean;
-}
-
-// ========== Static Mode Props ==========
-interface StaticModeProps extends BaseProps {
-  children: React.ReactNode;
-  listData?: never;
-  renderItem?: never;
-}
-
-// ========== List Mode Props ==========
-interface ListModeProps extends BaseProps {
-  children?: never;
-  listData?: any[];
-  renderItem?: FlatListProps<any>["renderItem"];
-  onEndReached?: () => void;
-  ListHeaderComponent?: React.ReactElement | null;
-  ListFooterComponent?: React.ReactElement | null;
-  ListEmptyComponent?: React.ReactElement | null;
-  keyExtractor?: FlatListProps<any>["keyExtractor"];
-}
-
-// ========== Keyboard Handling Props (Android only) ==========
-interface KeyboardHandlingProps {
-  /**
-   * Enable keyboard handling with auto-scroll (Android only)
-   * iOS ignores this prop
-   * @default false
-   */
-  enableKeyboardHandling?: boolean;
-
-  /**
-   * Scroll offset when keyboard appears (Android only)
-   * iOS ignores this prop
-   * @default 100
-   */
-  keyboardScrollOffset?: number;
-
-  /**
-   * Extra padding bottom for content (Android only)
-   * iOS ignores this prop
-   * @default 80
-   */
-  contentPaddingBottom?: number;
-
-  /**
-   * Padding untuk content container (Android only)
-   * iOS ignores this prop
-   * @default 16
-   */
-  contentPadding?: number;
-}
-
-// ========== Final Props Types ==========
-type OS_WrapperStaticProps = StaticModeProps & KeyboardHandlingProps;
-type OS_WrapperListProps = ListModeProps & KeyboardHandlingProps;
-
-type OS_WrapperProps = OS_WrapperStaticProps | OS_WrapperListProps;
-
-/**
- * OS_Wrapper - Automatically selects iOSWrapper or AndroidWrapper based on platform
- * 
- * Features:
- * - Auto platform detection
- * - Optional keyboard handling for Android forms
- * - Unified API for all use cases
- *
- * @example Static Mode (Simple Content)
- * ```tsx
- * <OS_Wrapper>
- *   <YourContent />
- * </OS_Wrapper>
- * ```
- *
- * @example List Mode (with pagination)
- * ```tsx
- * <OS_Wrapper
- *   listData={data}
- *   renderItem={({ item }) => <ItemCard item={item} />}
- *   ListEmptyComponent={<EmptyState />}
- *   onEndReached={loadMore}
- * />
- * ```
- *
- * @example Form Mode (with keyboard handling - Android only)
- * ```tsx
- * <OS_Wrapper
- *   enableKeyboardHandling
- *   keyboardScrollOffset={150}
- *   contentPaddingBottom={100}
- *   footerComponent={<SubmitButton />}
- * >
- *   <FormContent />
- * </OS_Wrapper>
- * ```
- */
-export function OS_Wrapper(props: OS_WrapperProps) {
-  const {
-    enableKeyboardHandling = false,
-    keyboardScrollOffset = 100,
-    contentPaddingBottom = 100,
-    contentPadding = 0,
-    disableFlexGrow = false,
-    ...wrapperProps
-  } = props;
-
-  // iOS uses IOSWrapper (based on NewWrapper)
-  if (Platform.OS === "ios") {
-    // Keyboard handling props are ignored on iOS
-    return <IOSWrapper {...(wrapperProps as any)} disableFlexGrow={disableFlexGrow} />;
-  }
-
-  // Android uses AndroidWrapper (with keyboard handling support)
-  return (
-    <AndroidWrapper
-      {...(wrapperProps as any)}
-      enableKeyboardHandling={enableKeyboardHandling}
-      keyboardScrollOffset={keyboardScrollOffset}
-      contentPaddingBottom={contentPaddingBottom}
-      contentPadding={contentPadding}
-      disableFlexGrow={disableFlexGrow}
-    />
-  );
-}
-
-// Re-export individual wrappers for direct usage if needed
-export { default as IOSWrapper } from "./IOSWrapper";
-export { default as AndroidWrapper } from "./AndroidWrapper";
-
-// Legacy export untuk backward compatibility
-export { IOSWrapper as iOSWrapper };
-
-export default OS_Wrapper;

components/_ShareComponent/PageWrapper.tsx

@@ -0,0 +1,229 @@
+/**
+ * PageWrapper - Platform-specific wrapper component
+ * 
+ * Routes to:
+ * - iOS: NewWrapper (stable, tested)
+ * - Android: NewWrapper_V2 (with keyboard handling fix)
+ * 
+ * Props are automatically adjusted based on platform.
+ * 
+ * @example
+ * <PageWrapper
+ *   footerComponent={buttonFooter}
+ *   enableKeyboardHandling
+ *   keyboardScrollOffset={100}
+ * >
+ *   {children}
+ * </PageWrapper>
+ */
+
+import { Platform } from "react-native";
+import { NewWrapper_V2 } from "./NewWrapper_V2";
+import type { NativeSafeAreaViewProps } from "react-native-safe-area-context";
+import type { ScrollViewProps, FlatListProps } from "react-native";
+import NewWrapper from "./NewWrapper";
+
+// ========== Base Props ==========
+interface BaseProps {
+  withBackground?: boolean;
+  headerComponent?: React.ReactNode;
+  footerComponent?: React.ReactNode;
+  floatingButton?: React.ReactNode;
+  hideFooter?: boolean;
+  edgesFooter?: NativeSafeAreaViewProps["edges"];
+  style?: any;
+  refreshControl?: ScrollViewProps["refreshControl"];
+}
+
+// ========== Static Mode Props ==========
+interface StaticModeProps extends BaseProps {
+  children: React.ReactNode;
+  listData?: never;
+  renderItem?: never;
+}
+
+// ========== List Mode Props ==========
+interface ListModeProps extends BaseProps {
+  children?: never;
+  listData?: any[];
+  renderItem?: FlatListProps<any>["renderItem"];
+  onEndReached?: () => void;
+  ListHeaderComponent?: React.ReactElement | null;
+  ListFooterComponent?: React.ReactElement | null;
+  ListEmptyComponent?: React.ReactElement | null;
+  keyExtractor?: FlatListProps<any>["keyExtractor"];
+}
+
+// ========== PageWrapper Props ==========
+interface PageWrapperBaseProps extends BaseProps {
+  /**
+   * Enable keyboard handling (Android only - NewWrapper_V2)
+   * iOS ignores this prop
+   * @default false
+   */
+  enableKeyboardHandling?: boolean;
+  
+  /**
+   * Scroll offset when keyboard appears (Android only)
+   * iOS ignores this prop
+   * @default 100
+   */
+  keyboardScrollOffset?: number;
+  
+  /**
+   * Extra padding bottom for content (Android only)
+   * iOS ignores this prop
+   * @default 80
+   */
+  contentPaddingBottom?: number;
+  
+  /**
+   * Padding Top for content container (Android only)
+   * iOS ignores this prop
+   * @default 8
+   */
+  contentPaddingTop?: number;
+  
+  /**
+   * Padding Horizontal for content container (Android only)
+   * iOS ignores this prop
+   * @default 0
+   */
+  contentPaddingHorizontal?: number;
+}
+
+interface PageWrapperStaticProps extends PageWrapperBaseProps {
+  children: React.ReactNode;
+  listData?: never;
+  renderItem?: never;
+}
+
+interface PageWrapperListProps extends PageWrapperBaseProps {
+  children?: never;
+  listData?: any[];
+  renderItem?: FlatListProps<any>["renderItem"];
+  onEndReached?: () => void;
+  ListHeaderComponent?: React.ReactElement | null;
+  ListFooterComponent?: React.ReactElement | null;
+  ListEmptyComponent?: React.ReactElement | null;
+  keyExtractor?: FlatListProps<any>["keyExtractor"];
+}
+
+type PageWrapperProps = PageWrapperStaticProps | PageWrapperListProps;
+
+export function PageWrapper(props: PageWrapperProps) {
+  const {
+    withBackground,
+    headerComponent,
+    footerComponent,
+    floatingButton,
+    hideFooter,
+    edgesFooter,
+    style,
+    refreshControl,
+    enableKeyboardHandling,
+    keyboardScrollOffset,
+    contentPaddingBottom,
+    contentPaddingTop,
+    contentPaddingHorizontal,
+    ...restProps
+  } = props;
+
+  // ========== Android: Use NewWrapper_V2 with keyboard handling ==========
+  if (Platform.OS === "android") {
+    if ("listData" in props) {
+      // List mode
+      const listProps = props as PageWrapperListProps;
+      return (
+        <NewWrapper_V2
+          listData={listProps.listData}
+          renderItem={listProps.renderItem}
+          onEndReached={listProps.onEndReached}
+          ListHeaderComponent={listProps.ListHeaderComponent}
+          ListFooterComponent={listProps.ListFooterComponent}
+          ListEmptyComponent={listProps.ListEmptyComponent}
+          keyExtractor={listProps.keyExtractor}
+          withBackground={withBackground}
+          headerComponent={headerComponent}
+          footerComponent={footerComponent}
+          floatingButton={floatingButton}
+          hideFooter={hideFooter}
+          edgesFooter={edgesFooter}
+          style={style}
+          refreshControl={refreshControl}
+          enableKeyboardHandling={enableKeyboardHandling}
+          keyboardScrollOffset={keyboardScrollOffset}
+          contentPaddingBottom={contentPaddingBottom}
+          contentPaddingTop={contentPaddingTop}
+          contentPaddingHorizontal={contentPaddingHorizontal}
+        />
+      );
+    }
+
+    // Static mode
+    const staticProps = props as PageWrapperStaticProps;
+    return (
+      <NewWrapper_V2
+        withBackground={withBackground}
+        headerComponent={headerComponent}
+        footerComponent={footerComponent}
+        floatingButton={floatingButton}
+        hideFooter={hideFooter}
+        edgesFooter={edgesFooter}
+        style={style}
+        refreshControl={refreshControl}
+        enableKeyboardHandling={enableKeyboardHandling}
+        keyboardScrollOffset={keyboardScrollOffset}
+        contentPaddingBottom={contentPaddingBottom}
+        contentPaddingTop={contentPaddingTop}
+        contentPaddingHorizontal={contentPaddingHorizontal}
+      >
+        {staticProps.children}
+      </NewWrapper_V2>
+    );
+  }
+
+  // ========== iOS: Use NewWrapper (stable) ==========
+  if ("listData" in props) {
+    // List mode
+    const listProps = props as PageWrapperListProps;
+    return (
+      <NewWrapper
+        listData={listProps.listData}
+        renderItem={listProps.renderItem}
+        onEndReached={listProps.onEndReached}
+        ListHeaderComponent={listProps.ListHeaderComponent}
+        ListFooterComponent={listProps.ListFooterComponent}
+        ListEmptyComponent={listProps.ListEmptyComponent}
+        keyExtractor={listProps.keyExtractor}
+        withBackground={withBackground}
+        headerComponent={headerComponent}
+        footerComponent={footerComponent}
+        floatingButton={floatingButton}
+        hideFooter={hideFooter}
+        edgesFooter={edgesFooter}
+        style={style}
+        refreshControl={refreshControl}
+      />
+    );
+  }
+
+  // Static mode
+  const staticProps = props as PageWrapperStaticProps;
+  return (
+    <NewWrapper
+      withBackground={withBackground}
+      headerComponent={headerComponent}
+      footerComponent={footerComponent}
+      floatingButton={floatingButton}
+      hideFooter={hideFooter}
+      edgesFooter={edgesFooter}
+      style={style}
+      refreshControl={refreshControl}
+    >
+      {staticProps.children}
+    </NewWrapper>
+  );
+}
+
+export default PageWrapper;

components/index.ts

@@ -65,8 +65,7 @@ import NewWrapper from "./_ShareComponent/NewWrapper";
 import BasicWrapper from "./_ShareComponent/BasicWrapper";
 import { FormWrapper } from "./_ShareComponent/FormWrapper";
 import { NewWrapper_V2 } from "./_ShareComponent/NewWrapper_V2";
-// OS-Specific Wrappers
-import OS_Wrapper, { IOSWrapper, AndroidWrapper } from "./_ShareComponent/OS_Wrapper";
+import { PageWrapper } from "./_ShareComponent/PageWrapper";
 
 // Progress
 import ProgressCustom from "./Progress/ProgressCustom";
@@ -134,10 +133,7 @@ export {
   BasicWrapper,
   FormWrapper,
   NewWrapper_V2,
-  // OS-Specific Wrappers
-  OS_Wrapper,
-  IOSWrapper,
-  AndroidWrapper,
+  PageWrapper,
   // Stack
   StackCustom,
   TabBarBackground,

constants/constans-value.ts

@@ -4,10 +4,6 @@ export {
   OS_ANDROID_HEIGHT,
   OS_IOS_HEIGHT,
   OS_HEIGHT,
-  OS_ANDROID_PADDING_TOP,
-  OS_IOS_PADDING_TOP,
-  OS_PADDING_TOP,
-  PADDING_INLINE,
   TEXT_SIZE_SMALL,
   TEXT_SIZE_MEDIUM,
   TEXT_SIZE_LARGE,
@@ -27,15 +23,10 @@ export {
 };
 
 // OS Height
-const OS_ANDROID_HEIGHT = 60
+const OS_ANDROID_HEIGHT = 65
 const OS_IOS_HEIGHT = 80
 const OS_HEIGHT = Platform.OS === "ios" ? OS_IOS_HEIGHT : OS_ANDROID_HEIGHT
 
-// OS Padding Top
-const OS_ANDROID_PADDING_TOP = 6
-const OS_IOS_PADDING_TOP = 12
-const OS_PADDING_TOP = Platform.OS === "ios" ? OS_IOS_PADDING_TOP : OS_ANDROID_PADDING_TOP
-
 // Text Size
 const TEXT_SIZE_SMALL = 12;
 const TEXT_SIZE_MEDIUM = 14;
@@ -56,7 +47,6 @@ const DRAWER_HEIGHT = 500; // tinggi drawer5
 const RADIUS_BUTTON = 50
 
 // Padding
-const PADDING_INLINE = 16
 const PADDING_EXTRA_SMALL = 10
 const PADDING_SMALL = 12
 const PADDING_MEDIUM = 16