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:
67
hooks/useKeyboardForm.ts
Normal file
67
hooks/useKeyboardForm.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
// useKeyboardForm.ts - Hook untuk keyboard handling pada form
|
||||
import { Keyboard, ScrollView } from "react-native";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
export function useKeyboardForm(scrollOffset = 100) {
|
||||
const scrollViewRef = useRef<ScrollView>(null);
|
||||
const [keyboardHeight, setKeyboardHeight] = useState(0);
|
||||
const [focusedInputY, setFocusedInputY] = useState<number | null>(null);
|
||||
|
||||
// Listen to keyboard events
|
||||
useEffect(() => {
|
||||
const keyboardDidShowListener = Keyboard.addListener(
|
||||
'keyboardDidShow',
|
||||
(e) => {
|
||||
setKeyboardHeight(e.endCoordinates.height);
|
||||
}
|
||||
);
|
||||
const keyboardDidHideListener = Keyboard.addListener(
|
||||
'keyboardDidHide',
|
||||
() => {
|
||||
setKeyboardHeight(0);
|
||||
setFocusedInputY(null);
|
||||
}
|
||||
);
|
||||
|
||||
return () => {
|
||||
keyboardDidShowListener.remove();
|
||||
keyboardDidHideListener.remove();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Scroll ke focused input
|
||||
useEffect(() => {
|
||||
if (focusedInputY !== null && keyboardHeight > 0 && scrollViewRef.current) {
|
||||
setTimeout(() => {
|
||||
scrollViewRef.current?.scrollTo({
|
||||
y: Math.max(0, focusedInputY - scrollOffset),
|
||||
animated: true,
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}, [focusedInputY, keyboardHeight, scrollOffset]);
|
||||
|
||||
// Handler untuk track focused input position
|
||||
const handleInputFocus = (yPosition: number) => {
|
||||
setFocusedInputY(yPosition);
|
||||
};
|
||||
|
||||
// Helper untuk create onFocus handler
|
||||
const createFocusHandler = () => {
|
||||
return (e: any) => {
|
||||
e.target?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
|
||||
if (pageY !== null) {
|
||||
handleInputFocus(pageY);
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
scrollViewRef,
|
||||
keyboardHeight,
|
||||
focusedInputY,
|
||||
handleInputFocus,
|
||||
createFocusHandler,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user