feat: Migrate Job screens to NewWrapper_V2 with keyboard handling
- Migrate ScreenJobCreate.tsx to NewWrapper_V2
- Migrate ScreenJobEdit.tsx to NewWrapper_V2
- Add NewWrapper_V2 component with auto-scroll keyboard handling
- Add useKeyboardForm hook for keyboard management
- Add FormWrapper component for forms
- Create ScreenJobEdit.tsx from edit route (separation of concerns)
- Add documentation for keyboard implementation
- Add TASK-004 migration plan
- Fix: Footer width 100% with safe positioning
- Fix: Content padding bottom 80px for navigation bar
- Fix: Auto-scroll to focused input
- Fix: No white area when keyboard close
- Fix: Footer not raised after keyboard close
Phase 1 completed: Job screens migrated
### No Issue
This commit is contained in:
148
docs/KEYBOARD-BUG-TEST.md
Normal file
148
docs/KEYBOARD-BUG-TEST.md
Normal file
@@ -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
|
||||
346
docs/NEWWRAPPER-KEYBOARD-IMPLEMENTATION.md
Normal file
346
docs/NEWWRAPPER-KEYBOARD-IMPLEMENTATION.md
Normal file
@@ -0,0 +1,346 @@
|
||||
# NewWrapper Keyboard Handling Implementation
|
||||
|
||||
## 📋 Problem Statement
|
||||
|
||||
NewWrapper saat ini memiliki masalah keyboard handling pada Android:
|
||||
- Footer terangkat saat keyboard close
|
||||
- Muncul area putih di bawah
|
||||
- Input terpotong saat keyboard muncul
|
||||
- Tidak ada auto-scroll ke focused input
|
||||
|
||||
## 🔍 Root Cause Analysis
|
||||
|
||||
### Current NewWrapper Structure
|
||||
|
||||
```typescript
|
||||
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}>
|
||||
<View style={{ flex: 0 }}> // ← MASALAH 1: flex: 0
|
||||
<ScrollView>
|
||||
{children}
|
||||
</ScrollView>
|
||||
</View>
|
||||
<View style={{ position: "absolute" }}> // ← MASALAH 2: position absolute
|
||||
{footerComponent}
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
```
|
||||
|
||||
### Issues Identified
|
||||
|
||||
| Issue | Impact | Severity |
|
||||
|-------|--------|----------|
|
||||
| `behavior="height"` di Android | View di-resize, content terpotong | 🔴 High |
|
||||
| `flex: 0` pada View wrapper | ScrollView tidak expand dengan benar | 🔴 High |
|
||||
| Footer dengan `position: absolute` | Footer tidak ikut layout flow | 🟡 Medium |
|
||||
| Tidak ada keyboard event handling | Tidak ada auto-scroll ke input | 🟡 Medium |
|
||||
|
||||
---
|
||||
|
||||
## 💡 Proposed Solutions
|
||||
|
||||
### Option A: Full Integration (Breaking Changes)
|
||||
|
||||
Replace entire KeyboardAvoidingView logic dengan keyboard handling baru.
|
||||
|
||||
```typescript
|
||||
// NewWrapper.tsx
|
||||
export function NewWrapper({ children, footerComponent }: Props) {
|
||||
const { scrollViewRef, createFocusHandler } = useKeyboardForm();
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined}>
|
||||
<ScrollView ref={scrollViewRef} style={{ flex: 1 }}>
|
||||
{children}
|
||||
</ScrollView>
|
||||
<SafeAreaView style={{ position: 'absolute', bottom: 0 }}>
|
||||
{footerComponent}
|
||||
</SafeAreaView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Pros:**
|
||||
- ✅ Clean implementation
|
||||
- ✅ Consistent behavior across all screens
|
||||
- ✅ Single source of truth
|
||||
|
||||
**Cons:**
|
||||
- ❌ **Breaking changes** - Semua screen yang pakai NewWrapper akan affected
|
||||
- ❌ **Need to add onFocus handlers** to all TextInput/TextArea components
|
||||
- ❌ **High risk** - May break existing screens
|
||||
- ❌ **Requires testing** all screens that use NewWrapper
|
||||
|
||||
**Impact:**
|
||||
- All existing screens using NewWrapper will be affected
|
||||
- Need to add `onFocus` handlers to all inputs
|
||||
- Need to wrap inputs with `View onStartShouldSetResponder`
|
||||
|
||||
---
|
||||
|
||||
### Option B: Opt-in Feature (Recommended) ⭐
|
||||
|
||||
Add flag to enable keyboard handling optionally (backward compatible).
|
||||
|
||||
```typescript
|
||||
// NewWrapper.tsx
|
||||
interface NewWrapperProps {
|
||||
// ... existing props
|
||||
enableKeyboardHandling?: boolean; // Default: false
|
||||
keyboardScrollOffset?: number; // Default: 100
|
||||
}
|
||||
|
||||
export function NewWrapper(props: NewWrapperProps) {
|
||||
const {
|
||||
enableKeyboardHandling = false,
|
||||
keyboardScrollOffset = 100,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
// Use keyboard hook if enabled
|
||||
const keyboardForm = enableKeyboardHandling
|
||||
? useKeyboardForm(keyboardScrollOffset)
|
||||
: null;
|
||||
|
||||
// Render different structure based on flag
|
||||
if (enableKeyboardHandling && keyboardForm) {
|
||||
return renderWithKeyboardHandling(rest, keyboardForm);
|
||||
}
|
||||
|
||||
return renderOriginal(rest);
|
||||
}
|
||||
```
|
||||
|
||||
**Pros:**
|
||||
- ✅ **Backward compatible** - No breaking changes
|
||||
- ✅ **Opt-in** - Screens yang butuh bisa enable
|
||||
- ✅ **Safe** - Existing screens tetap bekerja
|
||||
- ✅ **Gradual migration** - Bisa migrate screen by screen
|
||||
- ✅ **Low risk** - Can test with new screens first
|
||||
|
||||
**Cons:**
|
||||
- ⚠️ More code (duplicate logic)
|
||||
- ⚠️ Need to maintain 2 implementations temporarily
|
||||
|
||||
**Usage Example:**
|
||||
|
||||
```typescript
|
||||
// Existing screens - No changes needed!
|
||||
<NewWrapper footerComponent={<Footer />}>
|
||||
<Content />
|
||||
</NewWrapper>
|
||||
|
||||
// New screens with forms - Enable keyboard handling
|
||||
<NewWrapper
|
||||
enableKeyboardHandling
|
||||
keyboardScrollOffset={100}
|
||||
footerComponent={<Footer />}
|
||||
>
|
||||
<View onStartShouldSetResponder={() => true}>
|
||||
<TextInputCustom onFocus={keyboardForm.createFocusHandler()} />
|
||||
</View>
|
||||
</NewWrapper>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Option C: Create New Component (Safest)
|
||||
|
||||
Keep NewWrapper as is, create separate component for forms.
|
||||
|
||||
```typescript
|
||||
// Keep NewWrapper unchanged
|
||||
// Use FormWrapper for forms (already created!)
|
||||
```
|
||||
|
||||
**Pros:**
|
||||
- ✅ **Zero risk** - NewWrapper tidak berubah
|
||||
- ✅ **Clear separation** - Old vs New
|
||||
- ✅ **Safe for existing screens**
|
||||
- ✅ **FormWrapper already exists!**
|
||||
|
||||
**Cons:**
|
||||
- ⚠️ Multiple wrapper components
|
||||
- ⚠️ Confusion which one to use
|
||||
|
||||
**Usage:**
|
||||
```typescript
|
||||
// For regular screens
|
||||
<NewWrapper>{content}</NewWrapper>
|
||||
|
||||
// For form screens
|
||||
<FormWrapper footerComponent={<Footer />}>
|
||||
<TextInputCustom />
|
||||
</FormWrapper>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Comparison Matrix
|
||||
|
||||
| Criteria | Option A | Option B | Option C |
|
||||
|----------|----------|----------|----------|
|
||||
| **Backward Compatible** | ❌ | ✅ | ✅ |
|
||||
| **Implementation Effort** | High | Medium | Low |
|
||||
| **Risk Level** | 🔴 High | 🟡 Medium | 🟢 Low |
|
||||
| **Code Duplication** | None | Temporary | Permanent |
|
||||
| **Migration Required** | Yes | Gradual | No |
|
||||
| **Testing Required** | All screens | New screens only | New screens only |
|
||||
| **Recommended For** | Greenfield projects | Existing projects | Conservative teams |
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Recommended Approach: Option B (Opt-in)
|
||||
|
||||
### Implementation Plan
|
||||
|
||||
#### Phase 1: Add Keyboard Handling to NewWrapper (Week 1)
|
||||
|
||||
```typescript
|
||||
// Add to NewWrapper interface
|
||||
interface NewWrapperProps {
|
||||
enableKeyboardHandling?: boolean;
|
||||
keyboardScrollOffset?: number;
|
||||
}
|
||||
|
||||
// Implement dual rendering logic
|
||||
if (enableKeyboardHandling) {
|
||||
return renderWithKeyboardHandling(props);
|
||||
}
|
||||
return renderOriginal(props);
|
||||
```
|
||||
|
||||
#### Phase 2: Test with New Screens (Week 2)
|
||||
|
||||
- Test with Job Create 2 screen
|
||||
- Verify auto-scroll works
|
||||
- Verify footer stays in place
|
||||
- Test on iOS and Android
|
||||
|
||||
#### Phase 3: Gradual Migration (Week 3-4)
|
||||
|
||||
Migrate screens one by one:
|
||||
1. Event Create
|
||||
2. Donation Create
|
||||
3. Investment Create
|
||||
4. Voting Create
|
||||
5. Profile Create/Edit
|
||||
|
||||
#### Phase 4: Make Default (Next Major Version)
|
||||
|
||||
After thorough testing:
|
||||
- Make `enableKeyboardHandling` default to `true`
|
||||
- Deprecate old behavior
|
||||
- Remove old code in next major version
|
||||
|
||||
---
|
||||
|
||||
## 📝 Technical Requirements
|
||||
|
||||
### For NewWrapper with Keyboard Handling
|
||||
|
||||
```typescript
|
||||
// 1. Import hook
|
||||
import { useKeyboardForm } from "@/hooks/useKeyboardForm";
|
||||
|
||||
// 2. Use hook in component
|
||||
const { scrollViewRef, createFocusHandler } = useKeyboardForm(100);
|
||||
|
||||
// 3. Pass ref to ScrollView
|
||||
<ScrollView ref={scrollViewRef}>
|
||||
|
||||
// 4. Wrap inputs with View
|
||||
<View onStartShouldSetResponder={() => true}>
|
||||
<TextInputCustom onFocus={createFocusHandler()} />
|
||||
</View>
|
||||
```
|
||||
|
||||
### Required Changes per Screen
|
||||
|
||||
For each screen that enables keyboard handling:
|
||||
|
||||
1. **Add `enableKeyboardHandling` prop**
|
||||
2. **Wrap all TextInput/TextArea with View**
|
||||
3. **Add `onFocus` handler to inputs**
|
||||
4. **Test thoroughly**
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing Checklist
|
||||
|
||||
### For Each Screen
|
||||
|
||||
- [ ] Tap Input 1 → Auto-scroll to input
|
||||
- [ ] Tap Input 2 → Auto-scroll to input
|
||||
- [ ] Tap Input 3 → Auto-scroll to input
|
||||
- [ ] Dismiss keyboard → Footer returns to position
|
||||
- [ ] No white area at bottom
|
||||
- [ ] Footer not raised
|
||||
- [ ] Smooth transitions
|
||||
- [ ] iOS compatibility
|
||||
- [ ] Android compatibility
|
||||
|
||||
### Platforms to Test
|
||||
|
||||
- [ ] Android with navigation buttons
|
||||
- [ ] Android with gesture navigation
|
||||
- [ ] iOS with home button
|
||||
- [ ] iOS with gesture (notch)
|
||||
- [ ] Various screen sizes
|
||||
|
||||
---
|
||||
|
||||
## 📋 Decision Factors
|
||||
|
||||
### Choose Option A if:
|
||||
- ✅ Project is new (few existing screens)
|
||||
- ✅ Team has time for full migration
|
||||
- ✅ Want clean codebase immediately
|
||||
- ✅ Accept short-term disruption
|
||||
|
||||
### Choose Option B if: ⭐
|
||||
- ✅ Existing project with many screens
|
||||
- ✅ Want zero disruption to users
|
||||
- ✅ Prefer gradual migration
|
||||
- ✅ Want to test thoroughly first
|
||||
|
||||
### Choose Option C if:
|
||||
- ✅ Very conservative team
|
||||
- ✅ Cannot risk any changes to existing screens
|
||||
- ✅ OK with multiple wrapper components
|
||||
- ✅ FormWrapper is sufficient
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Next Steps
|
||||
|
||||
1. **Review this document** with team
|
||||
2. **Decide on approach** (A, B, or C)
|
||||
3. **Create implementation ticket**
|
||||
4. **Start with Phase 1**
|
||||
5. **Test thoroughly**
|
||||
6. **Roll out gradually**
|
||||
|
||||
---
|
||||
|
||||
## 📚 Related Files
|
||||
|
||||
- `components/_ShareComponent/NewWrapper.tsx` - Current wrapper
|
||||
- `components/_ShareComponent/FormWrapper.tsx` - New form wrapper
|
||||
- `hooks/useKeyboardForm.ts` - Keyboard handling hook
|
||||
- `screens/Job/ScreenJobCreate2.tsx` - Example implementation
|
||||
|
||||
---
|
||||
|
||||
## 📞 Discussion Points
|
||||
|
||||
1. **Which option do you prefer?** (A, B, or C)
|
||||
2. **How many screens use NewWrapper?**
|
||||
3. **Team capacity for migration?**
|
||||
4. **Timeline for implementation?**
|
||||
5. **Risk tolerance level?**
|
||||
|
||||
---
|
||||
|
||||
**Last Updated:** 2026-04-01
|
||||
**Status:** 📝 Under Discussion
|
||||
Reference in New Issue
Block a user