fix keyboard overlaying onboarding inputs (#4558)

2 files changed, 12 insertions, 3 deletions

diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx
index e231ac5ba..c916f4efc 100644
--- a/src/components/forms/DateField/index.tsx
+++ b/src/components/forms/DateField/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {View} from 'react-native'
+import {Keyboard, View} from 'react-native'
 import DatePicker from 'react-native-date-picker'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -49,7 +49,10 @@ export function DateField({
       <DateFieldButton
         label={label}
         value={value}
-        onPress={control.open}
+        onPress={() => {
+          Keyboard.dismiss()
+          control.open()
+        }}
         isInvalid={isInvalid}
         accessibilityHint={accessibilityHint}
       />
diff --git a/src/view/com/util/layouts/LoggedOutLayout.tsx b/src/view/com/util/layouts/LoggedOutLayout.tsx
index 0272a44c6..c2c080c17 100644
--- a/src/view/com/util/layouts/LoggedOutLayout.tsx
+++ b/src/view/com/util/layouts/LoggedOutLayout.tsx
@@ -3,6 +3,7 @@ import {ScrollView, StyleSheet, View} from 'react-native'
 
 import {isWeb} from '#/platform/detection'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
+import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {atoms as a} from '#/alf'
@@ -29,13 +30,18 @@ export const LoggedOutLayout = ({
     borderLeftWidth: 1,
   })
 
+  const [isKeyboardVisible] = useIsKeyboardVisible()
+
   if (isMobile) {
     if (scrollable) {
       return (
         <ScrollView
           style={styles.scrollview}
           keyboardShouldPersistTaps="handled"
-          keyboardDismissMode="on-drag">
+          keyboardDismissMode="none"
+          contentContainerStyle={[
+            {paddingBottom: isKeyboardVisible ? 300 : 0},
+          ]}>
           <View style={a.pt_md}>{children}</View>
         </ScrollView>
       )