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

TASK-005: OS_Wrapper Implementation

📋 Overview

Migrasi dari NewWrapper dan NewWrapper_V2 ke OS_Wrapper yang otomatis menyesuaikan dengan platform (iOS/Android).

🎯 Goals

• ✅ Mengganti penggunaan NewWrapper → OS_Wrapper di user screens
• ✅ Mengganti penggunaan NewWrapper_V2 → OS_Wrapper atau PageWrapper di form screens
• ✅ Memastikan tabs dan UI konsisten di iOS dan Android
• ✅ Backward compatible (wrapper lama tetap ada)

📦 Available Wrappers

1. OS_Wrapper (Recommended)

Auto-detect platform dan routing ke wrapper yang sesuai:

• iOS → IOSWrapper (berbasis NewWrapper)
• Android → AndroidWrapper (berbasis NewWrapper_V2)

2. PageWrapper (For Forms)

Sama seperti OS_Wrapper tapi dengan keyboard handling (Android only):

• enableKeyboardHandling - Auto scroll saat input focus
• keyboardScrollOffset - Offset scroll (default: 100)
• contentPaddingBottom - Extra padding bottom (default: 80)
• contentPadding - Content padding (default: 16)

3. IOSWrapper / AndroidWrapper (Direct Usage)

Untuk kasus khusus yang butuh platform-specific behavior.

📝 Migration Guide

Before (Old Way)

import NewWrapper from "@/components/_ShareComponent/NewWrapper";

// atau
import { NewWrapper_V2 } from "@/components/_ShareComponent/NewWrapper_V2";

After (New Way)

import { OS_Wrapper, PageWrapper } from "@/components";

// Static mode
<OS_Wrapper>
  <YourContent />
</OS_Wrapper>

// List mode
<OS_Wrapper
  listData={data}
  renderItem={({ item }) => <ItemCard item={item} />}
  ListEmptyComponent={<EmptyState />}
/>

// Form dengan keyboard handling
<PageWrapper
  enableKeyboardHandling
  keyboardScrollOffset={150}
>
  <FormContent />
</PageWrapper>

🚀 Implementation Phases

Phase 1: User Screens (Priority: HIGH)

Files yang perlu di-migrate:

1.1 Home/Beranda

• screens/Beranda/ScreenBeranda.tsx atau ScreenBeranda2.tsx
  • Ganti NewWrapper → OS_Wrapper
  • Test tabs behavior di iOS dan Android

1.2 Profile Screens

• screens/Profile/ScreenProfile.tsx
• screens/Profile/ScreenProfileEdit.tsx
• screens/Profile/ScreenProfileCreate.tsx

1.3 Forum/Discussion

• screens/Forum/ScreenForum.tsx
• screens/Forum/ScreenForumDetail.tsx
• screens/Forum/ScreenForumCreate.tsx → pakai PageWrapper (ada form)

1.4 Portfolio

• screens/Portfolio/ScreenPortfolio.tsx
• screens/Portfolio/ScreenPortfolioCreate.tsx → pakai PageWrapper
• screens/Portfolio/ScreenPortfolioEdit.tsx → pakai PageWrapper

Phase 2: Admin Screens (Priority: MEDIUM)

Files yang perlu di-migrate:

2.1 Event Management

• screens/Admin/Event/ScreenEventList.tsx
• screens/Admin/Event/ScreenEventCreate.tsx → pakai PageWrapper
• screens/Admin/Event/ScreenEventEdit.tsx → pakai PageWrapper

2.2 Voting Management

• screens/Admin/Voting/ScreenVotingList.tsx
• screens/Admin/Voting/ScreenVotingCreate.tsx → pakai PageWrapper
• screens/Admin/Voting/ScreenVotingEdit.tsx → pakai PageWrapper

2.3 Donation Management

• screens/Admin/Donation/ScreenDonationList.tsx
• screens/Admin/Donation/ScreenDonationCreate.tsx → pakai PageWrapper
• screens/Admin/Donation/ScreenDonationEdit.tsx → pakai PageWrapper

2.4 Job Management

• screens/Job/ScreenJobList.tsx (jika ada)
• screens/Job/ScreenJobCreate.tsx → sudah pakai BoxButtonOnFooter?
• screens/Job/ScreenJobEdit.tsx → sudah pakai BoxButtonOnFooter?

Phase 3: Other Screens (Priority: LOW)

• screens/Investasi/ - Investment screens
• screens/Kolaborasi/ - Collaboration screens
• Other user-facing screens

✅ Testing Checklist

Setiap screen yang sudah di-migrate, test:

iOS Testing

• UI tampil sesuai design
• Tabs berfungsi dengan baik
• ScrollView/FlatList scroll dengan smooth
• Keyboard tidak menutupi input (jika pakai PageWrapper)
• Footer muncul di posisi yang benar
• Pull to refresh berfungsi (jika ada)

Android Testing

• UI tampil sesuai design
• Tabs berfungsi dengan baik
• ScrollView/FlatList scroll dengan smooth
• Keyboard handling: auto scroll saat input focus (jika pakai PageWrapper)
• Footer muncul di posisi yang benar (tidak tertutup navigation bar)
• Pull to refresh berfungsi (jika ada)

Common Testing

• Background image muncul (jika withBackground={true})
• Sticky header berfungsi (jika ada headerComponent)
• Footer fixed di bottom (jika ada footerComponent)
• Floating button muncul (jika ada floatingButton)
• Loading skeleton muncul saat pagination
• Empty state muncul saat data kosong

📌 Notes

Kapan pakai OS_Wrapper vs PageWrapper?

• OS_Wrapper: Untuk screen yang hanya menampilkan data (list, detail, dll)
• PageWrapper: Untuk screen yang ada form input (create, edit, login, dll)

Props yang sering digunakan:

Untuk List Screen:

<OS_Wrapper
  listData={pagination.listData}
  renderItem={renderItem}
  ListEmptyComponent={ListEmptyComponent}
  ListFooterComponent={ListFooterComponent}
  onEndReached={pagination.loadMore}
  refreshControl={
    <RefreshControl
      refreshing={pagination.refreshing}
      onRefresh={pagination.onRefresh}
    />
  }
/>

Untuk Static Screen:

<OS_Wrapper
  headerComponent={<HeaderSection />}
  footerComponent={<FooterSection />}
>
  <YourContent />
</OS_Wrapper>

Untuk Form Screen:

<PageWrapper
  enableKeyboardHandling
  keyboardScrollOffset={150}
  contentPaddingBottom={100}
  footerComponent={
    <BoxButtonOnFooter>
      <ButtonCustom onPress={handleSubmit}>Submit</ButtonCustom>
    </BoxButtonOnFooter>
  }
>
  <FormContent />
</PageWrapper>

Migration Pattern:

// OLD
import NewWrapper from "@/components/_ShareComponent/NewWrapper";

<NewWrapper
  listData={data}
  renderItem={renderItem}
  headerComponent={header}
  footerComponent={footer}
/>

// NEW
import { OS_Wrapper } from "@/components";

<OS_Wrapper
  listData={data}
  renderItem={renderItem}
  headerComponent={header}
  footerComponent={footer}
/>

🐛 Troubleshooting

Issue: Tabs tidak muncul di Android

Solution: Pastikan tidak ada custom padding yang overriding default behavior. Jika masih bermasalah, cek apakah contentPadding atau contentPaddingBottom terlalu besar.

Issue: Keyboard menutupi input di Android

Solution: Pastikan pakai PageWrapper dengan enableKeyboardHandling={true}. Adjust keyboardScrollOffset jika perlu.

Issue: Footer terlalu jauh dari bottom

Solution: Kurangi contentPaddingBottom (default: 80). Untuk list screen tanpa navigation bar overlay, bisa set ke 0.

Issue: White space di bottom saat keyboard close (Android)

Solution: Ini sudah di-fix di AndroidWrapper. Pastikan screen pakai OS_Wrapper/PageWrapper, bukan NewWrapper langsung.

📊 Progress Tracking

Phase	Total Files	Migrated	Testing	Status
Phase 1 (User)	TBD	0	0	⏳ Pending
Phase 2 (Admin)	TBD	0	0	⏳ Pending
Phase 3 (Other)	TBD	0	0	⏳ Pending
Total	TBD	0	0	0%

🔄 Rollback Plan

Jika ada issue yang tidak bisa di-fix dalam 1 jam:

1. Revert perubahan di file yang bermasalah
2. Kembali ke NewWrapper/NewWrapper_V2
3. Dokumentasikan issue di CHANGE_LOG.md
4. Investigasi lebih lanjut dan coba lagi

---

Co-authored-by: Qwen-Coder qwen-coder@alibabacloud.com Created: 2026-04-06 Status: Ready for Implementation