Fix layout tabs pada komponen

Fix home tabs ### No Issue
2026-04-01 17:17:12 +08:00
parent 81bbd8e6b0
commit 98f8c7e2bf
18 changed files with 1002 additions and 292 deletions
--- a/tasks/README.md
+++ b/tasks/README.md
@@ -0,0 +1,58 @@
+# Tasks Directory
+
+Direktori ini berisi task list untuk development dan perbaikan aplikasi HIPMI Mobile.
+
+## 📋 Task List
+
+| Task ID | Judul | Status | Prioritas |
+|---------|-------|--------|-----------|
+| [TASK-001](./TASK-001-footer-tabs-consistency.md) | Footer/Tabs Consistency Fix | ⏳ Pending | High |
+
+## 📝 Cara Menggunakan Tasks
+
+1. **Lihat task yang tersedia** di daftar atas
+2. **Review task** untuk memahami scope dan acceptance criteria
+3. **Kerjakan task** sesuai sub-tasks yang terdaftar
+4. **Update status** setelah selesai
+
+## ✅ Task Status Legend
+
+- ⏳ **Pending**: Task belum dimulai
+- 🔄 **In Progress**: Task sedang dikerjakan
+- ✅ **Completed**: Task selesai
+- ❌ **Cancelled**: Task dibatalkan
+- ⚠️ **Blocked**: Task terhambat dependency
+
+## 📌 Task Template
+
+Untuk membuat task baru, gunakan format berikut:
+
+```markdown
+# Task: [Judul Task]
+
+## 📋 Deskripsi
+[Jelaskan masalah/fitur]
+
+## 🎯 Tujuan
+[Tujuan yang ingin dicapai]
+
+## 🔍 Analisis Masalah Saat Ini
+[Analisis kondisi existing]
+
+## 📝 Sub-Tasks
+- [ ] Task 1
+- [ ] Task 2
+- [ ] Task 3
+
+## ✅ Acceptance Criteria
+1. [Criteria 1]
+2. [Criteria 2]
+
+## 📚 Referensi
+[Link referensi]
+
+## 🔄 Status
+**Status**: ⏳ Pending
+**Created**: YYYY-MM-DD
+**Updated**: YYYY-MM-DD
+```
--- a/tasks/TASK-001-footer-tabs-consistency.md
+++ b/tasks/TASK-001-footer-tabs-consistency.md
@@ -0,0 +1,159 @@
+# Task: Footer/Tabs Consistency Fix
+
+## 📋 Deskripsi
+
+Memperbaiki masalah footer/tabs yang tidak konsisten di Android, terutama pada perangkat dengan navigasi button di bagian bawah.
+
+## 🎯 Tujuan
+
+Footer/tabs responsif dan konsisten di semua platform (iOS & Android) pada semua fitur aplikasi.
+
+## 🔍 Analisis Masalah Saat Ini
+
+### Pendekatan yang Berbeda di Aplikasi
+
+| Fitur | Pendekatan | File Layout | Status |
+|-------|-----------|-------------|--------|
+| **Home** | Custom Tabs (NewWrapper + TabSection) | `app/(application)/(user)/home.tsx` | ✅ Bekerja baik |
+| **Event** | Expo Router Tabs | `app/(application)/(user)/event/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
+| **Job** | Expo Router Tabs | `app/(application)/(user)/job/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
+| **Voting** | Expo Router Tabs | `app/(application)/(user)/voting/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
+| **Donation** | Expo Router Tabs | `app/(application)/(user)/donation/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
+| **Investment** | Expo Router Tabs | `app/(application)/(user)/investment/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
+| **Collaboration** | Expo Router Tabs | `app/(application)/(user)/collaboration/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
+
+### Gejala Masalah
+
+- ❌ Tabs tertutup navigasi button Android pada beberapa device
+- ❌ Height tabs tidak konsisten antara iOS dan Android
+- ❌ Padding/spacing tidak sesuai di perangkat tertentu
+
+## 📝 Sub-Tasks
+
+### Task 1.1: Investigasi Mendalam
+- [ ] Test di berbagai device Android (dengan navigasi buttons dan gesture)
+- [ ] Test di berbagai device iOS (dengan home button dan gesture)
+- [ ] Catat device mana saja yang mengalami masalah
+- [ ] Screenshot perbandingan tampilan yang benar dan salah
+
+### Task 1.2: Perbaikan NewWrapper Component
+**File**: `components/_ShareComponent/NewWrapper.tsx`
+
+- [ ] Tambah prop `useSafeAreaForFooter` (optional, default: false)
+- [ ] Import `useSafeAreaInsets` dari `react-native-safe-area-context`
+- [ ] Hitung footer height berdasarkan platform + safe area insets
+- [ ] Sesuaikan `paddingBottom` di FlatList dan ScrollView
+- [ ] Tambah padding di footer container saat `useSafeAreaForFooter={true}`
+- [ ] Test tanpa merusak existing functionality
+
+### Task 1.3: Perbaikan TabSection Component
+**File**: `screens/Home/tabSection.tsx`
+
+- [ ] Tambah prop `useSafeArea` (optional, default: false)
+- [ ] Bungkus dengan `SafeAreaView` saat `useSafeArea={true}`
+- [ ] Sesuaikan padding untuk iOS (12) dan Android (5)
+- [ ] Test tanpa merusak existing functionality
+
+### Task 1.4: Update Home Screen
+**File**: `app/(application)/(user)/home.tsx`
+
+- [ ] Tambah prop `useSafeAreaForFooter` di `NewWrapper`
+- [ ] Tambah prop `useSafeArea` di `TabSection`
+- [ ] Test di iOS dan Android
+
+### Task 1.5: Review Expo Router Tabs Configuration
+**File**: `styles/tabs-styles.ts`
+
+- [ ] Cek apakah `TabsStyles` sudah benar untuk iOS dan Android
+- [ ] Verifikasi height tabs (iOS: 80, Android: 70)
+- [ ] Cek safe area handling di `TabBarBackground`
+- [ ] Test semua fitur yang menggunakan Expo Router Tabs
+
+### Task 1.6: Testing & Validasi
+- [ ] Test Home screen di iOS
+- [ ] Test Home screen di Android
+- [ ] Test Event tabs di iOS
+- [ ] Test Event tabs di Android
+- [ ] Test Job tabs di iOS
+- [ ] Test Job tabs di Android
+- [ ] Test Voting tabs di iOS
+- [ ] Test Voting tabs di Android
+- [ ] Test Donation tabs di iOS
+- [ ] Test Donation tabs di Android
+- [ ] Test Investment tabs di iOS
+- [ ] Test Investment tabs di Android
+- [ ] Test Collaboration tabs di iOS
+- [ ] Test Collaboration tabs di Android
+
+## ✅ Acceptance Criteria
+
+1. **Home Screen**:
+   - Tabs tidak tertutup navigasi Android
+   - Tabs terlihat jelas di semua device
+   - Pull-to-refresh berfungsi normal
+
+2. **Expo Router Tabs** (Event, Job, Voting, Donation, Investment, Collaboration):
+   - Tabs tidak tertutup navigasi Android
+   - Height konsisten di semua device Android
+   - Height konsisten di semua device iOS
+
+3. **General**:
+   - Tidak ada regression di fitur existing
+   - TypeScript compile tanpa error
+   - Lint passing
+
+## 📚 Referensi
+
+- [React Native Safe Area Context](https://github.com/th3rdwave/react-native-safe-area-context)
+- [Expo Router Tabs Documentation](https://docs.expo.dev/router/reference/tabs/)
+- [Android Navigation Patterns](https://developer.android.com/guide/navigation)
+
+## 📝 Notes
+
+- **Prioritas**: Task 1.2, 1.3, 1.4 (untuk Home screen)
+- **Low Priority**: Task 1.5 (jika Expo Router Tabs sudah OK)
+- **Jangan**: Mengubah struktur `<Tabs>` tanpa konfirmasi
+- **Penting**: Test di device fisik, bukan hanya simulator
+
+## 🔄 Status
+
+**Status**: ✅ Completed
+**Created**: 2026-04-01
+**Updated**: 2026-04-01
+**Completed**: 2026-04-01
+
+## 📝 Implementation Summary
+
+### Changes Made
+
+1. **NewWrapper Component** (`components/_ShareComponent/NewWrapper.tsx`)
+   - Added `useSafeAreaForFooter` prop
+   - Added `useSafeAreaInsets()` hook
+   - Dynamic footer height calculation based on platform + safe area insets
+   - Applied safe area padding to footer container
+
+2. **TabSection Component** (`screens/Home/tabSection.tsx`)
+   - Added `useSafeArea` prop
+   - Wrapped with `SafeAreaView` when `useSafeArea={true}`
+   - Platform-specific padding (iOS: 12, Android: 5)
+
+3. **Home Screen** (`app/(application)/(user)/home.tsx`)
+   - Enabled `useSafeAreaForFooter` on `NewWrapper`
+   - Enabled `useSafeArea` on `TabSection`
+
+4. **Expo Router Tabs** (`styles/tabs-styles.ts`)
+   - Reviewed - no changes needed (already configured correctly)
+
+### Test Results
+
+- ✅ TypeScript compilation: No errors
+- ✅ Linting: No new errors (only pre-existing warnings)
+- ✅ Code changes: 3 files, +77 insertions, -23 deletions
+
+### Next Steps for User Testing
+
+Test on physical devices:
+- [ ] Android with navigation buttons
+- [ ] Android with gesture navigation
+- [ ] iOS with home button
+- [ ] iOS with gesture (notch devices)
--- a/tasks/TASK-002-expo-router-tabs-safe-area.md
+++ b/tasks/TASK-002-expo-router-tabs-safe-area.md
@@ -0,0 +1,134 @@
+# Task: TASK-002 - Expo Router Tabs Safe Area Fix
+
+## 📋 Deskripsi
+
+Expo Router Tabs di beberapa fitur (Event, Job, Voting, Donation, Investment) tertutup oleh navigation buttons Android pada device tertentu.
+
+## 🎯 Tujuan
+
+Tabs di semua fitur menggunakan Expo Router harus responsif dan tidak tertutup navigation buttons Android.
+
+## 🔍 Analisis Masalah
+
+### Fitur yang Terkena Dampak
+
+| Fitur | Layout File | Status |
+|-------|-------------|--------|
+| Event | `app/(application)/(user)/event/(tabs)/_layout.tsx` | ❌ Tidak responsif |
+| Job | `app/(application)/(user)/job/(tabs)/_layout.tsx` | ❌ Tidak responsif |
+| Voting | `app/(application)/(user)/voting/(tabs)/_layout.tsx` | ❌ Tidak responsif |
+| Donation | `app/(application)/(user)/donation/(tabs)/_layout.tsx` | ❌ Tidak responsif |
+| Investment | `app/(application)/(user)/investment/(tabs)/_layout.tsx` | ❌ Tidak responsif |
+| Collaboration | `app/(application)/(user)/collaboration/(tabs)/_layout.tsx` | ❌ Tidak responsif |
+
+### Root Cause
+
+`TabsStyles` di `styles/tabs-styles.ts` tidak menghormati safe area insets Android dengan benar.
+
+## 📝 Solusi
+
+### Opsi 1: Custom Tab Bar Component (RECOMMENDED)
+
+Buat custom `tabBar` component yang menggunakan `SafeAreaView` untuk wrapping tab bar.
+
+```typescript
+// styles/tabs-styles.ts
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export function CustomTabBar(props: any) {
+  const insets = useSafeAreaInsets();
+  
+  return (
+    <View style={{ 
+      paddingBottom: insets.bottom,
+      backgroundColor: MainColor.darkblue 
+    }}>
+      <BottomTabBar {...props} />
+    </View>
+  );
+}
+```
+
+### Opsi 2: Update tabBarStyle dengan insets
+
+Tambahkan dynamic height berdasarkan safe area insets.
+
+## ✅ Acceptance Criteria
+
+1. Tabs tidak tertutup navigation buttons Android
+2. Tabs height konsisten di semua device
+3. Tidak ada regression di iOS
+4. Semua 6 fitur ter-fix
+
+## 🔄 Status
+
+**Status**: ✅ COMPLETED
+**Created**: 2026-04-01
+**Updated**: 2026-04-01
+**Completed**: 2026-04-01
+
+## 📝 Implementation Summary
+
+### Changes Made
+
+**Tabs Layout Wrappers** - Updated 6 layout files dengan safe area handling:
+- ✅ `app/(application)/(user)/event/(tabs)/_layout.tsx`
+- ✅ `app/(application)/(user)/job/(tabs)/_layout.tsx`
+- ✅ `app/(application)/(user)/voting/(tabs)/_layout.tsx`
+- ✅ `app/(application)/(user)/donation/(tabs)/_layout.tsx`
+- ✅ `app/(application)/(user)/investment/(tabs)/_layout.tsx`
+- ✅ `app/(application)/(user)/collaboration/(tabs)/_layout.tsx`
+
+### Implementation Pattern
+
+Setiap layout file menggunakan wrapper component pattern:
+
+```typescript
+function TabsWrapper() {
+  const insets = useSafeAreaInsets();
+  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
+
+  return (
+    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
+      <Tabs screenOptions={TabsStyles}>
+        {/* Tabs content */}
+      </Tabs>
+      {/* Safe area padding untuk Android */}
+      {Platform.OS === "android" && paddingBottom > 0 && (
+        <View style={{ height: paddingBottom, backgroundColor: MainColor.darkblue }} />
+      )}
+    </View>
+  );
+}
+```
+
+### Files Changed
+- ✅ 6x Tabs layout files (Updated with safe area wrapper)
+
+### Test Results
+- ✅ TypeScript compilation: No errors
+- ✅ All 6 tabs layouts: Safe area implemented
+- ✅ Platform-specific: Android only (iOS unaffected)
+- ✅ NewWrapper: Unchanged (original version preserved)
+
+### Features Fixed
+
+| Feature | Layout File | Status |
+|---------|-------------|--------|
+| Event | `app/(application)/(user)/event/(tabs)/_layout.tsx` | ✅ Fixed |
+| Job | `app/(application)/(user)/job/(tabs)/_layout.tsx` | ✅ Fixed |
+| Voting | `app/(application)/(user)/voting/(tabs)/_layout.tsx` | ✅ Fixed |
+| Donation | `app/(application)/(user)/donation/(tabs)/_layout.tsx` | ✅ Fixed |
+| Investment | `app/(application)/(user)/investment/(tabs)/_layout.tsx` | ✅ Fixed |
+| Collaboration | `app/(application)/(user)/collaboration/(tabs)/_layout.tsx` | ✅ Fixed |
+
+### Next Steps for User Testing
+
+Test all 6 features on physical Android devices with:
+- [ ] Navigation buttons (back, home, recent)
+- [ ] Gesture navigation
+- [ ] Various screen sizes
+
+Test on iOS to ensure no regression:
+- [ ] Home button devices
+- [ ] Gesture devices (notch)
--- a/tasks/TASK-003-footer-terangkat-keyboard-close.md
+++ b/tasks/TASK-003-footer-terangkat-keyboard-close.md
@@ -0,0 +1,110 @@
+# Task: TASK-003 - Footer Terangkat Saat Keyboard Close
+
+## 📋 Deskripsi
+
+Bug: Setelah input ke text input dan menutup keyboard, bagian bawah layar berwarna putih seakan footer terangkat.
+
+## 🎯 Tujuan
+
+Footer tetap di posisi yang benar setelah keyboard ditutup, tidak ada warna putih di bawah.
+
+## 🔍 Analisis Masalah
+
+### Gejala
+- ✅ Terjadi di emulator dan device
+- ✅ Setelah input ke text input
+- ✅ Saat keyboard menutup (close)
+- ✅ Bagian bawah berwarna putih
+- ✅ Footer seperti terangkat
+
+### Root Cause (Diduga)
+
+1. **KeyboardAvoidingView behavior**
+   - `behavior={Platform.OS === "ios" ? "padding" : "height"}`
+   - Android menggunakan `height` yang bisa menyebabkan layout shift
+
+2. **Keyboard listener tidak clean up**
+   - Event listener mungkin masih aktif setelah keyboard close
+
+3. **Layout tidak re-render setelah keyboard close**
+   - Component tidak detect keyboard state change
+
+## 📝 Sub-Tasks
+
+### Task 3.1: Investigasi
+- [ ] Identifikasi screen mana yang mengalami bug ini
+- [ ] Test di berbagai screen dengan text input
+- [ ] Catat pola kejadian bug
+
+### Task 3.2: Perbaikan NewWrapper - Keyboard Handling
+- [ ] Tambah keyboard event listener
+- [ ] Handle keyboard show/hide events
+- [ ] Force re-render saat keyboard close
+- [ ] Test tanpa merusak existing functionality
+
+### Task 3.3: Perbaikan KeyboardAvoidingView
+- [ ] Evaluasi behavior untuk Android
+- [ ] Coba gunakan `KeyboardAwareScrollView` jika perlu
+- [ ] Test smooth keyboard transition
+
+### Task 3.4: Testing & Validasi
+- [ ] Test di emulator Android
+- [ ] Test di device Android
+- [ ] Test di emulator iOS
+- [ ] Test di device iOS
+- [ ] Pastikan tidak ada regression
+
+## ✅ Acceptance Criteria
+
+1. **Footer tetap di posisi** setelah keyboard close
+2. **Tidak ada warna putih** di bagian bawah
+3. **Keyboard transition smooth** (no lag)
+4. **Input tetap berfungsi** normal
+5. **No regression** di fitur lain
+
+## 📚 Referensi
+
+- [React Native KeyboardAvoidingView](https://reactnative.dev/docs/keyboardavoidingview)
+- [React Native Keyboard](https://reactnative.dev/docs/keyboard)
+- [KeyboardAwareScrollView](https://github.com/APSL/react-native-keyboard-aware-scroll-view)
+
+## 🔄 Status
+
+**Status**: ❌ Reverted
+**Created**: 2026-04-01
+**Updated**: 2026-04-01
+**Completed**: -
+
+## 📝 Notes
+
+Implementation sudah dilakukan tetapi di-revert karena berefek pada tampilan lain.
+Perlu pendekatan yang berbeda untuk fix bug ini.
+
+### Root Cause (Identified)
+
+1. **Footer menggunakan `position: absolute`** - Footer melayang di atas konten, tidak ikut layout flow
+2. **`KeyboardAvoidingView` behavior** - Layout shift saat keyboard show/hide
+3. **View wrapper dengan `flex: 0`** - ScrollView tidak expand dengan benar
+
+### Implementation Attempted
+
+**File**: `components/_ShareComponent/NewWrapper.tsx`
+
+#### Perubahan yang dicoba:
+- Hapus `View` wrapper dengan `flex: 1` di FlatList mode
+- Hapus `View` wrapper dengan `flex: 0` di ScrollView mode
+- Footer menggunakan `SafeAreaView` (normal flow, bukan position absolute)
+- Hapus `styles.footerContainer` dengan `position: absolute`
+
+### Why Reverted
+
+❌ Berdampak pada tampilan lain (footer terangkat/berantakan)
+❌ Perlu pendekatan yang lebih hati-hati
+❌ Perlu test lebih menyeluruh di semua screen
+
+### Next Steps
+
+1. **Analisis lebih detail** - Cek screen mana saja yang affected
+2. **Pendekatan bertahap** - Fix per screen atau per type
+3. **Test menyeluruh** - Pastikan tidak ada regression
+4. **Alternative solution** - Mungkin perlu custom keyboard handling