Remove the KeyboardAvoidingView in account creation (close #2333) (#2366)

* Remove the keyboardavoidingview in account creation (close #2333)

* Smaller pad on desktop/tablet

1 files changed, 54 insertions, 55 deletions

diff --git a/src/view/com/auth/create/CreateAccount.tsx b/src/view/com/auth/create/CreateAccount.tsx
index a89e6fb34..74307a631 100644
--- a/src/view/com/auth/create/CreateAccount.tsx
+++ b/src/view/com/auth/create/CreateAccount.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import {
   ActivityIndicator,
-  KeyboardAvoidingView,
   ScrollView,
   StyleSheet,
   TouchableOpacity,
@@ -28,6 +27,7 @@ import {IS_PROD} from '#/lib/constants'
 import {Step1} from './Step1'
 import {Step2} from './Step2'
 import {Step3} from './Step3'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 
 export function CreateAccount({onPressBack}: {onPressBack: () => void}) {
   const {screen} = useAnalytics()
@@ -38,6 +38,7 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) {
   const {createAccount} = useSessionApi()
   const {mutate: setBirthDate} = usePreferencesSetBirthDateMutation()
   const {mutate: setSavedFeeds} = useSetSaveFeedsMutation()
+  const {isTabletOrDesktop} = useWebMediaQueries()
 
   React.useEffect(() => {
     screen('CreateAccount')
@@ -120,64 +121,62 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) {
       title={_(msg`Create Account`)}
       description={_(msg`We're so excited to have you join us!`)}>
       <ScrollView testID="createAccount" style={pal.view}>
-        <KeyboardAvoidingView behavior="padding">
-          <View style={styles.stepContainer}>
-            {uiState.step === 1 && (
-              <Step1 uiState={uiState} uiDispatch={uiDispatch} />
-            )}
-            {uiState.step === 2 && (
-              <Step2 uiState={uiState} uiDispatch={uiDispatch} />
-            )}
-            {uiState.step === 3 && (
-              <Step3 uiState={uiState} uiDispatch={uiDispatch} />
-            )}
-          </View>
-          <View style={[s.flexRow, s.pl20, s.pr20]}>
+        <View style={styles.stepContainer}>
+          {uiState.step === 1 && (
+            <Step1 uiState={uiState} uiDispatch={uiDispatch} />
+          )}
+          {uiState.step === 2 && (
+            <Step2 uiState={uiState} uiDispatch={uiDispatch} />
+          )}
+          {uiState.step === 3 && (
+            <Step3 uiState={uiState} uiDispatch={uiDispatch} />
+          )}
+        </View>
+        <View style={[s.flexRow, s.pl20, s.pr20]}>
+          <TouchableOpacity
+            onPress={onPressBackInner}
+            testID="backBtn"
+            accessibilityRole="button">
+            <Text type="xl" style={pal.link}>
+              <Trans>Back</Trans>
+            </Text>
+          </TouchableOpacity>
+          <View style={s.flex1} />
+          {uiState.canNext ? (
             <TouchableOpacity
-              onPress={onPressBackInner}
-              testID="backBtn"
+              testID="nextBtn"
+              onPress={onPressNext}
               accessibilityRole="button">
-              <Text type="xl" style={pal.link}>
-                <Trans>Back</Trans>
-              </Text>
-            </TouchableOpacity>
-            <View style={s.flex1} />
-            {uiState.canNext ? (
-              <TouchableOpacity
-                testID="nextBtn"
-                onPress={onPressNext}
-                accessibilityRole="button">
-                {uiState.isProcessing ? (
-                  <ActivityIndicator />
-                ) : (
-                  <Text type="xl-bold" style={[pal.link, s.pr5]}>
-                    <Trans>Next</Trans>
-                  </Text>
-                )}
-              </TouchableOpacity>
-            ) : serviceInfoError ? (
-              <TouchableOpacity
-                testID="retryConnectBtn"
-                onPress={() => refetchServiceInfo()}
-                accessibilityRole="button"
-                accessibilityLabel={_(msg`Retry`)}
-                accessibilityHint=""
-                accessibilityLiveRegion="polite">
+              {uiState.isProcessing ? (
+                <ActivityIndicator />
+              ) : (
                 <Text type="xl-bold" style={[pal.link, s.pr5]}>
-                  <Trans>Retry</Trans>
+                  <Trans>Next</Trans>
                 </Text>
-              </TouchableOpacity>
-            ) : serviceInfoIsFetching ? (
-              <>
-                <ActivityIndicator color="#fff" />
-                <Text type="xl" style={[pal.text, s.pr5]}>
-                  <Trans>Connecting...</Trans>
-                </Text>
-              </>
-            ) : undefined}
-          </View>
-          <View style={s.footerSpacer} />
-        </KeyboardAvoidingView>
+              )}
+            </TouchableOpacity>
+          ) : serviceInfoError ? (
+            <TouchableOpacity
+              testID="retryConnectBtn"
+              onPress={() => refetchServiceInfo()}
+              accessibilityRole="button"
+              accessibilityLabel={_(msg`Retry`)}
+              accessibilityHint=""
+              accessibilityLiveRegion="polite">
+              <Text type="xl-bold" style={[pal.link, s.pr5]}>
+                <Trans>Retry</Trans>
+              </Text>
+            </TouchableOpacity>
+          ) : serviceInfoIsFetching ? (
+            <>
+              <ActivityIndicator color="#fff" />
+              <Text type="xl" style={[pal.text, s.pr5]}>
+                <Trans>Connecting...</Trans>
+              </Text>
+            </>
+          ) : undefined}
+        </View>
+        <View style={{height: isTabletOrDesktop ? 50 : 400}} />
       </ScrollView>
     </LoggedOutLayout>
   )