feat: Complete User Phase 9 Investment screens migration + note known upload issue

- Migrate 24 investment screens to OS_Wrapper (tabs, list, detail, forms, transaction flow)
- Add contentPadding={PADDING_INLINE} to 9 list/tabs screens for consistent spacing
- Add enableKeyboardHandling to 6 form screens
- Fix investment tabs layout height to use OS_IOS_HEIGHT/OS_ANDROID_HEIGHT constants
- Update TASK-005 with known issue: upload image returns 500 error in dev env
- Note: Investment feature not fully complete - upload issue needs investigation tomorrow

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

.gitignore

@@ -81,4 +81,7 @@ yarn-error.*
 # typescript
 *.tsbuildinfo
 
+# secrets
+secrets/
+
 # @end expo-cli

QWEN.md

@@ -513,3 +513,31 @@ 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.

TASKS/fix-phone-input-ios-16.md

@@ -1,369 +0,0 @@
-# Fix Phone Number Input - iOS 16+ Compatibility
-
-## 📋 Ringkasan Task
-Memperbaiki masalah phone number input pada `screens/Authentication/LoginView.tsx` yang tidak berfungsi dengan baik pada iOS versi 16 ke atas.
-
----
-
-## 🎯 Tujuan
-1. Fix keyboard overlay issues pada iOS 16+
-2. Perbaiki layout measurement dan safe area
-3. Pastikan input phone number responsive di semua device
-4. Maintain UX yang konsisten dengan Android
-
----
-
-## 📁 File yang Terlibat
-
-### File Utama
-- **Target**: `screens/Authentication/LoginView.tsx`
-
-### File Pendukung
-- `components/TextInput/TextInputCustom.tsx` - Alternatif custom input
-- `styles/global-styles.ts` - Styling adjustments
-- `package.json` - Update dependencies (jika perlu)
-
-### Dependencies Terkait
-- `react-native-international-phone-number`: ^0.9.3
-- `react-native-keyboard-controller`: ^1.18.6
-
----
-
-## 🔍 Analisis Masalah
-
-### Issues pada iOS 16+
-
-#### 1. **Keyboard Overlay Problem**
-**Symptom**: Input field tertutup keyboard saat aktif
-**Cause**: 
-- Safe area insets tidak terhitung dengan benar
-- Keyboard animation tidak sinkron dengan layout
-- `react-native-keyboard-controller` tidak terintegrasi dengan baik
-
-#### 2. **Layout Measurement Issues**
-**Symptom**: Input field berubah ukuran secara tidak terduga
-**Cause**:
-- Dynamic Type settings mempengaruhi layout
-- Font scaling pada iOS 16+ berbeda
-- Container tidak memiliki fixed height
-
-#### 3. **Focus Behavior**
-**Symptom**: Input tidak auto-scroll saat di-focus
-**Cause**:
-- ScrollView/KeyboardAvoidingView configuration salah
-- Keyboard dismissing behavior tidak konsisten
-
-#### 4. **Visual Glitches**
-**Symptom**: Country flag dropdown tidak muncul atau terpotong
-**Cause**:
-- Z-index issues pada iOS
-- Modal/Popover rendering problems
-
----
-
-## 🎨 Solusi yang Direkomendasikan
-
-### Option 1: **KeyboardAvoidingView Enhancement** (RECOMMENDED)
-**Effort**: Medium
-**Impact**: High
-
-```typescript
-import { KeyboardAvoidingView, Platform } from "react-native";
-
-<KeyboardAvoidingView
-  behavior={Platform.OS === "ios" ? "padding" : "height"}
-  keyboardVerticalOffset={Platform.OS === "ios" ? 90 : 50}
-  style={{ flex: 1 }}
->
-  <ViewWrapper>
-    {/* Content */}
-  </ViewWrapper>
-</KeyboardAvoidingView>
-```
-
-**Keuntungan**:
-- Native solution dari React Native
-- Tidak perlu tambahan library
-- Stabil untuk iOS 16+
-
-**Kekurangan**:
-- Perlu tuning offset untuk setiap device
-- Tidak se-smooth keyboard controller
-
-### Option 2: **React Native Keyboard Controller** (BETTER UX)
-**Effort**: Medium-High
-**Impact**: High
-
-```typescript
-import { KeyboardProvider } from "react-native-keyboard-controller";
-
-// Wrap di root app (sudah ada di _layout.tsx)
-<KeyboardProvider>
-  <App />
-</KeyboardProvider>
-
-// Di LoginView
-import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
-
-<KeyboardAwareScrollView
-  bottomOffset={20}
-  keyboardOffset={10}
->
-  {/* Content */}
-</KeyboardAwareScrollView>
-```
-
-**Keuntungan**:
-- Smooth keyboard animations
-- Better control over keyboard behavior
-- Cross-platform consistency
-
-**Kekurangan**:
-- Perlu verify konfigurasi yang sudah ada
-- Mungkin perlu update library
-
-### Option 3: **Custom Phone Input** (FALLBACK)
-**Effort**: High
-**Impact**: Medium
-
-Membuat custom phone input dengan:
-- TextInputCustom component
-- Country code picker modal
-- Validation logic
-
-**Keuntungan**:
-- Full control atas behavior
-- Tidak depend on third-party issues
-
-**Kekurangan**:
-- Development time lebih lama
-- Perlu testing ekstensif
-- Maintain code sendiri
-
----
-
-## 📝 Breakdown Task
-
-### Task 1: Research & Setup ✅
-- [x] Identifikasi masalah pada iOS 16+
-- [x] Cek dokumentasi library
-- [x] Review existing implementation
-- [ ] Test di iOS simulator (iOS 16+)
-- [ ] Test di device fisik (jika ada)
-
-### Task 2: Implement KeyboardAvoidingView Fix
-- [ ] Wrap ViewWrapper dengan KeyboardAvoidingView
-- [ ] Set behavior berdasarkan Platform
-- [ ] Adjust keyboardVerticalOffset
-- [ ] Test di berbagai ukuran layar
-- [ ] Test landscape mode (jika applicable)
-
-### Task 3: Adjust Layout & Styling
-- [ ] Fix container height/width
-- [ ] Adjust safe area insets
-- [ ] Test dengan Dynamic Type settings
-- [ ] Ensure consistent padding/margin
-
-### Task 4: Test Focus Behavior
-- [ ] Auto-scroll saat focus
-- [ ] Keyboard dismiss saat tap outside
-- [ ] Next/previous field navigation (jika ada)
-- [ ] Input validation on blur
-
-### Task 5: Country Picker Fix
-- [ ] Verify dropdown z-index
-- [ ] Test modal presentation
-- [ ] Ensure flag icons visible
-- [ ] Test search functionality
-
-### Task 6: Testing & QA
-- [ ] Test iOS 16, 17, 18
-- [ ] Test Android (regression)
-- [ ] Test dengan berbagai device sizes
-- [ ] Test accessibility (VoiceOver)
-- [ ] Performance test (no lag)
-
-### Task 7: Documentation
-- [ ] Update code comments
-- [ ] Document iOS-specific workarounds
-- [ ] Add troubleshooting notes
-
----
-
-## 💻 Implementation Guidelines
-
-### Recommended Implementation (Option 1 + 2 Hybrid)
-
-```typescript
-import { KeyboardAvoidingView, Platform } from "react-native";
-import { KeyboardProvider } from "react-native-keyboard-controller";
-
-// Di LoginView.tsx
-export default function LoginView() {
-  return (
-    <ViewWrapper
-      withBackground
-      refreshControl={
-        <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
-      }
-    >
-      <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
-        keyboardVerticalOffset={Platform.OS === "ios" ? 100 : 50}
-        style={{ flex: 1 }}
-      >
-        <View style={[GStyles.authContainer, { paddingBottom: 40 }]}>
-          {/* Title Section */}
-          <View style={GStyles.authContainerTitle}>
-            <Text style={GStyles.authSubTitle}>WELCOME TO</Text>
-            <Spacing height={5} />
-            <Text style={GStyles.authTitle}>HIPMI BADUNG APPS</Text>
-            <Spacing height={5} />
-          </View>
-          
-          <Spacing height={50} />
-          
-          {/* Phone Input - Wrap dengan View untuk stability */}
-          <View style={{ marginBottom: 20 }}>
-            <PhoneInput
-              value={inputValue}
-              onChangePhoneNumber={handleInputValue}
-              selectedCountry={selectedCountry}
-              onChangeSelectedCountry={handleSelectedCountry}
-              defaultCountry="ID"
-              placeholder="Masukkan nomor"
-              // Add iOS-specific props
-              textInputProps={{
-                keyboardType: "phone-pad",
-                autoComplete: "tel",
-                importantForAutofill: "yes",
-              }}
-            />
-          </View>
-          
-          <Spacing />
-          
-          {/* Login Button */}
-          <ButtonCustom
-            onPress={handleLogin}
-            disabled={loadingTerm}
-            isLoading={loading || loadingTerm}
-          >
-            Login
-          </ButtonCustom>
-          
-          <Spacing height={50} />
-          
-          {/* Terms Text */}
-          <Text style={{ ...GStyles.textLabel, textAlign: "center", fontSize: 12 }}>
-            Dengan menggunakan aplikasi ini, Anda telah menyetujui{" "}
-            <Text
-              style={{
-                color: MainColor.yellow,
-                textDecorationLine: "underline",
-              }}
-              onPress={() => {
-                const toUrl = `${url}/terms-of-service.html`;
-                openBrowser(toUrl);
-              }}
-            >
-              Syarat & Ketentuan
-            </Text>{" "}
-            dan seluruh kebijakan privasi yang berlaku.
-          </Text>
-          
-          {/* Version Info */}
-          <Text
-            style={{
-              position: "absolute",
-              bottom: 35,
-              right: 50,
-              fontSize: 10,
-              fontWeight: "thin",
-              fontStyle: "italic",
-              color: MainColor.white_gray,
-            }}
-          >
-            {version} | powered by muku.id
-          </Text>
-        </View>
-      </KeyboardAvoidingView>
-    </ViewWrapper>
-  );
-}
-```
-
-### Styling Adjustments
-
-```typescript
-// styles/global-styles.ts
-export const GStyles = StyleSheet.create({
-  authContainer: {
-    flex: 1,
-    justifyContent: "center",
-    paddingHorizontal: 24,
-    // Add padding bottom untuk keyboard space
-    paddingBottom: Platform.OS === "ios" ? 40 : 20,
-  },
-  // ... existing styles
-});
-```
-
----
-
-## ✅ Acceptance Criteria
-
-### Functional
-- [ ] Input field tidak tertutup keyboard saat focus
-- [ ] Country picker dropdown berfungsi dengan baik
-- [ ] Auto-scroll bekerja smooth saat focus
-- [ ] Keyboard dismiss saat tap outside
-- [ ] Input validation berjalan normal
-
-### Visual
-- [ ] Layout tidak berubah saat keyboard muncul
-- [ ] No visual glitches atau flickering
-- [ ] Country flag icons visible
-- [ ] Consistent spacing dan padding
-
-### Compatibility
-- [ ] iOS 16, 17, 18 - Tested ✅
-- [ ] Android - No regression ✅
-- [ ] iPad - Responsive ✅
-- [ ] Landscape mode - Usable ✅
-
-### Performance
-- [ ] No lag saat typing
-- [ ] Smooth keyboard animations
-- [ ] No memory leaks
-- [ ] Fast input response
-
----
-
-## 🔗 References
-- [React Native KeyboardAvoidingView Docs](https://reactnative.dev/docs/keyboardavoidingview)
-- [react-native-keyboard-controller](https://github.com/kirillzyusko/react-native-keyboard-controller)
-- [react-native-international-phone-number Issues](https://github.com/bluesky01/react-native-international-phone-number/issues)
-- [iOS 16+ Keyboard Changes](https://developer.apple.com/documentation/uikit/uikit)
-
----
-
-## 📊 Estimated Effort
-- **Complexity**: Medium
-- **Time Estimate**: 2-4 jam
-- **Risk Level**: Medium (perlu testing ekstensif di device)
-
----
-
-## 📝 Notes
-- **Priority**: High (login adalah critical path)
-- **Testing**: Wajib test di device fisik jika memungkinkan
-- **Fallback**: Jika Option 1 & 2 gagal, siap untuk implement Option 3 (custom input)
-- **Monitoring**: Add analytics untuk track input completion rate
-
----
-
-**Created**: 2026-03-25
-**Status**: Pending
-**Priority**: High
-**Related Issue**: iOS 16+ keyboard compatibility

android/app/build.gradle

@@ -100,8 +100,8 @@ packagingOptions {
         applicationId 'com.bip.hipmimobileapp'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.0.3"
+        versionCode 5
+        versionName "1.0.2"
 
         buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
     }

android/app/src/debugOptimized/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
+</manifest>

android/app/src/main/AndroidManifest.xml

@@ -37,7 +37,7 @@
       </intent-filter>
       <intent-filter android:autoVerify="true" data-generated="true">
         <action android:name="android.intent.action.VIEW"/>
-        <data android:scheme="https" android:host="cld-dkr-hipmi-stg.wibudev.com" android:pathPrefix="/"/>
+        <data android:scheme="https" android:host="hipmi.muku.id" android:pathPrefix="/"/>
         <category android:name="android.intent.category.BROWSABLE"/>
         <category android:name="android.intent.category.DEFAULT"/>
       </intent-filter>

android/build.gradle

@@ -6,32 +6,17 @@ buildscript {
     mavenCentral()
   }
   dependencies {
-    classpath 'com.google.gms:google-services:4.4.1'
+        classpath 'com.google.gms:google-services:4.4.1'
     classpath('com.android.tools.build:gradle')
     classpath('com.facebook.react:react-native-gradle-plugin')
     classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
   }
 }
 
-allprojects {
-  repositories {
-    google()
-    mavenCentral()
-    maven { url 'https://www.jitpack.io' }
-  }
-}
-
-apply plugin: "expo-root-project"
-apply plugin: "com.facebook.react.rootproject"
-// @generated begin @rnmapbox/maps-v2-maven - expo prebuild (DO NOT MODIFY) sync-d4ccbfdff48fdba3138b02a8ba41b9722af001d8
-
 allprojects {
   repositories {
     maven {
       url 'https://api.mapbox.com/downloads/v2/releases/maven'
-      // Authentication is no longer required as per Mapbox's removal of download token requirement
-      // See: https://github.com/mapbox/mapbox-maps-flutter/issues/775
-      // Keeping this as optional for backward compatibility
       def token = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: System.getenv('RNMAPBOX_MAPS_DOWNLOAD_TOKEN')
       if (token) {
         authentication { basic(BasicAuthentication) }
@@ -41,7 +26,11 @@ allprojects {
         }
       }
     }
+    google()
+    mavenCentral()
+    maven { url 'https://www.jitpack.io' }
   }
 }
 
-// @generated end @rnmapbox/maps-v2-maven
+apply plugin: "expo-root-project"
+apply plugin: "com.facebook.react.rootproject"

app.config.js

@@ -15,7 +15,7 @@ require("dotenv").config();
 export default {
   name: "HIPMI Badung Connect",
   slug: "hipmi-mobile",
-  version: "1.0.3",
+  version: "1.0.2",
   orientation: "portrait",
   icon: "./assets/images/icon.png",
   scheme: "hipmimobile",
@@ -25,27 +25,27 @@ export default {
   ios: {
     supportsTablet: true,
     bundleIdentifier: "com.anonymous.hipmi-mobile",
-    googleServicesFile: "./ios/HIPMIBadungConnect/GoogleService-Info.plist",
+    googleServicesFile: "./secrets/GoogleService-Info.plist",
     infoPlist: {
       ITSAppUsesNonExemptEncryption: false,
       NSLocationWhenInUseUsageDescription:
         "Aplikasi membutuhkan akses lokasi untuk menampilkan peta.",
     },
     associatedDomains: [
-      "applinks:cld-dkr-hipmi-stg.wibudev.com",
+      "applinks:hipmi.muku.id",
     ],
     buildNumber: "7",
   },
 
   android: {
-    googleServicesFile: "./google-services.json",
+    googleServicesFile: "./secrets/google-services.json",
     adaptiveIcon: {
       foregroundImage: "./assets/images/splash-icon.png",
       backgroundColor: "#ffffff",
     },
     edgeToEdgeEnabled: true,
     package: "com.bip.hipmimobileapp",
-    versionCode: 1,
+    versionCode: 5,
     // softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
     intentFilters: [
       {
@@ -54,7 +54,7 @@ export default {
         data: [
           {
             scheme: "https",
-            host: "cld-dkr-hipmi-stg.wibudev.com",
+            host: "hipmi.muku.id",
             pathPrefix: "/",
           },
         ],
@@ -70,6 +70,7 @@ export default {
   },
 
   plugins: [
+    "./plugins/withCustomConfig",
     "expo-router",
     "expo-web-browser",
     [

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

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

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

@@ -2,35 +2,64 @@ import { IconHome } from "@/components/_Icon";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { Tabs } 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";
+
+function CollaborationTabsWrapper() {
+  const insets = useSafeAreaInsets();
+  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
 
-export default function CollaborationTabsLayout() {
   return (
-    <Tabs screenOptions={TabsStyles}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Beranda",
-          tabBarIcon: ({ color }) => <IconHome color={color} />,
+    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
+      <Tabs
+        screenOptions={{
+          ...TabsStyles,
+          tabBarStyle: Platform.select({
+            ios: {
+              borderTopWidth: 0,
+              paddingTop: 12,
+              height: 80,
+            },
+            android: {
+              borderTopWidth: 0,
+              paddingTop: 5,
+              height: 70 + paddingBottom,
+            },
+          }),
         }}
-      />
-      <Tabs.Screen
-        name="participant"
-        options={{
-          title: "Partisipan",
-          tabBarIcon: ({ color }) => (
-            <Ionicons size={20} name="people" color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="group"
-        options={{
-          title: "Grup",
-          tabBarIcon: ({ color }) => (
-            <Ionicons size={20} name="chatbox-ellipses" color={color} />
-          ),
-        }}
-      />
-    </Tabs>
+      >
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: "Beranda",
+            tabBarIcon: ({ color }) => <IconHome color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="participant"
+          options={{
+            title: "Partisipan",
+            tabBarIcon: ({ color }) => (
+              <Ionicons size={20} name="people" color={color} />
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="group"
+          options={{
+            title: "Grup",
+            tabBarIcon: ({ color }) => (
+              <Ionicons size={20} name="chatbox-ellipses" color={color} />
+            ),
+          }}
+        />
+      </Tabs>
+    </View>
   );
 }
+
+export default function CollaborationTabsLayout() {
+  return <CollaborationTabsWrapper />;
+}

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 (
-    <ViewWrapper>
+    <OS_Wrapper>
       <StackCustom>
         <Image
           source={require("@/assets/images/constants/crowd-hipmi.png")}
@@ -63,6 +63,6 @@ export default function Crowdfunding() {
           </BaseBox>
         ))}
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

app/(application)/(user)/delete-account.tsx

@@ -3,10 +3,10 @@ import {
   BaseBox,
   ButtonCustom,
   CenterCustom,
+  OS_Wrapper,
   StackCustom,
   TextCustom,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import { useAuth } from "@/hooks/use-auth";
 import { apiDeleteUser } from "@/service/api-client/api-user";
@@ -68,7 +68,10 @@ export default function DeleteAccount() {
 
   return (
     <>
-      <ViewWrapper>
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
+      >
         <StackCustom>
           <BaseBox>
             <StackCustom>
@@ -105,7 +108,7 @@ export default function DeleteAccount() {
             </StackCustom>
           </BaseBox>
         </StackCustom>
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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

@@ -1,37 +1,66 @@
 import { IconHome, IconStatus } from "@/components/_Icon";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { ICON_SIZE_SMALL, OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
 import { TabsStyles } from "@/styles/tabs-styles";
 import {
     FontAwesome5
 } from "@expo/vector-icons";
 import { Tabs } 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";
+
+function DonationTabsWrapper() {
+  const insets = useSafeAreaInsets();
+  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
 
-export default function InvestmentTabsLayout() {
   return (
-    <Tabs screenOptions={TabsStyles}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Beranda",
-          tabBarIcon: ({ color }) => <IconHome color={color} />,
+    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
+      <Tabs
+        screenOptions={{
+          ...TabsStyles,
+          tabBarStyle: Platform.select({
+            ios: {
+              borderTopWidth: 0,
+              paddingTop: 12,
+              height: OS_IOS_HEIGHT,
+            },
+            android: {
+              borderTopWidth: 0,
+              paddingTop: 5,
+              height: OS_ANDROID_HEIGHT + paddingBottom,
+            },
+          }),
         }}
-      />
-      <Tabs.Screen
-        name="status"
-        options={{
-          title: "Galang Dana",
-          tabBarIcon: ({ color }) => <IconStatus color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="my-donation"
-        options={{
-          title: "Donasi Saya",
-          tabBarIcon: ({ color }) => (
-            <FontAwesome5 name="donate" color={color} size={ICON_SIZE_SMALL} />
-          ),
-        }}
-      />
-    </Tabs>
+      >
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: "Beranda",
+            tabBarIcon: ({ color }) => <IconHome color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="status"
+          options={{
+            title: "Galang Dana",
+            tabBarIcon: ({ color }) => <IconStatus color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="my-donation"
+          options={{
+            title: "Donasi Saya",
+            tabBarIcon: ({ color }) => (
+              <FontAwesome5 name="donate" color={color} size={ICON_SIZE_SMALL} />
+            ),
+          }}
+        />
+      </Tabs>
+    </View>
   );
 }
+
+export default function DonationTabsLayout() {
+  return <DonationTabsWrapper />;
+}

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,7 +105,9 @@ export default function DonationEditNews() {
   };
 
   return (
-    <ViewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom
@@ -165,6 +167,6 @@ export default function DonationEditNews() {
         <Spacing />
       </StackCustom>
       <Spacing />
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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,6 +28,7 @@ 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();
@@ -71,11 +72,11 @@ export default function DonationNews() {
           ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper>
         <BaseBox>
           <StackCustom>
-            <TextCustom style={{ alignSelf: "flex-end" }}>
-              {formatChatTime(data?.createdAt)}
+            <TextCustom color="gray" size={"small"} style={{ alignSelf: "flex-end" }}>
+              {dateTimeView({date: data?.createdAt})}
             </TextCustom>
 
             {data && data.imageId && (
@@ -89,7 +90,7 @@ export default function DonationNews() {
             <TextCustom>{data?.deskripsi || "-"}</TextCustom>
           </StackCustom>
         </BaseBox>
-      </ViewWrapper>
+      </OS_Wrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

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

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 (
-    <ViewWrapper>
+    <OS_Wrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -105,6 +105,6 @@ export default function DonasiFailed() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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,8 +101,7 @@ export default function DonationInvoice() {
 
   return (
     <>
-      <ViewWrapper
-        hideFooter
+      <OS_Wrapper
         footerComponent={
           <BoxButtonOnFooter>
             <ButtonCustom
@@ -222,7 +221,7 @@ export default function DonationInvoice() {
           </BaseBox>
         </StackCustom>
         <Spacing />
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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

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

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 (
-    <ViewWrapper>
+    <OS_Wrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -105,7 +105,7 @@ export default function DonationSuccess() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }
 

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 (
     <>
-      <ViewWrapper footerComponent={bottomComponent}>
+      <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250} 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>
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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

@@ -2,7 +2,7 @@ import {
   BaseBox,
   BoxButtonOnFooter,
   ButtonCustom,
-  ViewWrapper,
+  OS_Wrapper,
 } 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 (
-    <ViewWrapper footerComponent={buttonSubmit()}>
+    <OS_Wrapper footerComponent={buttonSubmit()}>
       <RadioGroup value={select} onChange={setSelect}>
         {_.isEmpty(listBank)
           ? []
@@ -101,6 +101,6 @@ export default function DonationSelectBank() {
               </BaseBox>
             ))}
       </RadioGroup>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -4,7 +4,7 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  NewWrapper,
+  OS_Wrapper,
   Spacing,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
@@ -113,7 +113,7 @@ export default function DonasiDetailStatus() {
           ),
         }}
       />
-      <NewWrapper
+      <OS_Wrapper
         refreshControl={
           <RefreshControl
             refreshing={refreshing}
@@ -156,7 +156,7 @@ export default function DonasiDetailStatus() {
             <Spacing />
           </>
         )}
-      </NewWrapper>
+      </OS_Wrapper>
 
       <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 (
-    <ViewWrapper>
+    <OS_Wrapper>
       <StackCustom>
         <TextCustom>{data?.pembukaan || "-"}</TextCustom>
         <DummyLandscapeImage imageId={data?.imageId} />
         <TextCustom>{data?.cerita || "-"}</TextCustom>
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  ViewWrapper,
+  OS_Wrapper,
   StackCustom,
   InformationBox,
   TextInputCustom,
@@ -76,7 +76,7 @@ export default function DonationEditRekening() {
   };
 
   return (
-    <ViewWrapper>
+    <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250}>
       <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 />
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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 (
-    <ViewWrapper>
+    <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250}>
       <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 />
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

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

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

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

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

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

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,8 +126,9 @@ export default function DonationCreate() {
   };
 
   return (
-    <NewWrapper
-      hideFooter
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
       footerComponent={
         <>
           <BoxButtonOnFooter>
@@ -221,6 +222,6 @@ export default function DonationCreate() {
         )}
       </StackCustom>
       <Spacing />
-    </NewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -8,58 +8,83 @@ import AppHeader from "@/components/_ShareComponent/AppHeader";
 import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
 import { TabsStyles } from "@/styles/tabs-styles";
 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_IOS_HEIGHT } from "@/constants/constans-value";
 
-export default function EventTabsLayout() {
+function EventTabsWrapper() {
+  const insets = useSafeAreaInsets();
+  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
   const { from, category } = useLocalSearchParams<{
     from?: string;
     category?: string;
   }>();
 
   return (
-    <Tabs
-      screenOptions={{
-        ...TabsStyles,
-        header: () => (
-          <AppHeader
-            title="Event"
-            left={
-              <BackButtonFromNotification
-                from={from as string}
-                category={category as string}
-              />
-            }
-          />
-        ),
-      }}
-    >
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Beranda",
-          tabBarIcon: ({ color }) => <IconHome color={color} />,
+    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
+      <Tabs
+        screenOptions={{
+          ...TabsStyles,
+          tabBarStyle: Platform.select({
+            ios: {
+              borderTopWidth: 0,
+              paddingTop: 12,
+              height: OS_IOS_HEIGHT,
+            },
+            android: {
+              borderTopWidth: 0,
+              paddingTop: 5,
+              height: OS_ANDROID_HEIGHT + paddingBottom,
+            },
+          }),
+          header: () => (
+            <AppHeader
+              title="Event"
+              left={
+                <BackButtonFromNotification
+                  from={from || ""}
+                  category={category}
+                />
+              }
+            />
+          ),
         }}
-      />
-      <Tabs.Screen
-        name="status"
-        options={{
-          title: "Status",
-          tabBarIcon: ({ color }) => <IconStatus color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="contribution"
-        options={{
-          title: "Kontribusi",
-          tabBarIcon: ({ color }) => <IconContribution color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="history"
-        options={{
-          title: "Riwayat",
-          tabBarIcon: ({ color }) => <IconHistory color={color} />,
-        }}
-      />
-    </Tabs>
+      >
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: "Beranda",
+            tabBarIcon: ({ color }) => <IconHome color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="status"
+          options={{
+            title: "Status",
+            tabBarIcon: ({ color }) => <IconStatus color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="contribution"
+          options={{
+            title: "Kontribusi",
+            tabBarIcon: ({ color }) => <IconContribution color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="history"
+          options={{
+            title: "Riwayat",
+            tabBarIcon: ({ color }) => <IconHistory color={color} />,
+          }}
+        />
+      </Tabs>
+    </View>
   );
 }
+
+export default function EventTabsLayout() {
+  return <EventTabsWrapper />;
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
-import { BasicWrapper, NewWrapper, StackCustom, ViewWrapper } from "@/components";
+import { BasicWrapper, Spacing, StackCustom, ViewWrapper } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MainColor } from "@/constants/color-palet";
@@ -8,19 +8,20 @@ import { useAuth } from "@/hooks/use-auth";
 import { useNotificationStore } from "@/hooks/use-notification-store";
 import Home_BottomFeatureSection from "@/screens/Home/bottomFeatureSection";
 import HeaderBell from "@/screens/Home/HeaderBell";
+import HomeTabs from "@/screens/Home/HomeTabs";
 import { stylesHome } from "@/screens/Home/homeViewStyle";
 import Home_ImageSection from "@/screens/Home/imageSection";
-import TabSection from "@/screens/Home/tabSection";
 import { tabsHome } from "@/screens/Home/tabsList";
 import Home_FeatureSection from "@/screens/Home/topFeatureSection";
 import { apiJobGetAll } from "@/service/api-client/api-job";
 import { apiUser } from "@/service/api-client/api-user";
 import { apiVersion } from "@/service/api-config";
-import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { Redirect, router, Stack, useFocusEffect } from "expo-router";
 import { useCallback, useState } from "react";
-import { RefreshControl, View } from "react-native";
+import { RefreshControl, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Platform } from "react-native";
 
 export default function Application() {
   const { token, user, userData } = useAuth();
@@ -28,6 +29,8 @@ export default function Application() {
   const [refreshing, setRefreshing] = useState(false);
   const { syncUnreadCount } = useNotificationStore();
   const [listData, setListData] = useState<any[] | null>(null);
+  const insets = useSafeAreaInsets();
+  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
 
   useFocusEffect(
     useCallback(() => {
@@ -105,15 +108,6 @@ export default function Application() {
     );
   }
 
-  // if (data && data?.masterUserRoleId !== "1") {
-  //   console.log("User is not admin");
-  //   return (
-  //     <BasicWrapper>
-  //       <Redirect href={`/admin/dashboard`} />
-  //     </BasicWrapper>
-  //   );
-  // }
-
   return (
     <>
       <Stack.Screen
@@ -148,64 +142,61 @@ export default function Application() {
         }}
       />
 
-      <NewWrapper
-        refreshControl={
-          <RefreshControl
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-            tintColor={MainColor.yellow}
-            colors={[MainColor.yellow]}
-          />
-        }
-        footerComponent={
-          data && data ? (
-            <TabSection
-              tabs={tabsHome({
-                acceptedForumTermsAt: data?.acceptedForumTermsAt,
-                profileId: data?.Profile?.id,
-              })}
+      <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
+        <ScrollView
+          style={{ flex: 1 }}
+          contentContainerStyle={{
+            flexGrow: 1,
+            paddingInline: 10,
+            paddingBottom: paddingBottom + 80, // Space for tabs + safe area
+          }}
+          refreshControl={
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+              tintColor={MainColor.yellow}
+              colors={[MainColor.yellow]}
             />
-          ) : (
-            null
-            // <View style={GStyles.tabBar}>
-            //   <View style={[GStyles.tabContainer, { paddingTop: 10 }]}>
-            //     {Array.from({ length: 4 }).map((e, index) => (
-            //       <CustomSkeleton
-            //         key={index}
-            //         height={40}
-            //         width={40}
-            //         radius={100}
-            //       />
-            //     ))}
-            //   </View>
-            // </View>
-          )
-        }
-      >
-        <StackCustom>
-          <Home_ImageSection />
+          }
+          keyboardShouldPersistTaps="handled"
+        >
+          <StackCustom>
+            <Home_ImageSection />
 
-          {data && data ? (
-            <Home_FeatureSection />
-          ) : (
-            <View style={stylesHome.gridContainer}>
-              {Array.from({ length: 4 }).map((item, index) => (
-                <CustomSkeleton
-                  key={index}
-                  style={stylesHome.gridItem}
-                  radius={50}
-                />
-              ))}
-            </View>
-          )}
+            {data && data ? (
+              <Home_FeatureSection />
+            ) : (
+              <View style={stylesHome.gridContainer}>
+                {Array.from({ length: 4 }).map((_, index) => (
+                  <CustomSkeleton
+                    key={index}
+                    style={stylesHome.gridItem}
+                    radius={50}
+                  />
+                ))}
+              </View>
+            )}
 
-          {data ? (
-            <Home_BottomFeatureSection listData={listData} />
-          ) : (
-            <CustomSkeleton height={150} />
-          )}
-        </StackCustom>
-      </NewWrapper>
+            {data ? (
+              <Home_BottomFeatureSection listData={listData} />
+            ) : (
+              <CustomSkeleton height={150} />
+            )}
+          </StackCustom>
+        </ScrollView>
+
+        {/* Home Tabs di bawah */}
+        {data && data ? (
+          <HomeTabs
+            tabs={tabsHome({
+              acceptedForumTermsAt: data?.acceptedForumTermsAt,
+              profileId: data?.Profile?.id,
+            })}
+          />
+        ) : (
+          <View style={{ height: 80 + paddingBottom, backgroundColor: MainColor.darkblue }} />
+        )}
+      </View>
     </>
   );
 }

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

@@ -1,83 +1,108 @@
 import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { ICON_SIZE_SMALL, OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } 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";
 import { useLayoutEffect } from "react";
+import { View } from "react-native";
+import { MainColor } from "@/constants/color-palet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Platform } from "react-native";
 
-export default function InvestmentTabsLayout() {
-  // const navigation = useNavigation();
+function InvestmentTabsWrapper() {
+  const insets = useSafeAreaInsets();
+  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
+  const navigation = useNavigation();
 
-  // const { from, category } = useLocalSearchParams<{
-  //   from?: string;
-  //   category?: string;
-  // }>();
+  const { from, category } = useLocalSearchParams<{
+    from?: string;
+    category?: string;
+  }>();
 
-  // console.log("from", from);
-  // console.log("category", category);
-
-  // // Atur header secara dinamis
-  // useLayoutEffect(() => {
-  //   navigation.setOptions({
-  //     headerLeft: () => (
-  //       <BackButtonFromNotification
-  //         from={from as string}
-  //         category={category as string}
-  //       />
-  //     ),
-  //   });
-  // }, [from, router, navigation]);
+  // Atur header secara dinamis
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+        <BackButtonFromNotification
+          from={from || ""}
+          category={category}
+        />
+      ),
+    });
+  }, [from, category, router, navigation]);
 
   return (
-    <Tabs screenOptions={TabsStyles}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Bursa",
-          tabBarIcon: ({ color }) => (
-            <Ionicons
-              name="bar-chart-outline"
-              color={color}
-              size={ICON_SIZE_SMALL}
-            />
-          ),
+    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
+      <Tabs
+        screenOptions={{
+          ...TabsStyles,
+          tabBarStyle: Platform.select({
+            ios: {
+              borderTopWidth: 0,
+              paddingTop: 12,
+              height: OS_IOS_HEIGHT,
+            },
+            android: {
+              borderTopWidth: 0,
+              paddingTop: 5,
+              height: OS_ANDROID_HEIGHT + paddingBottom,
+            },
+          }),
         }}
-      />
-      <Tabs.Screen
-        name="portofolio"
-        options={{
-          title: "Portofolio",
-          tabBarIcon: ({ color }) => (
-            <Feather name="pie-chart" color={color} size={ICON_SIZE_SMALL} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="my-holding"
-        options={{
-          title: "Saham Saya",
-          tabBarIcon: ({ color }) => (
-            <FontAwesome6
-              name="hand-holding-dollar"
-              color={color}
-              size={ICON_SIZE_SMALL}
-            />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="transaction"
-        options={{
-          title: "Transaksi",
-          tabBarIcon: ({ color }) => (
-            <FontAwesome6
-              name="money-bill-transfer"
-              color={color}
-              size={ICON_SIZE_SMALL}
-            />
-          ),
-        }}
-      />
-    </Tabs>
+      >
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: "Bursa",
+            tabBarIcon: ({ color }) => (
+              <Ionicons
+                name="bar-chart-outline"
+                color={color}
+                size={ICON_SIZE_SMALL}
+              />
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="portofolio"
+          options={{
+            title: "Portofolio",
+            tabBarIcon: ({ color }) => (
+              <Feather name="pie-chart" color={color} size={ICON_SIZE_SMALL} />
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="my-holding"
+          options={{
+            title: "Saham Saya",
+            tabBarIcon: ({ color }) => (
+              <FontAwesome6
+                name="hand-holding-dollar"
+                color={color}
+                size={ICON_SIZE_SMALL}
+              />
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="transaction"
+          options={{
+            title: "Transaksi",
+            tabBarIcon: ({ color }) => (
+              <FontAwesome6
+                name="money-bill-transfer"
+                color={color}
+                size={ICON_SIZE_SMALL}
+              />
+            ),
+          }}
+        />
+      </Tabs>
+    </View>
   );
 }
+
+export default function InvestmentTabsLayout() {
+  return <InvestmentTabsWrapper />;
+}

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,9 +83,12 @@ export default function InvestmentAddDocument() {
   );
 
   return (
-    <>
-      <ViewWrapper footerComponent={buttonFooter}>
-        <StackCustom gap={"xs"}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      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
@@ -124,7 +127,6 @@ export default function InvestmentAddDocument() {
             Upload
           </ButtonCenteredOnly>
         </StackCustom>
-      </ViewWrapper>
-    </>
+    </OS_Wrapper>
   );
 }

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,9 +105,12 @@ export default function InvestmentEditDocument() {
   );
 
   return (
-    <>
-      <ViewWrapper footerComponent={buttonFooter}>
-        <StackCustom gap={"xs"}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      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
@@ -142,7 +145,6 @@ export default function InvestmentEditDocument() {
             Upload
           </ButtonCenteredOnly>
         </StackCustom>
-      </ViewWrapper>
-    </>
+    </OS_Wrapper>
   );
 }

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() {
         }}
       />
 
-      <ViewWrapper>
+      <OS_Wrapper>
         <BaseBox>
           <StackCustom gap={"xs"}>
             <Grid>
@@ -124,7 +124,7 @@ export default function InvestmentDetailHolding() {
           status={"publish"}
           bottomSection={bottomSection}
         />
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* ========= 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() {
           ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper>
         <BaseBox>
           <StackCustom>
             {data && data?.imageId && (
@@ -82,7 +82,7 @@ export default function InvestmentNews() {
             <TextCustom>{(data && data?.deskripsi) || "-"}</TextCustom>
           </StackCustom>
         </BaseBox>
-      </ViewWrapper>
+      </OS_Wrapper>
 
       <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,7 +80,10 @@ export default function InvestmentAddNews() {
   };
 
   return (
-    <ViewWrapper>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+    >
       <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} />
@@ -123,7 +126,6 @@ export default function InvestmentAddNews() {
           Simpan
         </ButtonCustom>
       </StackCustom>
-      <Spacing />
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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 (
-    <ViewWrapper>
+    <OS_Wrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -110,6 +110,6 @@ export default function InvestmentFailed() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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,9 +99,12 @@ export default function InvestmentInvest() {
   };
 
   return (
-    <>
-      <ViewWrapper footerComponent={buttonSubmit()}>
-        <BaseBox>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={buttonSubmit()}
+    >
+      <BaseBox>
           <StackCustom gap={"xs"}>
             <Grid>
               <Grid.Col span={6}>
@@ -165,7 +168,6 @@ export default function InvestmentInvest() {
             </Grid>
           </StackCustom>
         </BaseBox>
-      </ViewWrapper>
-    </>
+    </OS_Wrapper>
   );
 }

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

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

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

@@ -2,7 +2,7 @@ import {
   BaseBox,
   BoxButtonOnFooter,
   ButtonCustom,
-  ViewWrapper,
+  OS_Wrapper,
 } 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 (
-    <ViewWrapper footerComponent={buttonSubmit()}>
+    <OS_Wrapper footerComponent={buttonSubmit()}>
       <RadioGroup value={select} onChange={setSelect}>
         {_.isEmpty(listBank)
           ? []
@@ -96,6 +96,6 @@ export default function InvestmentSelectBank() {
               </BaseBox>
             ))}
       </RadioGroup>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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 (
-    <ViewWrapper>
+    <OS_Wrapper>
       <StackCustom>
         <BaseBox>
           <StackCustom>
@@ -110,6 +110,6 @@ export default function InvestmentSuccess() {
           </StackCustom>
         </BaseBox>
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

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

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

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

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

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

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

@@ -6,7 +6,7 @@ import {
   CenterCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  NewWrapper,
+  OS_Wrapper,
   SelectCustom,
   Spacing,
   StackCustom,
@@ -185,7 +185,9 @@ export default function InvestmentCreate() {
 
   //   const [coba, setCoba] = useState("");
   return (
-    <NewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom
@@ -373,7 +375,6 @@ export default function InvestmentCreate() {
 
         <Spacing />
       </StackCustom>
-      {/* <Spacing height={50} /> */}
-    </NewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -5,28 +5,51 @@ 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 { View } from "react-native";
+import { MainColor } from "@/constants/color-palet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Platform } from "react-native";
 import {
-  router,
-  Tabs,
-  useLocalSearchParams
-} from "expo-router";
+  OS_ANDROID_HEIGHT,
+  OS_ANDROID_PADDING_TOP,
+  OS_IOS_HEIGHT,
+  OS_IOS_PADDING_TOP,
+} from "@/constants/constans-value";
 
-export default function JobTabsLayout() {
+function JobTabsWrapper() {
+  const insets = useSafeAreaInsets();
+  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
   const { from, category } = useLocalSearchParams<{
     from?: string;
     category?: string;
   }>();
 
   return (
-    <>
+    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
       <Tabs
         screenOptions={{
           ...TabsStyles,
+          tabBarStyle: Platform.select({
+            ios: {
+              borderTopWidth: 0,
+              paddingTop: OS_IOS_PADDING_TOP,
+              height: OS_IOS_HEIGHT,
+            },
+            android: {
+              borderTopWidth: 0,
+              paddingTop: OS_ANDROID_PADDING_TOP,
+              height: OS_ANDROID_HEIGHT + paddingBottom,
+            },
+          }),
           header: () => (
             <AppHeader
               title="Job Vacancy"
               left={
-                <BackButtonFromNotification from={from as string} category={category as string} />
+                <BackButtonFromNotification
+                  from={from || ""}
+                  category={category}
+                />
               }
             />
           ),
@@ -56,6 +79,10 @@ export default function JobTabsLayout() {
           }}
         />
       </Tabs>
-    </>
+    </View>
   );
 }
+
+export default function JobTabsLayout() {
+  return <JobTabsWrapper />;
+}

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

@@ -5,9 +5,9 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
+  OS_Wrapper,
   Spacing,
   StackCustom,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconEdit } from "@/components/_Icon";
@@ -23,6 +23,7 @@ import {
   useLocalSearchParams,
 } from "expo-router";
 import { useCallback, useState } from "react";
+import { PADDING_INLINE } from "@/constants/constans-value";
 
 export default function JobDetailStatus() {
   const { id, status } = useLocalSearchParams();
@@ -72,7 +73,7 @@ export default function JobDetailStatus() {
           ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper >
         {isLoadData ? (
           <LoaderCustom />
         ) : (
@@ -83,7 +84,7 @@ export default function JobDetailStatus() {
                 (status === "draft" || status === "reject") && (
                   <ReportBox text={data?.catatan} />
                 )}
-                
+
               <Job_BoxDetailSection data={data} />
               <Job_ButtonStatusSection
                 id={id as string}
@@ -96,7 +97,7 @@ export default function JobDetailStatus() {
             <Spacing />
           </>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

@@ -1,198 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-    BaseBox,
-    ButtonCenteredOnly,
-    ButtonCustom,
-    DummyLandscapeImage,
-    InformationBox,
-    LandscapeFrameUploaded,
-    LoaderCustom,
-    Spacing,
-    StackCustom,
-    TextAreaCustom,
-    TextInputCustom,
-    ViewWrapper,
-} from "@/components";
-import DIRECTORY_ID from "@/constants/directory-id";
-import { apiJobGetOne, apiJobUpdateData } from "@/service/api-client/api-job";
-import {
-    deleteFileService,
-    uploadFileService,
-} from "@/service/upload-service";
-import pickImage from "@/utils/pickImage";
-import { router, useLocalSearchParams } from "expo-router";
-import { useEffect, useState } from "react";
-import Toast from "react-native-toast-message";
+import { Job_ScreenEdit } from "@/screens/Job/ScreenJobEdit";
 
 export default function JobEdit() {
-  const { id } = useLocalSearchParams();
-  const [data, setData] = useState<any>({
-    title: "",
-    content: "",
-    deskripsi: "",
-  });
-  const [isLoadData, setIsLoadData] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const [imageUri, setImageUri] = useState<string | null>(null);
-
-  useEffect(() => {
-    onLoadData();
-  }, [id]);
-
-  const onLoadData = async () => {
-    try {
-      setIsLoadData(true);
-      const response = await apiJobGetOne({ id: id as string });
-      if (response.success) {
-        setData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoadData(false);
-    }
-  };
-
-  const handlerOnUpdate = async () => {
-    if (!data.title || !data.content || !data.deskripsi) {
-      Toast.show({
-        type: "info",
-        text1: "Info",
-        text2: "Harap isi semua data",
-      });
-      return;
-    }
-
-    try {
-      setIsLoading(true);
-      let newImageId = "";
-
-      if (imageUri) {
-        const responseUploadImage = await uploadFileService({
-          imageUri: imageUri,
-          dirId: DIRECTORY_ID.job_image,
-        });
-
-        if (responseUploadImage.success) {
-          newImageId = responseUploadImage.data.id;
-        }
-      }
-
-      if (data?.imageId) {
-        const responseDeleteImage = await deleteFileService({
-          id: data.imageId,
-        });
-
-        if (!responseDeleteImage.success) {
-          console.log("[ERROR DELETE IMAGE]", responseDeleteImage.message);
-        }
-      }
-
-      const newData = {
-        title: data.title,
-        content: data.content,
-        deskripsi: data.deskripsi,
-        imageId: newImageId,
-      };
-
-      const response = await apiJobUpdateData({
-        id: id as string,
-        data: newData,
-        category: "edit",
-      });
-
-      if (response.success) {
-        Toast.show({
-          type: "success",
-          text1: response.message,
-        });
-        router.back();
-      } else {
-        Toast.show({
-          type: "info",
-          text1: "Info",
-          text2: response.message,
-        });
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const buttonSubmit = () => {
-    return (
-      <>
-        <ButtonCustom isLoading={isLoading} onPress={() => handlerOnUpdate()}>
-          Update
-        </ButtonCustom>
-        <Spacing />
-      </>
-    );
-  };
-
-  return (
-    <ViewWrapper>
-      {isLoadData ? (
-        <LoaderCustom />
-      ) : (
-        <StackCustom gap={"xs"}>
-          <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
-
-          {imageUri ? (
-            <LandscapeFrameUploaded image={imageUri as any} />
-          ) : (
-            <BaseBox>
-              <DummyLandscapeImage imageId={data?.imageId} />
-            </BaseBox>
-          )}
-
-          <ButtonCenteredOnly
-            onPress={() => {
-              pickImage({
-                setImageUri,
-              });
-            }}
-            icon="upload"
-          >
-            Upload
-          </ButtonCenteredOnly>
-
-          <Spacing />
-
-          <TextInputCustom
-            label="Judul Lowongan"
-            placeholder="Masukan Judul Lowongan Kerja"
-            required
-            value={data.title}
-            onChangeText={(value) => setData({ ...data, title: value })}
-          />
-
-          <TextAreaCustom
-            label="Syarat & Kualifikasi"
-            placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
-            required
-            showCount
-            maxLength={1000}
-            value={data.content}
-            onChangeText={(value) => setData({ ...data, content: value })}
-          />
-
-          <TextAreaCustom
-            label="Deskripsi Lowongan"
-            placeholder="Masukan Deskripsi Lowongan Kerja"
-            required
-            showCount
-            maxLength={1000}
-            value={data.deskripsi}
-            onChangeText={(value) => setData({ ...data, deskripsi: value })}
-          />
-
-          {buttonSubmit()}
-        </StackCustom>
-      )}
-    </ViewWrapper>
-  );
+  return <Job_ScreenEdit />;
 }

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

@@ -1,168 +1,5 @@
-import {
-  BoxButtonOnFooter,
-  ButtonCenteredOnly,
-  ButtonCustom,
-  InformationBox,
-  LandscapeFrameUploaded,
-  NewWrapper,
-  Spacing,
-  StackCustom,
-  TextAreaCustom,
-  TextInputCustom
-} from "@/components";
-import DIRECTORY_ID from "@/constants/directory-id";
-import { useAuth } from "@/hooks/use-auth";
-import { apiJobCreate } from "@/service/api-client/api-job";
-import { uploadFileService } from "@/service/upload-service";
-import pickImage from "@/utils/pickImage";
-import { router } from "expo-router";
-import { useState } from "react";
-import Toast from "react-native-toast-message";
+import { Job_ScreenCreate } from "@/screens/Job/ScreenJobCreate";
 
 export default function JobCreate() {
-  const nextUrl = "/(application)/(user)/job/(tabs)/status?status=review";
-  const { user } = useAuth();
-  const [isLoading, setIsLoading] = useState(false);
-  const [image, setImage] = useState<string | null>(null);
-  const [data, setData] = useState({
-    title: "",
-    content: "",
-    deskripsi: "",
-    authorId: "",
-  });
-
-  const handlerOnSubmit = async () => {
-    let imageId = "";
-    const newData = {
-      title: data.title,
-      content: data.content,
-      deskripsi: data.deskripsi,
-      authorId: user?.id,
-      imageId: "",
-    };
-
-    if (!data.title || !data.content || !data.deskripsi || !user?.id) {
-      Toast.show({
-        type: "info",
-        text1: "Info",
-        text2: "Harap isi semua data",
-      });
-      return;
-    }
-
-    try {
-      setIsLoading(true);
-
-      if (image === null || !image) {
-        const response = await apiJobCreate(newData);
-        if (response.success) {
-          Toast.show({
-            type: "success",
-            text1: "Berhasil",
-            text2: "Lowongan berhasil dibuat",
-          });
-          router.replace(nextUrl);
-        }
-
-        return;
-      }
-
-      const responseUploadImage = await uploadFileService({
-        imageUri: image,
-        dirId: DIRECTORY_ID.job_image,
-      });
-
-      if (responseUploadImage.success) {
-        imageId = responseUploadImage.data.id;
-      }
-
-      const fixData = {
-        ...newData,
-        imageId: imageId,
-      };
-
-      const response = await apiJobCreate(fixData);
-      if (response.success) {
-        Toast.show({
-          type: "success",
-          text1: "Berhasil",
-          text2: "Lowongan berhasil dibuat",
-        });
-        router.replace(nextUrl);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const buttonSubmit = () => {
-    return (
-      <>
-        <BoxButtonOnFooter>
-          <ButtonCustom isLoading={isLoading} onPress={() => handlerOnSubmit()}>
-            Simpan
-          </ButtonCustom>
-        </BoxButtonOnFooter>
-      </>
-    );
-  };
-
-  return (
-    <NewWrapper footerComponent={buttonSubmit()}>
-      <StackCustom gap={"xs"}>
-        <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
-
-        {/* <BaseBox>
-          <Image
-            source={image ? { uri: image } : DUMMY_IMAGE.dummy_image}
-            style={{ width: "100%", height: 200 }}
-          />
-        </BaseBox> */}
-        <LandscapeFrameUploaded image={image as string} />
-        <ButtonCenteredOnly
-          onPress={() => {
-            // router.push("/(application)/(image)/take-picture/123");
-            pickImage({
-              setImageUri: setImage,
-            });
-          }}
-          icon="upload"
-        >
-          Upload
-        </ButtonCenteredOnly>
-
-        <Spacing />
-
-        <TextInputCustom
-          label="Judul Lowongan"
-          placeholder="Masukan Judul Lowongan Kerja"
-          required
-          value={data.title}
-          onChangeText={(value) => setData({ ...data, title: value })}
-        />
-
-        <TextAreaCustom
-          label="Syarat & Kualifikasi"
-          placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
-          required
-          showCount
-          maxLength={1000}
-          value={data.content}
-          onChangeText={(value) => setData({ ...data, content: value })}
-        />
-
-        <TextAreaCustom
-          label="Deskripsi Lowongan"
-          placeholder="Masukan Deskripsi Lowongan Kerja"
-          required
-          showCount
-          maxLength={1000}
-          value={data.deskripsi}
-          onChangeText={(value) => setData({ ...data, deskripsi: value })}
-        />
-      </StackCustom>
-    </NewWrapper>
-  );
+  return <Job_ScreenCreate />;
 }

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

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

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

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

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

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

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

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

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

@@ -3,13 +3,13 @@ import {
   BadgeCustom,
   ClickableCustom,
   Divider,
+  OS_Wrapper,
   SelectCustom,
   TextCustom,
 } from "@/components";
 import ListEmptyComponent from "@/components/_ShareComponent/ListEmptyComponent";
 import ListLoaderFooterComponent from "@/components/_ShareComponent/ListLoaderFooterComponent";
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import { usePaginatedApi } from "@/hooks/use-paginated-api";
@@ -120,7 +120,7 @@ export default function ProfileBlockedList() {
 
   return (
     <>
-      <NewWrapper
+      <OS_Wrapper
         // headerComponent={renderHeader()}
         listData={listData}
         renderItem={renderItem}

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

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

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

@@ -1,11 +1,12 @@
 import {
   ButtonCustom,
+  OS_Wrapper,
   SelectCustom,
   StackCustom,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
 import { IProfile } from "@/types/Type-Profile";
 import { router, useLocalSearchParams } from "expo-router";
@@ -70,7 +71,9 @@ export default function ProfileEdit() {
   };
 
   return (
-    <ViewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
@@ -119,6 +122,6 @@ export default function ProfileEdit() {
           }}
         />
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

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

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

@@ -3,8 +3,8 @@ import {
     BoxButtonOnFooter,
     ButtonCenteredOnly,
     ButtonCustom,
+    OS_Wrapper,
 } from "@/components";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
@@ -127,7 +127,7 @@ export default function UpdateBackgroundProfile() {
   );
 
   return (
-    <ViewWrapper footerComponent={buttonFooter}>
+    <OS_Wrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
@@ -144,6 +144,6 @@ export default function UpdateBackgroundProfile() {
       >
         Update
       </ButtonCenteredOnly>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

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

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

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

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

@@ -2,16 +2,17 @@ import {
     BaseBox,
     ButtonCenteredOnly,
     ButtonCustom,
+    OS_Wrapper,
     SelectCustom,
     Spacing,
     StackCustom,
     TextInputCustom,
-    ViewWrapper,
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
 import InformationBox from "@/components/Box/InformationBox";
 import DIRECTORY_ID from "@/constants/directory-id";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
 import { apiCreateProfile } from "@/service/api-client/api-profile";
 import { apiValidationEmail } from "@/service/api-client/api-validation";
@@ -155,7 +156,11 @@ export default function CreateProfile() {
   );
 
   return (
-    <ViewWrapper footerComponent={footerComponent}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={footerComponent}
+    >
       <StackCustom>
         <InformationBox text="Upload foto profile anda." />
         <View style={{ alignItems: "center" }}>
@@ -241,6 +246,6 @@ export default function CreateProfile() {
         />
         <Spacing />
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -6,60 +6,85 @@ 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";
+import { MainColor } from "@/constants/color-palet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Platform } from "react-native";
 
-export default function VotingTabsLayout() {
+function VotingTabsWrapper() {
+  const insets = useSafeAreaInsets();
+  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
   const { from, category } = useLocalSearchParams<{
     from?: string;
     category?: string;
   }>();
 
   return (
-    <Tabs
-      screenOptions={{
-        ...TabsStyles,
-        header: () => (
-          <AppHeader
-            title="Voting"
-            left={
-              <BackButtonFromNotification
-                from={from as string}
-                category={category as string}
-              />
-            }
-          />
-        ),
-      }}
-    >
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Beranda",
-          tabBarIcon: ({ color }) => <IconHome color={color} />,
+    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
+      <Tabs
+        screenOptions={{
+          ...TabsStyles,
+          tabBarStyle: Platform.select({
+            ios: {
+              borderTopWidth: 0,
+              paddingTop: 12,
+              height: OS_IOS_HEIGHT,
+            },
+            android: {
+              borderTopWidth: 0,
+              paddingTop: 5,
+              height: OS_ANDROID_HEIGHT + paddingBottom,
+            },
+          }),
+          header: () => (
+            <AppHeader
+              title="Voting"
+              left={
+                <BackButtonFromNotification
+                  from={from || ""}
+                  category={category}
+                />
+              }
+            />
+          ),
         }}
-      />
-      <Tabs.Screen
-        name="status"
-        options={{
-          title: "Status",
-          tabBarIcon: ({ color }) => <IconStatus color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="contribution"
-        options={{
-          title: "Kontribusi",
-          tabBarIcon: ({ color }) => <IconContribution color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="history"
-        options={{
-          title: "Riwayat",
-          tabBarIcon: ({ color }) => <IconHistory color={color} />,
-        }}
-      />
-    </Tabs>
+      >
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: "Beranda",
+            tabBarIcon: ({ color }) => <IconHome color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="status"
+          options={{
+            title: "Status",
+            tabBarIcon: ({ color }) => <IconStatus color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="contribution"
+          options={{
+            title: "Kontribusi",
+            tabBarIcon: ({ color }) => <IconContribution color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="history"
+          options={{
+            title: "Riwayat",
+            tabBarIcon: ({ color }) => <IconHistory color={color} />,
+          }}
+        />
+      </Tabs>
+    </View>
   );
 }
+
+export default function VotingTabsLayout() {
+  return <VotingTabsWrapper />;
+}

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() {
           ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper>
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -158,7 +158,7 @@ export default function VotingDetailStatus() {
             <Spacing />
           </>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* ========= 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() {
         }}
       />
 
-      <ViewWrapper>
+      <OS_Wrapper>
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -116,7 +116,7 @@ export default function VotingDetailContribution() {
             <Spacing />
           </>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* ========= Publish Drawer ========= */}
       <DrawerCustom

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

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

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() {
           ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper>
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -116,7 +116,7 @@ export default function VotingDetailHistory() {
             <Spacing />
           </>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* ========= 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,6 +32,7 @@ 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() {
@@ -133,9 +134,9 @@ export default function VotingDetail() {
 
   if (isEventFinished) {
     return (
-      <ViewWrapper>
+      <OS_Wrapper>
         <CustomSkeleton />
-      </ViewWrapper>
+      </OS_Wrapper>
     );
   }
 
@@ -155,7 +156,14 @@ export default function VotingDetail() {
         }}
       />
 
-      <ViewWrapper>
+      <OS_Wrapper
+        refreshControl={
+          <RefreshControl
+            refreshing={loadingGetData}
+            onRefresh={handlerLoadData}
+          />
+        }
+      >
         {loadingGetData ? (
           <LoaderCustom />
         ) : (
@@ -182,7 +190,7 @@ export default function VotingDetail() {
             />
           </StackCustom>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* ========= Publish Drawer ========= */}
       <DrawerCustom

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

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

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

@@ -3,7 +3,7 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   InformationBox,
-  NewWrapper,
+  OS_Wrapper,
   StackCustom
 } from "@/components";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
@@ -82,7 +82,7 @@ export default function WaitingRoom() {
 
   return (
     <>
-      <NewWrapper
+      <OS_Wrapper
         footerComponent={logoutButton()}
         refreshControl={
           <RefreshControl refreshing={isLoading} onRefresh={handleCheck} />
@@ -103,7 +103,7 @@ Silakan tunggu beberapa saat. Untuk memperbarui status, tarik layar ke bawah."
             Check
           </ButtonCenteredOnly> */}
         </StackCustom>
-      </NewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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

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

components/_ShareComponent/AndroidWrapper.tsx

@@ -0,0 +1,254 @@
+// @/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

@@ -0,0 +1,75 @@
+// FormWrapper.tsx - Reusable wrapper untuk form dengan keyboard handling
+import { MainColor } from "@/constants/color-palet";
+import { Keyboard, KeyboardAvoidingView, Platform, ScrollView, TouchableWithoutFeedback, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { ReactNode } from "react";
+import { useKeyboardForm } from "@/hooks/useKeyboardForm";
+
+interface FormWrapperProps {
+  children: ReactNode;
+  footerComponent?: ReactNode;
+  /**
+   * Offset scroll saat keyboard muncul (default: 100)
+   */
+  scrollOffset?: number;
+  /**
+   * Padding bottom untuk content (default: 100)
+   */
+  contentPaddingBottom?: number;
+  /**
+   * Padding untuk content container (default: 16)
+   */
+  contentPadding?: number;
+}
+
+export function FormWrapper({
+  children,
+  footerComponent,
+  scrollOffset = 100,
+  contentPaddingBottom = 100,
+  contentPadding = 16,
+}: FormWrapperProps) {
+  const { scrollViewRef, handleScroll } = useKeyboardForm(scrollOffset);
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+      style={{ flex: 1, backgroundColor: MainColor.darkblue }}
+    >
+      <ScrollView
+        ref={scrollViewRef}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        style={{ flex: 1 }}
+        contentContainerStyle={{
+          flexGrow: 1,
+          paddingBottom: contentPaddingBottom,
+        }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          <View style={{ flex: 1, padding: contentPadding }}>
+            {children}
+          </View>
+        </TouchableWithoutFeedback>
+      </ScrollView>
+
+      {/* Footer - Fixed di bawah */}
+      {footerComponent && (
+        <SafeAreaView
+          edges={["bottom"]}
+          style={{
+            backgroundColor: MainColor.darkblue,
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+          }}
+        >
+          {footerComponent}
+        </SafeAreaView>
+      )}
+    </KeyboardAvoidingView>
+  );
+}

components/_ShareComponent/IOSWrapper.tsx

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

components/_ShareComponent/NewWrapper.tsx

@@ -117,15 +117,15 @@ const NewWrapper = (props: NewWrapperProps) => {
             ListHeaderComponent={listProps.ListHeaderComponent}
             ListFooterComponent={listProps.ListFooterComponent}
             ListEmptyComponent={listProps.ListEmptyComponent}
-            contentContainerStyle={{ 
+            contentContainerStyle={{
               flexGrow: 1,
-              paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0 
+              paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
             }}
             keyboardShouldPersistTaps="handled"
           />
         </View>
 
-        {/* Footer dengan position absolute untuk stay di bawah */}
+        {/* Footer - tetap di bawah dengan position absolute */}
         {footerComponent && !hideFooter && (
           <View style={styles.footerContainer}>
             <SafeAreaView
@@ -133,7 +133,7 @@ const NewWrapper = (props: NewWrapperProps) => {
               style={{ backgroundColor: MainColor.darkblue }}
             >
               {footerComponent}
-            </SafeAreaView>   
+            </SafeAreaView>
           </View>
         )}
 
@@ -163,11 +163,11 @@ const NewWrapper = (props: NewWrapperProps) => {
         <View style={GStyles.stickyHeader}>{headerComponent}</View>
       )}
 
-      <View style={{ flex: 0 }} collapsable={false}>
+      <View style={{ flex: 1 }}>
         <ScrollView
-          contentContainerStyle={{ 
+          contentContainerStyle={{
             flexGrow: 1,
-            paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0 
+            paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
           }}
           keyboardShouldPersistTaps="handled"
           refreshControl={refreshControl}
@@ -178,7 +178,7 @@ const NewWrapper = (props: NewWrapperProps) => {
         </ScrollView>
       </View>
 
-      {/* Footer dengan position absolute untuk stay di bawah */}
+      {/* Footer - tetap di bawah dengan position absolute */}
       {footerComponent && !hideFooter && (
         <View style={styles.footerContainer}>
           <SafeAreaView

components/_ShareComponent/NewWrapper_V2.tsx

@@ -0,0 +1,231 @@
+// NewWrapper_V2.tsx - Wrapper baru dengan keyboard handling
+import { MainColor } from "@/constants/color-palet";
+import { OS_HEIGHT } from "@/constants/constans-value";
+import { GStyles } from "@/styles/global-styles";
+import {
+  ImageBackground,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  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 Spacing from "./Spacing";
+import { useKeyboardForm } from "@/hooks/useKeyboardForm";
+
+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
+   * @default false
+   */
+  enableKeyboardHandling?: boolean;
+  /**
+   * Scroll offset when keyboard appears (default: 100)
+   */
+  keyboardScrollOffset?: number;
+  /**
+   * Extra padding bottom for content to avoid navigation bar (default: 80)
+   */
+  contentPaddingBottom?: number;
+  /**
+   * Padding untuk content container (default: 16)
+   * Set to 0 untuk tidak ada padding, atau custom value sesuai kebutuhan
+   */
+  contentPadding?: number;
+}
+
+interface StaticModeProps extends BaseProps {
+  children: React.ReactNode;
+  listData?: never;
+  renderItem?: never;
+}
+
+interface ListModeProps extends BaseProps {
+  children?: never;
+  listData?: any[];
+  renderItem?: FlatListProps<any>["renderItem"];
+  onEndReached?: () => void;
+  ListHeaderComponent?: React.ReactElement | null;
+  ListFooterComponent?: React.ReactElement | null;
+  ListEmptyComponent?: React.ReactElement | null;
+  keyExtractor?: FlatListProps<any>["keyExtractor"];
+}
+
+type NewWrapper_V2_Props = StaticModeProps | ListModeProps;
+
+export function NewWrapper_V2(props: NewWrapper_V2_Props) {
+  const {
+    withBackground = false,
+    headerComponent,
+    footerComponent,
+    floatingButton,
+    hideFooter = false,
+    edgesFooter = [],
+    style,
+    refreshControl,
+    enableKeyboardHandling = false,
+    keyboardScrollOffset = 100,
+    contentPaddingBottom = 80, // Default 80 untuk navigasi device
+    contentPadding = 16, // Default 16 untuk padding konsisten
+  } = props;
+
+  const assetBackground = require("../../assets/images/main-background.png");
+
+  // Use keyboard hook if enabled
+  const keyboardForm = enableKeyboardHandling 
+    ? useKeyboardForm(keyboardScrollOffset) 
+    : 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 (
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        style={{ flex: 1, backgroundColor: MainColor.darkblue }}
+      >
+        {headerComponent && (
+          <View style={GStyles.stickyHeader}>{headerComponent}</View>
+        )}
+        <FlatList
+          data={listProps.listData}
+          renderItem={listProps.renderItem}
+          keyExtractor={
+            listProps.keyExtractor ||
+            ((item, index) => `${String(item.id)}-${index}`)
+          }
+          refreshControl={refreshControl}
+          onEndReached={listProps.onEndReached}
+          onEndReachedThreshold={0.5}
+          ListHeaderComponent={listProps.ListHeaderComponent}
+          ListFooterComponent={listProps.ListFooterComponent}
+          ListEmptyComponent={listProps.ListEmptyComponent}
+          contentContainerStyle={{
+            flexGrow: 1,
+            paddingBottom: (footerComponent && !hideFooter ? OS_HEIGHT : 0) + contentPaddingBottom,
+            padding: contentPadding,
+          }}
+          keyboardShouldPersistTaps="handled"
+        />
+
+        {/* Footer - Fixed di bawah dengan width 100% */}
+        {footerComponent && !hideFooter && (
+          <SafeAreaView
+            edges={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
+            style={{ backgroundColor: MainColor.darkblue, width: "100%" }}
+          >
+            <View style={{ width: "100%" }}>
+              {footerComponent}
+            </View>
+          </SafeAreaView>
+        )}
+
+        {!footerComponent && !hideFooter && (
+          <SafeAreaView
+            edges={["bottom"]}
+            style={{ backgroundColor: MainColor.darkblue }}
+          />
+        )}
+
+        {floatingButton && (
+          <View style={GStyles.floatingContainer}>{floatingButton}</View>
+        )}
+      </KeyboardAvoidingView>
+    );
+  }
+
+  // 🔹 Mode Statis (ScrollView)
+  const staticProps = props as StaticModeProps;
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+      style={{ flex: 1, backgroundColor: MainColor.darkblue }}
+    >
+      {headerComponent && (
+        <View style={GStyles.stickyHeader}>{headerComponent}</View>
+      )}
+
+      <ScrollView
+        ref={keyboardForm?.scrollViewRef}
+        style={{ flex: 1 }}
+        contentContainerStyle={{
+          flexGrow: 1,
+          paddingBottom: (footerComponent && !hideFooter ? OS_HEIGHT : 0) + contentPaddingBottom,
+          padding: contentPadding,
+        }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          {renderContainer(staticProps.children)}
+        </TouchableWithoutFeedback>
+      </ScrollView>
+
+      {/* Footer - Fixed di bawah dengan width 100% */}
+      {footerComponent && !hideFooter && (
+        <SafeAreaView
+          edges={["bottom"]}
+          style={{
+            backgroundColor: MainColor.darkblue,
+            width: "100%",
+            position: Platform.OS === "android" ? "absolute" : undefined,
+            bottom: Platform.OS === "android" ? 0 : undefined,
+            left: 0,
+            right: 0,
+          }}
+        >
+          <View style={{ width: "100%" }}>
+            {footerComponent}
+          </View>
+        </SafeAreaView>
+      )}
+
+      {!footerComponent && !hideFooter && (
+        <SafeAreaView
+          edges={["bottom"]}
+          style={{ backgroundColor: MainColor.darkblue }}
+        />
+      )}
+
+      {floatingButton && (
+        <View style={GStyles.floatingContainer}>{floatingButton}</View>
+      )}
+    </KeyboardAvoidingView>
+  );
+}

components/_ShareComponent/OS_Wrapper.tsx

@@ -0,0 +1,157 @@
+// @/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/index.ts

@@ -63,6 +63,11 @@ import DummyLandscapeImage from "./_ShareComponent/DummyLandscapeImage";
 import GridComponentView from "./_ShareComponent/GridSectionView";
 import NewWrapper from "./_ShareComponent/NewWrapper";
 import BasicWrapper from "./_ShareComponent/BasicWrapper";
+import { FormWrapper } from "./_ShareComponent/FormWrapper";
+import { NewWrapper_V2 } from "./_ShareComponent/NewWrapper_V2";
+// OS-Specific Wrappers
+import OS_Wrapper, { IOSWrapper, AndroidWrapper } from "./_ShareComponent/OS_Wrapper";
+
 // Progress
 import ProgressCustom from "./Progress/ProgressCustom";
 // Loader
@@ -127,6 +132,12 @@ export {
   Spacing,
   NewWrapper,
   BasicWrapper,
+  FormWrapper,
+  NewWrapper_V2,
+  // OS-Specific Wrappers
+  OS_Wrapper,
+  IOSWrapper,
+  AndroidWrapper,
   // Stack
   StackCustom,
   TabBarBackground,

constants/constans-value.ts

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

docs/KEYBOARD-BUG-TEST.md

@@ -0,0 +1,148 @@
+# Keyboard Bug Investigation
+
+## 🐛 Problem
+
+Footer terangkat dan muncul area putih di bawah saat keyboard ditutup setelah input ke TextInput.
+
+## 📋 Test Cases
+
+### Test 1: Minimal Wrapper
+**File**: `test-keyboard-bug.tsx`
+
+Wrapper yang sangat sederhana:
+```typescript
+<KeyboardAvoidingView behavior="height">
+  <ScrollView>
+    <TextInput />
+  </ScrollView>
+  <SafeAreaView>Footer</SafeAreaView>
+</KeyboardAvoidingView>
+```
+
+**Expected**: Footer tetap di bawah
+**Actual**: ? (To be tested)
+
+### Test 2: Original NewWrapper
+**File**: `components/_ShareComponent/NewWrapper.tsx`
+
+Wrapper yang digunakan di production:
+```typescript
+<KeyboardAvoidingView behavior="height">
+  <View flex={0}>
+    <ScrollView>
+      {content}
+    </ScrollView>
+  </View>
+  <View position="absolute">Footer</View>
+</KeyboardAvoidingView>
+```
+
+**Expected**: Footer tetap di bawah
+**Actual**: Footer terangkat, ada putih di bawah
+
+## 🔍 Possible Causes
+
+### 1. KeyboardAvoidingView Behavior
+- **Android**: `behavior="height"` mengurangi height view saat keyboard muncul
+- **Issue**: Saat keyboard close, height tidak kembali ke semula
+
+### 2. View Wrapper dengan flex: 0
+- NewWrapper menggunakan `<View style={{ flex: 0 }}>`
+- Ini membuat ScrollView tidak expand dengan benar
+- **Fix**: Coba `<View style={{ flex: 1 }}>`
+
+### 3. Footer dengan position: absolute
+- Footer "melayang" di atas konten
+- Tidak ikut terdorong saat keyboard muncul
+- Saat keyboard close, footer kembali tapi layout sudah berubah
+
+### 4. SafeAreaView Insets
+- Safe area insets berubah saat keyboard muncul
+- Footer tidak handle insets dengan benar
+
+## 🧪 Test Scenarios
+
+1. **Test Input Focus**
+   - [ ] Tap Input 1 → Keyboard muncul
+   - [ ] Footer tetap di bawah?
+
+2. **Test Input Blur**
+   - [ ] Tap Input 1 → Keyboard muncul
+   - [ ] Tap outside → Keyboard close
+   - [ ] Footer kembali ke posisi?
+   - [ ] Ada putih di bawah?
+
+3. **Test Multiple Inputs**
+   - [ ] Tap Input 1 → Input 2 → Input 3
+   - [ ] Keyboard pindah dengan smooth
+   - [ ] Footer tetap di bawah?
+
+4. **Test Scroll After Close**
+   - [ ] Input → Close keyboard
+   - [ ] Scroll ke bawah
+   - [ ] Footer terlihat?
+   - [ ] Ada putih di bawah?
+
+## 🔧 Potential Fixes
+
+### Fix 1: Remove position: absolute
+```typescript
+// Before
+<View style={{ position: "absolute", bottom: 0 }}>
+  {footer}
+</View>
+
+// After
+<SafeAreaView>
+  {footer}
+</SafeAreaView>
+```
+
+### Fix 2: Use flex: 1 instead of flex: 0
+```typescript
+// Before
+<View style={{ flex: 0 }}>
+  <ScrollView />
+</View>
+
+// After
+<View style={{ flex: 1 }}>
+  <ScrollView />
+</View>
+```
+
+### Fix 3: Use KeyboardAwareScrollView
+```typescript
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
+
+<KeyboardAwareScrollView>
+  {content}
+</KeyboardAwareScrollView>
+```
+
+### Fix 4: Manual keyboard handling
+```typescript
+const [keyboardVisible, setKeyboardVisible] = useState(false);
+
+useEffect(() => {
+  const show = Keyboard.addListener('keyboardDidShow', () => setKeyboardVisible(true));
+  const hide = Keyboard.addListener('keyboardDidHide', () => setKeyboardVisible(false));
+  return () => { show.remove(); hide.remove(); }
+}, []);
+```
+
+## 📝 Test Results
+
+| Test | Platform | Result | Notes |
+|------|----------|--------|-------|
+| Test 1 (Minimal) | Android | ? | TBD |
+| Test 1 (Minimal) | iOS | ? | TBD |
+| Test 2 (Original) | Android | ❌ Bug | Footer terangkat |
+| Test 2 (Original) | iOS | ? | TBD |
+
+## 🎯 Next Steps
+
+1. Test dengan `TestWrapper` (minimal wrapper)
+2. Identifikasi apakah bug dari wrapper atau React Native
+3. Apply fix yang sesuai
+4. Test di semua screen