- 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
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
// TestWrapper.tsx - Wrapper sederhana untuk test keyboard handling
|
|
import { MainColor } from "@/constants/color-palet";
|
|
import {
|
|
Keyboard,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
ScrollView,
|
|
View,
|
|
} from "react-native";
|
|
import {
|
|
NativeSafeAreaViewProps,
|
|
SafeAreaView,
|
|
} from "react-native-safe-area-context";
|
|
|
|
interface TestWrapperProps {
|
|
children: React.ReactNode;
|
|
footerComponent?: React.ReactNode;
|
|
}
|
|
|
|
export function TestWrapper({ children, footerComponent }: TestWrapperProps) {
|
|
return (
|
|
<KeyboardAvoidingView
|
|
behavior="padding" // ← FIX: Gunakan padding untuk iOS & Android (NOT "height" untuk Android!)
|
|
style={{ flex: 1, backgroundColor: MainColor.darkblue }}
|
|
keyboardVerticalOffset={0}
|
|
>
|
|
<ScrollView
|
|
style={{ flex: 1 }}
|
|
contentContainerStyle={{ flexGrow: 1 }}
|
|
keyboardShouldPersistTaps="handled"
|
|
>
|
|
<View style={{ flex: 1, padding: 10 }}>{children}</View>
|
|
</ScrollView>
|
|
|
|
{footerComponent && (
|
|
<SafeAreaView
|
|
edges={["bottom"]}
|
|
style={{ flex: 1, backgroundColor: MainColor.red }}
|
|
>
|
|
{footerComponent}
|
|
</SafeAreaView>
|
|
)}
|
|
</KeyboardAvoidingView>
|
|
);
|
|
}
|