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:
2026-04-02 15:01:38 +08:00
parent 98f8c7e2bf
commit 90bc8ae343
15 changed files with 2016 additions and 364 deletions

View File

@@ -117,15 +117,15 @@ const NewWrapper = (props: NewWrapperProps) => {
ListHeaderComponent={listProps.ListHeaderComponent}
ListFooterComponent={listProps.ListFooterComponent}
ListEmptyComponent={listProps.ListEmptyComponent}
contentContainerStyle={{
contentContainerStyle={{
flexGrow: 1,
paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
}}
keyboardShouldPersistTaps="handled"
/>
</View>
{/* Footer dengan position absolute untuk stay di bawah */}
{/* Footer - tetap di bawah dengan position absolute */}
{footerComponent && !hideFooter && (
<View style={styles.footerContainer}>
<SafeAreaView
@@ -133,7 +133,7 @@ const NewWrapper = (props: NewWrapperProps) => {
style={{ backgroundColor: MainColor.darkblue }}
>
{footerComponent}
</SafeAreaView>
</SafeAreaView>
</View>
)}
@@ -163,11 +163,11 @@ const NewWrapper = (props: NewWrapperProps) => {
<View style={GStyles.stickyHeader}>{headerComponent}</View>
)}
<View style={{ flex: 0 }} collapsable={false}>
<View style={{ flex: 1 }}>
<ScrollView
contentContainerStyle={{
contentContainerStyle={{
flexGrow: 1,
paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
}}
keyboardShouldPersistTaps="handled"
refreshControl={refreshControl}
@@ -178,7 +178,7 @@ const NewWrapper = (props: NewWrapperProps) => {
</ScrollView>
</View>
{/* Footer dengan position absolute untuk stay di bawah */}
{/* Footer - tetap di bawah dengan position absolute */}
{footerComponent && !hideFooter && (
<View style={styles.footerContainer}>
<SafeAreaView