Docs: add task breakdown untuk fix phone input iOS 16+
- Add TASKS/fix-phone-input-ios-16.md dengan analisis lengkap - 3 opsi solusi: KeyboardAvoidingView, Keyboard Controller, Custom Input - Detailed implementation guidelines - Testing checklist untuk iOS 16, 17, 18 Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
@@ -1,337 +0,0 @@
|
|||||||
# Crowdfunding Page Redesign - Modern UI Enhancement
|
|
||||||
|
|
||||||
## 📋 Ringkasan Task
|
|
||||||
Redesign halaman Crowdfunding (`app/(application)/(user)/crowdfunding/index.tsx`) untuk menciptakan tampilan yang lebih modern, menarik, dan user-friendly dengan visual hierarchy yang lebih baik.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎯 Tujuan
|
|
||||||
1. Meningkatkan visual appeal dengan desain card yang modern
|
|
||||||
2. Memperbaiki spacing dan layout untuk readability yang lebih baik
|
|
||||||
3. Menambahkan elemen visual (icon, color accent) untuk navigasi yang lebih intuitif
|
|
||||||
4. Menciptakan konsistensi dengan design system aplikasi HIPMI
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📁 File yang Terlibat
|
|
||||||
|
|
||||||
### File Utama
|
|
||||||
- **Target**: `app/(application)/(user)/crowdfunding/index.tsx`
|
|
||||||
|
|
||||||
### Komponen yang Mungkin Digunakan
|
|
||||||
- `ViewWrapper` - Wrapper utama
|
|
||||||
- `StackCustom` - Layout vertikal
|
|
||||||
- `Grid` & `Grid.Col` - Layout horizontal
|
|
||||||
- `TextCustom` - Typography
|
|
||||||
- `BaseBox` / `AdminBasicBox` - Card container
|
|
||||||
- `ClickableCustom` - Interactive element
|
|
||||||
- `Feather` / `Ionicons` - Icons
|
|
||||||
|
|
||||||
### Constants
|
|
||||||
- `MainColor` - Color palette
|
|
||||||
- `ICON_SIZE_SMALL`, `ICON_SIZE_BASE` - Icon sizing
|
|
||||||
|
|
||||||
### Assets
|
|
||||||
- `@/assets/images/constants/crowd-hipmi.png` - Header image
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔍 Analisis Kondisi Saat Ini
|
|
||||||
|
|
||||||
### Kelemahan Design Sekarang
|
|
||||||
1. **Header Image**
|
|
||||||
- Plain image tanpa overlay atau title
|
|
||||||
- Tidak ada visual hierarchy
|
|
||||||
|
|
||||||
2. **Card List**
|
|
||||||
- BaseBox terlalu simple, kurang depth
|
|
||||||
- Tidak ada shadow atau elevation
|
|
||||||
- Border radius mungkin kurang smooth
|
|
||||||
- Spacing antar elemen kurang konsisten
|
|
||||||
|
|
||||||
3. **Typography**
|
|
||||||
- Judul dan deskripsi kurang kontras
|
|
||||||
- Tidak ada visual emphasis yang kuat
|
|
||||||
|
|
||||||
4. **Navigation**
|
|
||||||
- Chevron icon terlalu plain
|
|
||||||
- Tidak ada visual feedback saat hover/press
|
|
||||||
|
|
||||||
5. **Color Usage**
|
|
||||||
- Kurang color accent untuk membedakan sections
|
|
||||||
- Monoton dengan warna yang ada
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎨 Rencana Desain
|
|
||||||
|
|
||||||
### 1. Header Section Enhancement
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────┐
|
|
||||||
│ [Hero Image dengan Overlay] │
|
|
||||||
│ ┌─────────────────────────────┐ │
|
|
||||||
│ │ Crowdfunding │ │
|
|
||||||
│ │ Platform Investasi & Donasi │ │
|
|
||||||
│ └─────────────────────────────┘ │
|
|
||||||
└─────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**Implementasi:**
|
|
||||||
- Image dengan overlay gradient untuk text readability
|
|
||||||
- Title "Crowdfunding" dengan subtitle
|
|
||||||
- Rounded corners dengan overflow hidden
|
|
||||||
- Height: ~180-200px
|
|
||||||
|
|
||||||
### 2. Card Design Modern
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────┐
|
|
||||||
│ [Icon] Investasi → │
|
|
||||||
│ Deskripsi singkat... │
|
|
||||||
│ (2-3 baris max) │
|
|
||||||
└─────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**Implementasi:**
|
|
||||||
- Card dengan:
|
|
||||||
- Background gradient atau solid color dengan tint
|
|
||||||
- Shadow/elevation untuk depth
|
|
||||||
- Border radius: 12-16px
|
|
||||||
- Padding: 16-20px
|
|
||||||
- Icon di kiri (Investasi & Donasi)
|
|
||||||
- Chevron di kanan dengan style yang lebih modern
|
|
||||||
|
|
||||||
### 3. Icon Integration
|
|
||||||
- **Investasi**: Icon grafik/trending (contoh: `trending-up`, `pie-chart`)
|
|
||||||
- **Donasi**: Icon hati/tangan (contoh: `heart`, `hand-heart`)
|
|
||||||
- Size: 40-48px untuk icon card
|
|
||||||
- Background icon: Circle dengan color accent
|
|
||||||
|
|
||||||
### 4. Color Scheme
|
|
||||||
```
|
|
||||||
Investasi:
|
|
||||||
- Primary: Blue/Teal gradient
|
|
||||||
- Accent: Soft blue background
|
|
||||||
- Icon: White on blue
|
|
||||||
|
|
||||||
Donasi:
|
|
||||||
- Primary: Orange/Red gradient
|
|
||||||
- Accent: Soft orange background
|
|
||||||
- Icon: White on orange
|
|
||||||
```
|
|
||||||
|
|
||||||
### 5. Typography Hierarchy
|
|
||||||
```
|
|
||||||
Header Title: bold, x-large (20-22px)
|
|
||||||
Header Subtitle: regular, small (14-15px), gray
|
|
||||||
Card Title: bold, large (17-18px)
|
|
||||||
Card Description: regular, base (14px), gray
|
|
||||||
```
|
|
||||||
|
|
||||||
### 6. Spacing & Layout
|
|
||||||
```
|
|
||||||
Container padding: 16px
|
|
||||||
Card margin bottom: 12-16px
|
|
||||||
Card internal padding: 16px
|
|
||||||
Gap between elements: 8-12px
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📝 Breakdown Task
|
|
||||||
|
|
||||||
### Task 1: Persiapan & Research
|
|
||||||
- [ ] Review komponen yang tersedia di `components/`
|
|
||||||
- [ ] Cek color palette di `constants/color-palet.ts`
|
|
||||||
- [ ] Identifikasi icon yang tersedia (Feather, Ionicons)
|
|
||||||
- [ ] Screenshot design sekarang untuk perbandingan
|
|
||||||
|
|
||||||
### Task 2: Setup Structure
|
|
||||||
- [ ] Buat constant untuk list menu (pindahkan dari component body)
|
|
||||||
- [ ] Tambahkan icon mapping untuk setiap menu item
|
|
||||||
- [ ] Setup color scheme untuk setiap card
|
|
||||||
|
|
||||||
### Task 3: Header Redesign
|
|
||||||
- [ ] Buat container dengan overflow hidden
|
|
||||||
- [ ] Tambahkan image dengan overlay gradient
|
|
||||||
- [ ] Tambahkan title "Crowdfunding" dengan text white
|
|
||||||
- [ ] Tambahkan subtitle (opsional)
|
|
||||||
- [ ] Test di berbagai ukuran layar
|
|
||||||
|
|
||||||
### Task 4: Card Component
|
|
||||||
- [ ] Buat custom card component atau modify BaseBox
|
|
||||||
- [ ] Tambahkan shadow/elevation
|
|
||||||
- [ ] Tambahkan border radius yang smooth
|
|
||||||
- [ ] Setup gradient background (opsional)
|
|
||||||
- [ ] Tambahkan visual feedback saat press
|
|
||||||
|
|
||||||
### Task 5: Icon Integration
|
|
||||||
- [ ] Pilih icon yang sesuai untuk setiap menu
|
|
||||||
- [ ] Buat icon container dengan background color
|
|
||||||
- [ ] Setup icon size dan positioning
|
|
||||||
- [ ] Test visibility di berbagai device
|
|
||||||
|
|
||||||
### Task 6: Typography & Content
|
|
||||||
- [ ] Apply text hierarchy (title, subtitle, desc)
|
|
||||||
- [ ] Truncate description jika terlalu panjang (max 2-3 baris)
|
|
||||||
- [ ] Ensure text contrast yang baik
|
|
||||||
- [ ] Test dengan text panjang
|
|
||||||
|
|
||||||
### Task 7: Polish & Refinement
|
|
||||||
- [ ] Adjust spacing dan padding
|
|
||||||
- [ ] Test di light/dark mode (jika applicable)
|
|
||||||
- [ ] Test di berbagai ukuran layar (responsive)
|
|
||||||
- [ ] Add smooth transitions/animations
|
|
||||||
|
|
||||||
### Task 8: Testing
|
|
||||||
- [ ] Test navigation ke setiap halaman
|
|
||||||
- [ ] Test di iOS simulator
|
|
||||||
- [ ] Test di Android emulator
|
|
||||||
- [ ] Test di device fisik (jika memungkinkan)
|
|
||||||
- [ ] Check performance (no lag saat scroll)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 💻 Implementation Guidelines
|
|
||||||
|
|
||||||
### Code Structure Example
|
|
||||||
```typescript
|
|
||||||
// Constants
|
|
||||||
const CROWDFUNDING_MENU = [
|
|
||||||
{
|
|
||||||
title: "Investasi",
|
|
||||||
desc: "Buat investasi dan jual beli saham lebih mudah dengan pengguna lain.",
|
|
||||||
path: "investment/(tabs)",
|
|
||||||
icon: "trending-up",
|
|
||||||
color: MainColor.blue,
|
|
||||||
gradient: ["#667eea", "#764ba2"],
|
|
||||||
},
|
|
||||||
// ...
|
|
||||||
];
|
|
||||||
|
|
||||||
// Component
|
|
||||||
export default function Crowdfunding() {
|
|
||||||
const renderHeader = () => (
|
|
||||||
<View style={styles.headerContainer}>
|
|
||||||
<Image source={...} style={styles.headerImage} />
|
|
||||||
<View style={styles.headerOverlay}>
|
|
||||||
<TextCustom bold size="x-large">Crowdfunding</TextCustom>
|
|
||||||
<TextCustom>Platform Investasi & Donasi</TextCustom>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderCard = (item: CrowdfundingMenuItem) => (
|
|
||||||
<ClickableCustom onPress={...} style={styles.card}>
|
|
||||||
<View style={[styles.iconContainer, { backgroundColor: item.color }]}>
|
|
||||||
<Feather name={item.icon} size={24} color={MainColor.white} />
|
|
||||||
</View>
|
|
||||||
<Grid.Col span={8}>
|
|
||||||
<TextCustom bold size="large">{item.title}</TextCustom>
|
|
||||||
<TextCustom numberOfLines={2}>{item.desc}</TextCustom>
|
|
||||||
</Grid.Col>
|
|
||||||
<Feather name="chevron-right" size={ICON_SIZE_SMALL} />
|
|
||||||
</ClickableCustom>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ViewWrapper>
|
|
||||||
<StackCustom>
|
|
||||||
{renderHeader()}
|
|
||||||
{CROWDFUNDING_MENU.map(renderCard)}
|
|
||||||
</StackCustom>
|
|
||||||
</ViewWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Style Guidelines
|
|
||||||
```typescript
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
headerContainer: {
|
|
||||||
position: 'relative',
|
|
||||||
borderRadius: 16,
|
|
||||||
overflow: 'hidden',
|
|
||||||
marginBottom: 20,
|
|
||||||
},
|
|
||||||
headerOverlay: {
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
padding: 16,
|
|
||||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
|
||||||
},
|
|
||||||
card: {
|
|
||||||
backgroundColor: MainColor.white,
|
|
||||||
borderRadius: 16,
|
|
||||||
padding: 16,
|
|
||||||
marginBottom: 12,
|
|
||||||
elevation: 4,
|
|
||||||
shadowColor: '#000',
|
|
||||||
shadowOffset: { width: 0, height: 2 },
|
|
||||||
shadowOpacity: 0.1,
|
|
||||||
shadowRadius: 4,
|
|
||||||
},
|
|
||||||
iconContainer: {
|
|
||||||
width: 48,
|
|
||||||
height: 48,
|
|
||||||
borderRadius: 24,
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
marginRight: 12,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## ✅ Acceptance Criteria
|
|
||||||
|
|
||||||
### Visual
|
|
||||||
- [ ] Header dengan overlay text yang readable
|
|
||||||
- [ ] Card dengan shadow/elevation yang jelas
|
|
||||||
- [ ] Icon untuk setiap menu item
|
|
||||||
- [ ] Color accent yang berbeda untuk Investasi & Donasi
|
|
||||||
- [ ] Typography hierarchy yang jelas
|
|
||||||
|
|
||||||
### Functional
|
|
||||||
- [ ] Navigation ke halaman tujuan berfungsi
|
|
||||||
- [ ] Responsive di berbagai ukuran layar
|
|
||||||
- [ ] No console errors atau warnings
|
|
||||||
- [ ] Smooth scroll (60fps)
|
|
||||||
|
|
||||||
### Code Quality
|
|
||||||
- [ ] Code terorganisir dengan baik
|
|
||||||
- [ ] Components terpisah untuk reusability
|
|
||||||
- [ ] Constants untuk data statis
|
|
||||||
- [ ] Comments untuk logic yang kompleks
|
|
||||||
- [ ] TypeScript types yang proper
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📊 Estimated Effort
|
|
||||||
- **Complexity**: Low-Medium
|
|
||||||
- **Time Estimate**: 2-3 jam
|
|
||||||
- **Risk Level**: Low (tidak ada breaking changes)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔗 References
|
|
||||||
- Design Reference: `screens/Forum/ViewBeranda3.tsx` (untuk pagination pattern)
|
|
||||||
- Color Palette: `constants/color-palet.ts`
|
|
||||||
- Icons: Feather Icons, Ionicons
|
|
||||||
- Components: `components/_ShareComponent/`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📝 Notes
|
|
||||||
- Pastikan backward compatibility (tidak breaking existing features)
|
|
||||||
- Test di device dengan screen size berbeda
|
|
||||||
- Consider accessibility (text contrast, touch target size)
|
|
||||||
- Jika ada time, tambahkan micro-interactions (scale on press, dll)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Created**: 2026-03-25
|
|
||||||
**Status**: Pending
|
|
||||||
**Priority**: Medium
|
|
||||||
369
TASKS/fix-phone-input-ios-16.md
Normal file
369
TASKS/fix-phone-input-ios-16.md
Normal file
@@ -0,0 +1,369 @@
|
|||||||
|
# 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
|
||||||
@@ -120,4 +120,9 @@ Buatkan file baru pada "Folder tujuan" dengan nama "Nama file utama" dan ubah na
|
|||||||
|
|
||||||
<!-- END Create Box -->
|
<!-- END Create Box -->
|
||||||
|
|
||||||
|
<!-- Random Prompt -->
|
||||||
|
Diskusi pada file screens/Authentication/LoginView.tsx , tentang penggunaan phone number input. Karena tidak berfungsi dengan baik pada versi ios 26 keatas
|
||||||
|
|
||||||
|
<!-- END Random Prompt -->
|
||||||
|
|
||||||
<!-- END Use Prompt Now -->
|
<!-- END Use Prompt Now -->
|
||||||
|
|||||||
Reference in New Issue
Block a user