Fix broken layout in offer creation due to keyboard show/hide state c…

…hange
vexl-it · Aug 9, 2024 · a02b313 · a02b313
1 parent f54f5d2
commit a02b313
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 17 deletions.
diff --git a/apps/mobile/src/components/CRUDOfferFlow/index.tsx b/apps/mobile/src/components/CRUDOfferFlow/index.tsx
@@ -84,8 +84,8 @@ function CRUDOfferFlow({route: {params}, navigation}: Props): JSX.Element {
   )
 
   return (
-    <KeyboardAvoidingView>
-      <Screen>
+    <Screen>
+      <KeyboardAvoidingView>
         <Stack style={{height: StatusBar.currentHeight ?? 0}} />
         <Stack f={1} px="$2" pb="$2">
           {!params.offerId ? (
@@ -174,8 +174,8 @@ function CRUDOfferFlow({route: {params}, navigation}: Props): JSX.Element {
             </CRUDOfferStack.Navigator>
           </ProgressJourney>
         </Stack>
-      </Screen>
-    </KeyboardAvoidingView>
+      </KeyboardAvoidingView>
+    </Screen>
   )
 }
 

diff --git a/apps/mobile/src/components/KeyboardAvoidingView.tsx b/apps/mobile/src/components/KeyboardAvoidingView.tsx
@@ -2,16 +2,16 @@ import {type ReactNode} from 'react'
 import {
   Platform,
   KeyboardAvoidingView as RNKeyboardAvoidingView,
-  View,
 } from 'react-native'
+import {Stack} from 'tamagui'
 
 function KeyboardAvoidingView({children}: {children: ReactNode}): JSX.Element {
   return (
     <RNKeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : undefined}
       style={{flex: 1}}
     >
-      <View style={{flex: 1}}>{children}</View>
+      <Stack flex={1}>{children}</Stack>
     </RNKeyboardAvoidingView>
   )
 }

diff --git a/apps/mobile/src/components/ProgressJourney/index.tsx b/apps/mobile/src/components/ProgressJourney/index.tsx
@@ -1,6 +1,7 @@
 import {useCallback, type ReactNode} from 'react'
 import {TouchableWithoutFeedback} from 'react-native'
 import {Stack, XStack, styled} from 'tamagui'
+import {dismissKeyboardAndResolveOnLayoutUpdate} from '../../utils/dismissKeyboardPromise'
 import {useTranslation} from '../../utils/localization/I18nProvider'
 import Button from '../Button'
 
@@ -55,20 +56,24 @@ function ProgressJourney({
   const {t} = useTranslation()
 
   const onNextOrFinish = useCallback(() => {
-    if (currentPage === numberOfPages - 1) {
-      onFinish()
-    }
-    onPageChange(currentPage + 1)
+    void dismissKeyboardAndResolveOnLayoutUpdate().then(() => {
+      if (currentPage === numberOfPages - 1) {
+        onFinish()
+      }
+      onPageChange(currentPage + 1)
+    })
   }, [currentPage, numberOfPages, onFinish, onPageChange])
 
   const onBackOrSkip = useCallback(() => {
-    if (withBackButton) {
-      if (currentPage === 0) onSkip()
-      else onPageChange(currentPage - 1)
-    } else {
-      if (currentPage === numberOfPages - 1) onFinish()
-      else onSkip()
-    }
+    void dismissKeyboardAndResolveOnLayoutUpdate().then(() => {
+      if (withBackButton) {
+        if (currentPage === 0) onSkip()
+        else onPageChange(currentPage - 1)
+      } else {
+        if (currentPage === numberOfPages - 1) onFinish()
+        else onSkip()
+      }
+    })
   }, [
     currentPage,
     numberOfPages,