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

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

* Smaller pad on desktop/tablet
zio/stable
Paul Frazee 2023-12-28 19:05:17 -08:00 committed by GitHub
parent 7634b581dd
commit b9fc152749
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 54 additions and 55 deletions

View File

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