Better screen transitions for auth flow (#7803)

2025-09-23 20:04:22 +03:00
parent 6d85fe05d1
commit 7916c73b09
13 changed files with 265 additions and 216 deletions
@@ -1,5 +1,6 @@
 import {type StyleProp, type ViewStyle} from 'react-native'
 import Animated, {
+  Easing,
  FadeIn,
  FadeOut,
  SlideInLeft,
@@ -13,17 +14,25 @@ export function ScreenTransition({
  direction,
  style,
  children,
+  enabledWeb,
 }: {
  direction: 'Backward' | 'Forward'
  style?: StyleProp<ViewStyle>
  children: React.ReactNode
+  enabledWeb?: boolean
 }) {
-  const entering = direction === 'Forward' ? SlideInRight : SlideInLeft
+  const entering =
+    direction === 'Forward'
+      ? SlideInRight.easing(Easing.out(Easing.exp))
+      : SlideInLeft.easing(Easing.out(Easing.exp))
+  const webEntering = enabledWeb ? FadeIn.duration(90) : undefined
+  const exiting = FadeOut.duration(90) // Totally vibes based
+  const webExiting = enabledWeb ? FadeOut.duration(90) : undefined

  return (
    <Animated.View
-      entering={isWeb ? FadeIn.duration(90) : entering}
-      exiting={FadeOut.duration(90)} // Totally vibes based
+      entering={isWeb ? webEntering : entering}
+      exiting={isWeb ? webExiting : exiting}
      style={style}>
      {children}
    </Animated.View>
@@ -1,17 +0,0 @@
-import {type StyleProp, type ViewStyle} from 'react-native'
-import Animated, {FadeInRight, FadeOutLeft} from 'react-native-reanimated'
-import type React from 'react'
-
-export function ScreenTransition({
-  style,
-  children,
-}: {
-  style?: StyleProp<ViewStyle>
-  children: React.ReactNode
-}) {
-  return (
-    <Animated.View style={style} entering={FadeInRight} exiting={FadeOutLeft}>
-      {children}
-    </Animated.View>
-  )
-}
@@ -1 +0,0 @@
-export {Fragment as ScreenTransition} from 'react'
@@ -1,6 +1,6 @@
-import React, {useRef} from 'react'
+import {useEffect, useRef, useState} from 'react'
 import {KeyboardAvoidingView} from 'react-native'
-import {LayoutAnimationConfig} from 'react-native-reanimated'
+import Animated, {FadeIn, LayoutAnimationConfig} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

@@ -15,9 +15,9 @@ import {ForgotPasswordForm} from '#/screens/Login/ForgotPasswordForm'
 import {LoginForm} from '#/screens/Login/LoginForm'
 import {PasswordUpdatedForm} from '#/screens/Login/PasswordUpdatedForm'
 import {SetNewPasswordForm} from '#/screens/Login/SetNewPasswordForm'
-import {atoms as a} from '#/alf'
+import {atoms as a, native} from '#/alf'
+import {ScreenTransition} from '#/components/ScreenTransition'
 import {ChooseAccountForm} from './ChooseAccountForm'
-import {ScreenTransition} from './ScreenTransition'

 enum Forms {
  Login,
@@ -27,6 +27,14 @@ enum Forms {
  PasswordUpdated,
 }

+const OrderedForms = [
+  Forms.ChooseAccount,
+  Forms.Login,
+  Forms.ForgotPassword,
+  Forms.SetNewPassword,
+  Forms.PasswordUpdated,
+] as const
+
 export const Login = ({onPressBack}: {onPressBack: () => void}) => {
  const {_} = useLingui()
  const failedAttemptCountRef = useRef(0)
@@ -38,20 +46,23 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
    acc => acc.did === requestedAccountSwitchTo,
  )

-  const [error, setError] = React.useState<string>('')
-  const [serviceUrl, setServiceUrl] = React.useState<string>(
+  const [error, setError] = useState('')
+  const [serviceUrl, setServiceUrl] = useState(
    requestedAccount?.service || DEFAULT_SERVICE,
  )
-  const [initialHandle, setInitialHandle] = React.useState<string>(
+  const [initialHandle, setInitialHandle] = useState(
    requestedAccount?.handle || '',
  )
-  const [currentForm, setCurrentForm] = React.useState<Forms>(
+  const [currentForm, setCurrentForm] = useState<Forms>(
    requestedAccount
      ? Forms.Login
      : accounts.length
        ? Forms.ChooseAccount
        : Forms.Login,
  )
+  const [screenTransitionDirection, setScreenTransitionDirection] = useState<
+    'Forward' | 'Backward'
+  >('Forward')

  const {
    data: serviceDescription,
@@ -64,15 +75,18 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
      setServiceUrl(account.service)
    }
    setInitialHandle(account?.handle || '')
-    setCurrentForm(Forms.Login)
+    gotoForm(Forms.Login)
  }

  const gotoForm = (form: Forms) => {
    setError('')
+    const index = OrderedForms.indexOf(currentForm)
+    const nextIndex = OrderedForms.indexOf(form)
+    setScreenTransitionDirection(index < nextIndex ? 'Forward' : 'Backward')
    setCurrentForm(form)
  }

-  React.useEffect(() => {
+  useEffect(() => {
    if (serviceError) {
      setError(
        _(
@@ -89,12 +103,13 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
  }, [serviceError, serviceUrl, _])

  const onPressForgotPassword = () => {
-    setCurrentForm(Forms.ForgotPassword)
+    gotoForm(Forms.ForgotPassword)
    logEvent('signin:forgotPasswordPressed', {})
  }

  const handlePressBack = () => {
    onPressBack()
+    setScreenTransitionDirection('Backward')
    logEvent('signin:backPressed', {
      failedAttemptsCount: failedAttemptCountRef.current,
    })
@@ -106,7 +121,6 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
      timeTakenSeconds: Math.round((Date.now() - startTimeRef.current) / 1000),
      failedAttemptsCount: failedAttemptCountRef.current,
    })
-    setCurrentForm(Forms.Login)
  }

  const onAttemptFailed = () => {
@@ -187,16 +201,22 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
  }

  return (
-    <KeyboardAvoidingView testID="signIn" behavior="padding" style={a.flex_1}>
-      <LoggedOutLayout
-        leadin=""
-        title={title}
-        description={description}
-        scrollable>
-        <LayoutAnimationConfig skipEntering skipExiting>
-          <ScreenTransition key={currentForm}>{content}</ScreenTransition>
-        </LayoutAnimationConfig>
-      </LoggedOutLayout>
-    </KeyboardAvoidingView>
+    <Animated.View style={a.flex_1} entering={native(FadeIn.duration(90))}>
+      <KeyboardAvoidingView testID="signIn" behavior="padding" style={a.flex_1}>
+        <LoggedOutLayout
+          leadin=""
+          title={title}
+          description={description}
+          scrollable>
+          <LayoutAnimationConfig skipEntering>
+            <ScreenTransition
+              key={currentForm}
+              direction={screenTransitionDirection}>
+              {content}
+            </ScreenTransition>
+          </LayoutAnimationConfig>
+        </LoggedOutLayout>
+      </KeyboardAvoidingView>
+    </Animated.View>
  )
 }
@@ -8,7 +8,6 @@ import {nanoid} from 'nanoid/non-secure'
 import {createFullHandle} from '#/lib/strings/handles'
 import {logger} from '#/logger'
 import {isAndroid, isIOS, isNative, isWeb} from '#/platform/detection'
-import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useSignupContext} from '#/screens/Signup/state'
 import {CaptchaWebView} from '#/screens/Signup/StepCaptcha/CaptchaWebView'
 import {atoms as a, useTheme} from '#/alf'
@@ -143,7 +142,7 @@ function StepCaptchaInner({
  }, [dispatch, state.handle])

  return (
-    <ScreenTransition>
+    <>
      <View style={[a.gap_lg, a.pt_lg]}>
        <View
          style={[
@@ -171,7 +170,7 @@ function StepCaptchaInner({
        isLoading={state.isLoading}
        onBackPress={onBackPress}
      />
-    </ScreenTransition>
+    </>
  )
 }

@@ -19,7 +19,6 @@ import {
  checkHandleAvailability,
  useHandleAvailabilityQuery,
 } from '#/state/queries/handle-availability'
-import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useSignupContext} from '#/screens/Signup/state'
 import {atoms as a, native, useTheme} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
@@ -141,7 +140,7 @@ export function StepHandle() {
    !validCheck.totalLength

  return (
-    <ScreenTransition>
+    <>
      <View style={[a.gap_sm, a.pt_lg, a.z_10]}>
        <View>
          <TextField.Root isInvalid={textFieldInvalid}>
@@ -252,7 +251,7 @@ export function StepHandle() {
          onNextPress={onNextPress}
        />
      </Animated.View>
-    </ScreenTransition>
+    </>
  )
 }

@@ -7,7 +7,6 @@ import type tldts from 'tldts'

 import {isEmailMaybeInvalid} from '#/lib/strings/email'
 import {logger} from '#/logger'
-import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {is13, is18, useSignupContext} from '#/screens/Signup/state'
 import {Policies} from '#/screens/Signup/StepInfo/Policies'
 import {atoms as a, native} from '#/alf'
@@ -147,7 +146,7 @@ export function StepInfo({
  }

  return (
-    <ScreenTransition>
+    <>
      <View style={[a.gap_md, a.pt_lg]}>
        <FormError error={state.error} />
        <HostingProvider
@@ -292,6 +291,6 @@ export function StepInfo({
        onRetryPress={refetchServer}
        overrideNextText={hasWarnedEmail ? _(msg`It's correct`) : undefined}
      />
-    </ScreenTransition>
+    </>
  )
 }
@@ -23,11 +23,12 @@ import {
 import {StepCaptcha} from '#/screens/Signup/StepCaptcha'
 import {StepHandle} from '#/screens/Signup/StepHandle'
 import {StepInfo} from '#/screens/Signup/StepInfo'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, native, useBreakpoints, useTheme} from '#/alf'
 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
 import {Divider} from '#/components/Divider'
 import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {InlineLinkText} from '#/components/Link'
+import {ScreenTransition} from '#/components/ScreenTransition'
 import {Text} from '#/components/Typography'
 import {GCP_PROJECT_ID} from '#/env'
 import * as bsky from '#/types/bsky'
@@ -116,109 +117,120 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
  }, [])

  return (
-    <SignupContext.Provider value={{state, dispatch}}>
-      <LoggedOutLayout
-        leadin=""
-        title={_(msg`Create Account`)}
-        description={_(msg`We're so excited to have you join us!`)}
-        scrollable>
-        <View testID="createAccount" style={a.flex_1}>
-          {showStarterPackCard &&
-          bsky.dangerousIsType<AppBskyGraphStarterpack.Record>(
-            starterPack.record,
-            AppBskyGraphStarterpack.isRecord,
-          ) ? (
-            <Animated.View entering={!isFetchedAtMount ? FadeIn : undefined}>
-              <LinearGradientBackground
-                style={[a.mx_lg, a.p_lg, a.gap_sm, a.rounded_sm]}>
-                <Text style={[a.font_bold, a.text_xl, {color: 'white'}]}>
-                  {starterPack.record.name}
-                </Text>
-                <Text style={[{color: 'white'}]}>
-                  {starterPack.feeds?.length ? (
-                    <Trans>
-                      You'll follow the suggested users and feeds once you
-                      finish creating your account!
-                    </Trans>
+    <Animated.View exiting={native(FadeIn.duration(90))} style={a.flex_1}>
+      <SignupContext.Provider value={{state, dispatch}}>
+        <LoggedOutLayout
+          leadin=""
+          title={_(msg`Create Account`)}
+          description={_(msg`We're so excited to have you join us!`)}
+          scrollable>
+          <View testID="createAccount" style={a.flex_1}>
+            {showStarterPackCard &&
+            bsky.dangerousIsType<AppBskyGraphStarterpack.Record>(
+              starterPack.record,
+              AppBskyGraphStarterpack.isRecord,
+            ) ? (
+              <Animated.View entering={!isFetchedAtMount ? FadeIn : undefined}>
+                <LinearGradientBackground
+                  style={[a.mx_lg, a.p_lg, a.gap_sm, a.rounded_sm]}>
+                  <Text style={[a.font_bold, a.text_xl, {color: 'white'}]}>
+                    {starterPack.record.name}
+                  </Text>
+                  <Text style={[{color: 'white'}]}>
+                    {starterPack.feeds?.length ? (
+                      <Trans>
+                        You'll follow the suggested users and feeds once you
+                        finish creating your account!
+                      </Trans>
+                    ) : (
+                      <Trans>
+                        You'll follow the suggested users once you finish
+                        creating your account!
+                      </Trans>
+                    )}
+                  </Text>
+                </LinearGradientBackground>
+              </Animated.View>
+            ) : null}
+            <LayoutAnimationConfig skipEntering>
+              <ScreenTransition
+                key={state.activeStep}
+                direction={state.screenTransitionDirection}>
+                <View
+                  style={[
+                    a.flex_1,
+                    a.px_xl,
+                    a.pt_2xl,
+                    !gtMobile && {paddingBottom: 100},
+                  ]}>
+                  <View style={[a.gap_sm, a.pb_3xl]}>
+                    <Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
+                      <Trans>
+                        Step {state.activeStep + 1} of{' '}
+                        {state.serviceDescription &&
+                        !state.serviceDescription.phoneVerificationRequired
+                          ? '2'
+                          : '3'}
+                      </Trans>
+                    </Text>
+                    <Text style={[a.text_3xl, a.font_bold]}>
+                      {state.activeStep === SignupStep.INFO ? (
+                        <Trans>Your account</Trans>
+                      ) : state.activeStep === SignupStep.HANDLE ? (
+                        <Trans>Choose your username</Trans>
+                      ) : (
+                        <Trans>Complete the challenge</Trans>
+                      )}
+                    </Text>
+                  </View>
+
+                  {state.activeStep === SignupStep.INFO ? (
+                    <StepInfo
+                      onPressBack={onPressBack}
+                      isLoadingStarterPack={
+                        isFetchingStarterPack && !isErrorStarterPack
+                      }
+                      isServerError={isError}
+                      refetchServer={refetch}
+                    />
+                  ) : state.activeStep === SignupStep.HANDLE ? (
+                    <StepHandle />
                  ) : (
-                    <Trans>
-                      You'll follow the suggested users once you finish creating
-                      your account!
-                    </Trans>
+                    <StepCaptcha />
                  )}
-                </Text>
-              </LinearGradientBackground>
-            </Animated.View>
-          ) : null}
-          <View
-            style={[
-              a.flex_1,
-              a.px_xl,
-              a.pt_2xl,
-              !gtMobile && {paddingBottom: 100},
-            ]}>
-            <View style={[a.gap_sm, a.pb_sm]}>
-              <Text
-                style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium]}>
-                <Trans>
-                  Step {state.activeStep + 1} of{' '}
-                  {state.serviceDescription &&
-                  !state.serviceDescription.phoneVerificationRequired
-                    ? '2'
-                    : '3'}
-                </Trans>
-              </Text>
-              <Text style={[a.text_3xl, a.font_heavy]}>
-                {state.activeStep === SignupStep.INFO ? (
-                  <Trans>Your account</Trans>
-                ) : state.activeStep === SignupStep.HANDLE ? (
-                  <Trans>Choose your username</Trans>
-                ) : (
-                  <Trans>Complete the challenge</Trans>
-                )}
-              </Text>
-            </View>

-            <LayoutAnimationConfig skipEntering skipExiting>
-              {state.activeStep === SignupStep.INFO ? (
-                <StepInfo
-                  onPressBack={onPressBack}
-                  isLoadingStarterPack={
-                    isFetchingStarterPack && !isErrorStarterPack
-                  }
-                  isServerError={isError}
-                  refetchServer={refetch}
-                />
-              ) : state.activeStep === SignupStep.HANDLE ? (
-                <StepHandle />
-              ) : (
-                <StepCaptcha />
-              )}
+                  <Divider />
+
+                  <View
+                    style={[
+                      a.w_full,
+                      a.py_lg,
+                      a.flex_row,
+                      a.gap_md,
+                      a.align_center,
+                    ]}>
+                    <AppLanguageDropdown />
+                    <Text
+                      style={[
+                        a.flex_1,
+                        t.atoms.text_contrast_medium,
+                        !gtMobile && a.text_md,
+                      ]}>
+                      <Trans>Having trouble?</Trans>{' '}
+                      <InlineLinkText
+                        label={_(msg`Contact support`)}
+                        to={FEEDBACK_FORM_URL({email: state.email})}
+                        style={[!gtMobile && a.text_md]}>
+                        <Trans>Contact support</Trans>
+                      </InlineLinkText>
+                    </Text>
+                  </View>
+                </View>
+              </ScreenTransition>
            </LayoutAnimationConfig>
-
-            <Divider />
-
-            <View
-              style={[a.w_full, a.py_lg, a.flex_row, a.gap_md, a.align_center]}>
-              <AppLanguageDropdown />
-              <Text
-                style={[
-                  a.flex_1,
-                  t.atoms.text_contrast_medium,
-                  !gtMobile && a.text_md,
-                ]}>
-                <Trans>Having trouble?</Trans>{' '}
-                <InlineLinkText
-                  label={_(msg`Contact support`)}
-                  to={FEEDBACK_FORM_URL({email: state.email})}
-                  style={[!gtMobile && a.text_md]}>
-                  <Trans>Contact support</Trans>
-                </InlineLinkText>
-              </Text>
-            </View>
          </View>
-        </View>
-      </LoggedOutLayout>
-    </SignupContext.Provider>
+        </LoggedOutLayout>
+      </SignupContext.Provider>
+    </Animated.View>
  )
 }
@@ -41,6 +41,7 @@ type ErrorField =
 export type SignupState = {
  hasPrev: boolean
  activeStep: SignupStep
+  screenTransitionDirection: 'Forward' | 'Backward'

  serviceUrl: string
  serviceDescription?: ServiceDescription
@@ -84,6 +85,7 @@ export type SignupAction =
 export const initialState: SignupState = {
  hasPrev: false,
  activeStep: SignupStep.INFO,
+  screenTransitionDirection: 'Forward',

  serviceUrl: DEFAULT_SERVICE,
  serviceDescription: undefined,
@@ -126,7 +128,7 @@ export function reducer(s: SignupState, a: SignupAction): SignupState {
  switch (a.type) {
    case 'prev': {
      if (s.activeStep !== SignupStep.INFO) {
-        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+        next.screenTransitionDirection = 'Backward'
        next.activeStep--
        next.error = ''
        next.errorField = undefined
@@ -135,7 +137,7 @@ export function reducer(s: SignupState, a: SignupAction): SignupState {
    }
    case 'next': {
      if (s.activeStep !== SignupStep.CAPTCHA) {
-        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+        next.screenTransitionDirection = 'Forward'
        next.activeStep++
        next.error = ''
        next.errorField = undefined
@@ -8,7 +8,7 @@ import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
 import {StarterPack} from '#/components/icons/StarterPack'
-import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
+import {ScreenTransition} from '#/components/ScreenTransition'
 import {Text} from '#/components/Typography'

 export function StepDetails() {
@@ -23,7 +23,7 @@ export function StepDetails() {
  })

  return (
-    <ScreenTransition direction={state.transitionDirection}>
+    <ScreenTransition direction={state.transitionDirection} enabledWeb>
      <View style={[a.px_xl, a.gap_xl, a.mt_4xl]}>
        <View style={[a.gap_md, a.align_center, a.px_md, a.mb_md]}>
          <StarterPack width={90} gradient="sky" />
@@ -17,7 +17,7 @@ import {atoms as a, useTheme} from '#/alf'
 import {SearchInput} from '#/components/forms/SearchInput'
 import {useThrottledValue} from '#/components/hooks/useThrottledValue'
 import {Loader} from '#/components/Loader'
-import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
+import {ScreenTransition} from '#/components/ScreenTransition'
 import {WizardFeedCard} from '#/components/StarterPack/Wizard/WizardListCard'
 import {Text} from '#/components/Typography'

@@ -79,7 +79,10 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
  }

  return (
-    <ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}>
+    <ScreenTransition
+      style={[a.flex_1]}
+      direction={state.transitionDirection}
+      enabledWeb>
      <View style={[a.border_b, t.atoms.border_contrast_medium]}>
        <View style={[a.py_sm, a.px_md, {height: 60}]}>
          <SearchInput
@@ -13,7 +13,7 @@ import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
 import {SearchInput} from '#/components/forms/SearchInput'
 import {Loader} from '#/components/Loader'
-import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
+import {ScreenTransition} from '#/components/ScreenTransition'
 import {WizardProfileCard} from '#/components/StarterPack/Wizard/WizardListCard'
 import {Text} from '#/components/Typography'
 import type * as bsky from '#/types/bsky'
@@ -64,7 +64,10 @@ export function StepProfiles({
  }

  return (
-    <ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}>
+    <ScreenTransition
+      style={[a.flex_1]}
+      direction={state.transitionDirection}
+      enabledWeb>
      <View style={[a.border_b, t.atoms.border_contrast_medium]}>
        <View style={[a.py_sm, a.px_md, {height: 60}]}>
          <SearchInput
@@ -1,16 +1,18 @@
 import {View} from 'react-native'
+import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useHaptics} from '#/lib/haptics'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
+import {CenteredView} from '#/view/com/util/Views'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
 import {atoms as a, useTheme} from '#/alf'
 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
 import {Button, ButtonText} from '#/components/Button'
 import {Text} from '#/components/Typography'
-import {CenteredView} from '../util/Views'

 export const SplashScreen = ({
  onPressSignin,
@@ -22,68 +24,87 @@ export const SplashScreen = ({
  const t = useTheme()
  const {_} = useLingui()

+  const playHaptic = useHaptics()
  const insets = useSafeAreaInsets()

  return (
    <CenteredView style={[a.h_full, a.flex_1]}>
-      <ErrorBoundary>
-        <View style={[{flex: 1}, a.justify_center, a.align_center]}>
-          <Logo width={92} fill="sky" />
+      <Animated.View
+        entering={FadeIn.duration(90)}
+        exiting={FadeOut.duration(90)}
+        style={[a.flex_1]}>
+        <ErrorBoundary>
+          <View style={[a.flex_1, a.justify_center, a.align_center]}>
+            <Logo width={92} fill="sky" />

-          <View style={[a.pb_sm, a.pt_5xl]}>
-            <Logotype width={161} fill={t.atoms.text.color} />
+            <View style={[a.pb_sm, a.pt_5xl]}>
+              <Logotype width={161} fill={t.atoms.text.color} />
+            </View>
+
+            <Text
+              style={[
+                a.text_md,
+                a.font_bold,
+                t.atoms.text_contrast_medium,
+                a.text_center,
+              ]}>
+              <Trans>What's up?</Trans>
+            </Text>
          </View>

-          <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
-            <Trans>What's up?</Trans>
-          </Text>
-        </View>
-        <View
-          testID="signinOrCreateAccount"
-          style={[a.px_xl, a.gap_md, a.pb_2xl]}>
-          <Button
-            testID="createAccountButton"
-            onPress={onPressCreateAccount}
-            label={_(msg`Create new account`)}
-            accessibilityHint={_(
-              msg`Opens flow to create a new Bluesky account`,
-            )}
-            size="large"
-            variant="solid"
-            color="primary">
-            <ButtonText>
-              <Trans>Create account</Trans>
-            </ButtonText>
-          </Button>
-          <Button
-            testID="signInButton"
-            onPress={onPressSignin}
-            label={_(msg`Sign in`)}
-            accessibilityHint={_(
-              msg`Opens flow to sign in to your existing Bluesky account`,
-            )}
-            size="large"
-            variant="solid"
-            color="secondary">
-            <ButtonText>
-              <Trans>Sign in</Trans>
-            </ButtonText>
-          </Button>
-        </View>
-        <View
-          style={[
-            a.px_lg,
-            a.pt_md,
-            a.pb_2xl,
-            a.justify_center,
-            a.align_center,
-          ]}>
-          <View>
-            <AppLanguageDropdown />
+          <View
+            testID="signinOrCreateAccount"
+            style={[a.px_xl, a.gap_md, a.pb_2xl]}>
+            <Button
+              testID="createAccountButton"
+              onPress={() => {
+                onPressCreateAccount()
+                playHaptic('Light')
+              }}
+              label={_(msg`Create new account`)}
+              accessibilityHint={_(
+                msg`Opens flow to create a new Bluesky account`,
+              )}
+              size="large"
+              variant="solid"
+              color="primary">
+              <ButtonText>
+                <Trans>Create account</Trans>
+              </ButtonText>
+            </Button>
+            <Button
+              testID="signInButton"
+              onPress={() => {
+                onPressSignin()
+                playHaptic('Light')
+              }}
+              label={_(msg`Sign in`)}
+              accessibilityHint={_(
+                msg`Opens flow to sign in to your existing Bluesky account`,
+              )}
+              size="large"
+              variant="solid"
+              color="secondary">
+              <ButtonText>
+                <Trans>Sign in</Trans>
+              </ButtonText>
+            </Button>
          </View>
-        </View>
-        <View style={{height: insets.bottom}} />
-      </ErrorBoundary>
+          <View
+            style={[
+              a.px_lg,
+              a.pt_md,
+              a.pb_2xl,
+              a.justify_center,
+              a.align_center,
+            ]}>
+            <View>
+              <AppLanguageDropdown />
+            </View>
+          </View>
+          <View style={{height: insets.bottom}} />
+        </ErrorBoundary>
+      </Animated.View>
    </CenteredView>
  )
 }
				`@@ -1 +0,0 @@`
				`export {Fragment as ScreenTransition} from 'react'`