diff --git a/TASKS/fix-phone-input-ios-16.md b/TASKS/fix-phone-input-ios-16.md deleted file mode 100644 index 09bb6da..0000000 --- a/TASKS/fix-phone-input-ios-16.md +++ /dev/null @@ -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"; - - - - {/* Content */} - - -``` - -**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) - - - - -// Di LoginView -import { KeyboardAwareScrollView } from "react-native-keyboard-controller"; - - - {/* Content */} - -``` - -**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 ( - - } - > - - - {/* Title Section */} - - WELCOME TO - - HIPMI BADUNG APPS - - - - - - {/* Phone Input - Wrap dengan View untuk stability */} - - - - - - - {/* Login Button */} - - Login - - - - - {/* Terms Text */} - - Dengan menggunakan aplikasi ini, Anda telah menyetujui{" "} - { - const toUrl = `${url}/terms-of-service.html`; - openBrowser(toUrl); - }} - > - Syarat & Ketentuan - {" "} - dan seluruh kebijakan privasi yang berlaku. - - - {/* Version Info */} - - {version} | powered by muku.id - - - - - ); -} -``` - -### 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 diff --git a/android/app/build.gradle b/android/app/build.gradle index 918650b..8bf495e 100644 --- a/android/app/build.gradle +++ b/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'}\"" } diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index 4a37f8a..f079d19 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -37,7 +37,7 @@ - + diff --git a/app.config.js b/app.config.js index 4f4689a..1fe8dff 100644 --- a/app.config.js +++ b/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", @@ -32,7 +32,7 @@ export default { "Aplikasi membutuhkan akses lokasi untuk menampilkan peta.", }, associatedDomains: [ - "applinks:cld-dkr-hipmi-stg.wibudev.com", + "applinks:hipmi.muku.id", ], buildNumber: "7", }, @@ -45,7 +45,7 @@ export default { }, 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: "/", }, ],