+40

src/components/ScreenTransition.tsx

··· 1 1 + import {type StyleProp, type ViewStyle} from 'react-native' 2 2 + import Animated, { 3 3 + Easing, 4 4 + FadeIn, 5 5 + FadeOut, 6 6 + SlideInLeft, 7 7 + SlideInRight, 8 8 + } from 'react-native-reanimated' 9 9 + import type React from 'react' 10 10 + 11 11 + import {isWeb} from '#/platform/detection' 12 12 + 13 13 + export function ScreenTransition({ 14 14 + direction, 15 15 + style, 16 16 + children, 17 17 + enabledWeb, 18 18 + }: { 19 19 + direction: 'Backward' | 'Forward' 20 20 + style?: StyleProp<ViewStyle> 21 21 + children: React.ReactNode 22 22 + enabledWeb?: boolean 23 23 + }) { 24 24 + const entering = 25 25 + direction === 'Forward' 26 26 + ? SlideInRight.easing(Easing.out(Easing.exp)) 27 27 + : SlideInLeft.easing(Easing.out(Easing.exp)) 28 28 + const webEntering = enabledWeb ? FadeIn.duration(90) : undefined 29 29 + const exiting = FadeOut.duration(90) // Totally vibes based 30 30 + const webExiting = enabledWeb ? FadeOut.duration(90) : undefined 31 31 + 32 32 + return ( 33 33 + <Animated.View 34 34 + entering={isWeb ? webEntering : entering} 35 35 + exiting={isWeb ? webExiting : exiting} 36 36 + style={style}> 37 37 + {children} 38 38 + </Animated.View> 39 39 + ) 40 40 + }

-31

src/components/StarterPack/Wizard/ScreenTransition.tsx

··· 1 1 - import {type StyleProp, type ViewStyle} from 'react-native' 2 2 - import Animated, { 3 3 - FadeIn, 4 4 - FadeOut, 5 5 - SlideInLeft, 6 6 - SlideInRight, 7 7 - } from 'react-native-reanimated' 8 8 - import type React from 'react' 9 9 - 10 10 - import {isWeb} from '#/platform/detection' 11 11 - 12 12 - export function ScreenTransition({ 13 13 - direction, 14 14 - style, 15 15 - children, 16 16 - }: { 17 17 - direction: 'Backward' | 'Forward' 18 18 - style?: StyleProp<ViewStyle> 19 19 - children: React.ReactNode 20 20 - }) { 21 21 - const entering = direction === 'Forward' ? SlideInRight : SlideInLeft 22 22 - 23 23 - return ( 24 24 - <Animated.View 25 25 - entering={isWeb ? FadeIn.duration(90) : entering} 26 26 - exiting={FadeOut.duration(90)} // Totally vibes based 27 27 - style={style}> 28 28 - {children} 29 29 - </Animated.View> 30 30 - ) 31 31 - }

-17

src/screens/Login/ScreenTransition.tsx

··· 1 1 - import {type StyleProp, type ViewStyle} from 'react-native' 2 2 - import Animated, {FadeInRight, FadeOutLeft} from 'react-native-reanimated' 3 3 - import type React from 'react' 4 4 - 5 5 - export function ScreenTransition({ 6 6 - style, 7 7 - children, 8 8 - }: { 9 9 - style?: StyleProp<ViewStyle> 10 10 - children: React.ReactNode 11 11 - }) { 12 12 - return ( 13 13 - <Animated.View style={style} entering={FadeInRight} exiting={FadeOutLeft}> 14 14 - {children} 15 15 - </Animated.View> 16 16 - ) 17 17 - }

-1

src/screens/Login/ScreenTransition.web.tsx

··· 1 1 - export {Fragment as ScreenTransition} from 'react'

+43 -23

src/screens/Login/index.tsx

··· 1 1 - import React, {useRef} from 'react' 1 1 + import {useEffect, useRef, useState} from 'react' 2 2 import {KeyboardAvoidingView} from 'react-native' 3 3 - import {LayoutAnimationConfig} from 'react-native-reanimated' 3 3 + import Animated, {FadeIn, LayoutAnimationConfig} from 'react-native-reanimated' 4 4 import {msg} from '@lingui/macro' 5 5 import {useLingui} from '@lingui/react' 6 6 ··· 15 15 import {LoginForm} from '#/screens/Login/LoginForm' 16 16 import {PasswordUpdatedForm} from '#/screens/Login/PasswordUpdatedForm' 17 17 import {SetNewPasswordForm} from '#/screens/Login/SetNewPasswordForm' 18 18 - import {atoms as a} from '#/alf' 18 18 + import {atoms as a, native} from '#/alf' 19 19 + import {ScreenTransition} from '#/components/ScreenTransition' 19 20 import {ChooseAccountForm} from './ChooseAccountForm' 20 20 - import {ScreenTransition} from './ScreenTransition' 21 21 22 22 enum Forms { 23 23 Login, ··· 27 27 PasswordUpdated, 28 28 } 29 29 30 30 + const OrderedForms = [ 31 31 + Forms.ChooseAccount, 32 32 + Forms.Login, 33 33 + Forms.ForgotPassword, 34 34 + Forms.SetNewPassword, 35 35 + Forms.PasswordUpdated, 36 36 + ] as const 37 37 + 30 38 export const Login = ({onPressBack}: {onPressBack: () => void}) => { 31 39 const {_} = useLingui() 32 40 const failedAttemptCountRef = useRef(0) ··· 38 46 acc => acc.did === requestedAccountSwitchTo, 39 47 ) 40 48 41 41 - const [error, setError] = React.useState<string>('') 42 42 - const [serviceUrl, setServiceUrl] = React.useState<string>( 49 49 + const [error, setError] = useState('') 50 50 + const [serviceUrl, setServiceUrl] = useState( 43 51 requestedAccount?.service || DEFAULT_SERVICE, 44 52 ) 45 45 - const [initialHandle, setInitialHandle] = React.useState<string>( 53 53 + const [initialHandle, setInitialHandle] = useState( 46 54 requestedAccount?.handle || '', 47 55 ) 48 48 - const [currentForm, setCurrentForm] = React.useState<Forms>( 56 56 + const [currentForm, setCurrentForm] = useState<Forms>( 49 57 requestedAccount 50 58 ? Forms.Login 51 59 : accounts.length 52 60 ? Forms.ChooseAccount 53 61 : Forms.Login, 54 62 ) 63 63 + const [screenTransitionDirection, setScreenTransitionDirection] = useState< 64 64 + 'Forward' | 'Backward' 65 65 + >('Forward') 55 66 56 67 const { 57 68 data: serviceDescription, ··· 64 75 setServiceUrl(account.service) 65 76 } 66 77 setInitialHandle(account?.handle || '') 67 67 - setCurrentForm(Forms.Login) 78 78 + gotoForm(Forms.Login) 68 79 } 69 80 70 81 const gotoForm = (form: Forms) => { 71 82 setError('') 83 83 + const index = OrderedForms.indexOf(currentForm) 84 84 + const nextIndex = OrderedForms.indexOf(form) 85 85 + setScreenTransitionDirection(index < nextIndex ? 'Forward' : 'Backward') 72 86 setCurrentForm(form) 73 87 } 74 88 75 75 - React.useEffect(() => { 89 89 + useEffect(() => { 76 90 if (serviceError) { 77 91 setError( 78 92 _( ··· 89 103 }, [serviceError, serviceUrl, _]) 90 104 91 105 const onPressForgotPassword = () => { 92 92 - setCurrentForm(Forms.ForgotPassword) 106 106 + gotoForm(Forms.ForgotPassword) 93 107 logEvent('signin:forgotPasswordPressed', {}) 94 108 } 95 109 96 110 const handlePressBack = () => { 97 111 onPressBack() 112 112 + setScreenTransitionDirection('Backward') 98 113 logEvent('signin:backPressed', { 99 114 failedAttemptsCount: failedAttemptCountRef.current, 100 115 }) ··· 106 121 timeTakenSeconds: Math.round((Date.now() - startTimeRef.current) / 1000), 107 122 failedAttemptsCount: failedAttemptCountRef.current, 108 123 }) 109 109 - setCurrentForm(Forms.Login) 110 124 } 111 125 112 126 const onAttemptFailed = () => { ··· 187 201 } 188 202 189 203 return ( 190 190 - <KeyboardAvoidingView testID="signIn" behavior="padding" style={a.flex_1}> 191 191 - <LoggedOutLayout 192 192 - leadin="" 193 193 - title={title} 194 194 - description={description} 195 195 - scrollable> 196 196 - <LayoutAnimationConfig skipEntering skipExiting> 197 197 - <ScreenTransition key={currentForm}>{content}</ScreenTransition> 198 198 - </LayoutAnimationConfig> 199 199 - </LoggedOutLayout> 200 200 - </KeyboardAvoidingView> 204 204 + <Animated.View style={a.flex_1} entering={native(FadeIn.duration(90))}> 205 205 + <KeyboardAvoidingView testID="signIn" behavior="padding" style={a.flex_1}> 206 206 + <LoggedOutLayout 207 207 + leadin="" 208 208 + title={title} 209 209 + description={description} 210 210 + scrollable> 211 211 + <LayoutAnimationConfig skipEntering> 212 212 + <ScreenTransition 213 213 + key={currentForm} 214 214 + direction={screenTransitionDirection}> 215 215 + {content} 216 216 + </ScreenTransition> 217 217 + </LayoutAnimationConfig> 218 218 + </LoggedOutLayout> 219 219 + </KeyboardAvoidingView> 220 220 + </Animated.View> 201 221 ) 202 222 }

+2 -3

src/screens/Signup/StepCaptcha/index.tsx

··· 8 8 import {createFullHandle} from '#/lib/strings/handles' 9 9 import {logger} from '#/logger' 10 10 import {isAndroid, isIOS, isNative, isWeb} from '#/platform/detection' 11 11 - import {ScreenTransition} from '#/screens/Login/ScreenTransition' 12 11 import {useSignupContext} from '#/screens/Signup/state' 13 12 import {CaptchaWebView} from '#/screens/Signup/StepCaptcha/CaptchaWebView' 14 13 import {atoms as a, useTheme} from '#/alf' ··· 143 142 }, [dispatch, state.handle]) 144 143 145 144 return ( 146 146 - <ScreenTransition> 145 145 + <> 147 146 <View style={[a.gap_lg, a.pt_lg]}> 148 147 <View 149 148 style={[ ··· 171 170 isLoading={state.isLoading} 172 171 onBackPress={onBackPress} 173 172 /> 174 174 - </ScreenTransition> 173 173 + </> 175 174 ) 176 175 } 177 176

+2 -3

src/screens/Signup/StepHandle/index.tsx

··· 19 19 checkHandleAvailability, 20 20 useHandleAvailabilityQuery, 21 21 } from '#/state/queries/handle-availability' 22 22 - import {ScreenTransition} from '#/screens/Login/ScreenTransition' 23 22 import {useSignupContext} from '#/screens/Signup/state' 24 23 import {atoms as a, native, useTheme} from '#/alf' 25 24 import * as TextField from '#/components/forms/TextField' ··· 141 140 !validCheck.totalLength 142 141 143 142 return ( 144 144 - <ScreenTransition> 143 143 + <> 145 144 <View style={[a.gap_sm, a.pt_lg, a.z_10]}> 146 145 <View> 147 146 <TextField.Root isInvalid={textFieldInvalid}> ··· 252 251 onNextPress={onNextPress} 253 252 /> 254 253 </Animated.View> 255 255 - </ScreenTransition> 254 254 + </> 256 255 ) 257 256 } 258 257

+2 -3

src/screens/Signup/StepInfo/index.tsx

··· 7 7 8 8 import {isEmailMaybeInvalid} from '#/lib/strings/email' 9 9 import {logger} from '#/logger' 10 10 - import {ScreenTransition} from '#/screens/Login/ScreenTransition' 11 10 import {is13, is18, useSignupContext} from '#/screens/Signup/state' 12 11 import {Policies} from '#/screens/Signup/StepInfo/Policies' 13 12 import {atoms as a, native} from '#/alf' ··· 147 146 } 148 147 149 148 return ( 150 150 - <ScreenTransition> 149 149 + <> 151 150 <View style={[a.gap_md, a.pt_lg]}> 152 151 <FormError error={state.error} /> 153 152 <HostingProvider ··· 292 291 onRetryPress={refetchServer} 293 292 overrideNextText={hasWarnedEmail ? _(msg`It's correct`) : undefined} 294 293 /> 295 295 - </ScreenTransition> 294 294 + </> 296 295 ) 297 296 }

+112 -100

src/screens/Signup/index.tsx

··· 23 23 import {StepCaptcha} from '#/screens/Signup/StepCaptcha' 24 24 import {StepHandle} from '#/screens/Signup/StepHandle' 25 25 import {StepInfo} from '#/screens/Signup/StepInfo' 26 26 - import {atoms as a, useBreakpoints, useTheme} from '#/alf' 26 26 + import {atoms as a, native, useBreakpoints, useTheme} from '#/alf' 27 27 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown' 28 28 import {Divider} from '#/components/Divider' 29 29 import {LinearGradientBackground} from '#/components/LinearGradientBackground' 30 30 import {InlineLinkText} from '#/components/Link' 31 31 + import {ScreenTransition} from '#/components/ScreenTransition' 31 32 import {Text} from '#/components/Typography' 32 33 import {GCP_PROJECT_ID} from '#/env' 33 34 import * as bsky from '#/types/bsky' ··· 116 117 }, []) 117 118 118 119 return ( 119 119 - <SignupContext.Provider value={{state, dispatch}}> 120 120 - <LoggedOutLayout 121 121 - leadin="" 122 122 - title={_(msg`Create Account`)} 123 123 - description={_(msg`We're so excited to have you join us!`)} 124 124 - scrollable> 125 125 - <View testID="createAccount" style={a.flex_1}> 126 126 - {showStarterPackCard && 127 127 - bsky.dangerousIsType<AppBskyGraphStarterpack.Record>( 128 128 - starterPack.record, 129 129 - AppBskyGraphStarterpack.isRecord, 130 130 - ) ? ( 131 131 - <Animated.View entering={!isFetchedAtMount ? FadeIn : undefined}> 132 132 - <LinearGradientBackground 133 133 - style={[a.mx_lg, a.p_lg, a.gap_sm, a.rounded_sm]}> 134 134 - <Text style={[a.font_bold, a.text_xl, {color: 'white'}]}> 135 135 - {starterPack.record.name} 136 136 - </Text> 137 137 - <Text style={[{color: 'white'}]}> 138 138 - {starterPack.feeds?.length ? ( 139 139 - <Trans> 140 140 - You'll follow the suggested users and feeds once you 141 141 - finish creating your account! 142 142 - </Trans> 120 120 + <Animated.View exiting={native(FadeIn.duration(90))} style={a.flex_1}> 121 121 + <SignupContext.Provider value={{state, dispatch}}> 122 122 + <LoggedOutLayout 123 123 + leadin="" 124 124 + title={_(msg`Create Account`)} 125 125 + description={_(msg`We're so excited to have you join us!`)} 126 126 + scrollable> 127 127 + <View testID="createAccount" style={a.flex_1}> 128 128 + {showStarterPackCard && 129 129 + bsky.dangerousIsType<AppBskyGraphStarterpack.Record>( 130 130 + starterPack.record, 131 131 + AppBskyGraphStarterpack.isRecord, 132 132 + ) ? ( 133 133 + <Animated.View entering={!isFetchedAtMount ? FadeIn : undefined}> 134 134 + <LinearGradientBackground 135 135 + style={[a.mx_lg, a.p_lg, a.gap_sm, a.rounded_sm]}> 136 136 + <Text style={[a.font_bold, a.text_xl, {color: 'white'}]}> 137 137 + {starterPack.record.name} 138 138 + </Text> 139 139 + <Text style={[{color: 'white'}]}> 140 140 + {starterPack.feeds?.length ? ( 141 141 + <Trans> 142 142 + You'll follow the suggested users and feeds once you 143 143 + finish creating your account! 144 144 + </Trans> 145 145 + ) : ( 146 146 + <Trans> 147 147 + You'll follow the suggested users once you finish 148 148 + creating your account! 149 149 + </Trans> 150 150 + )} 151 151 + </Text> 152 152 + </LinearGradientBackground> 153 153 + </Animated.View> 154 154 + ) : null} 155 155 + <LayoutAnimationConfig skipEntering> 156 156 + <ScreenTransition 157 157 + key={state.activeStep} 158 158 + direction={state.screenTransitionDirection}> 159 159 + <View 160 160 + style={[ 161 161 + a.flex_1, 162 162 + a.px_xl, 163 163 + a.pt_2xl, 164 164 + !gtMobile && {paddingBottom: 100}, 165 165 + ]}> 166 166 + <View style={[a.gap_sm, a.pb_3xl]}> 167 167 + <Text style={[a.font_bold, t.atoms.text_contrast_medium]}> 168 168 + <Trans> 169 169 + Step {state.activeStep + 1} of{' '} 170 170 + {state.serviceDescription && 171 171 + !state.serviceDescription.phoneVerificationRequired 172 172 + ? '2' 173 173 + : '3'} 174 174 + </Trans> 175 175 + </Text> 176 176 + <Text style={[a.text_3xl, a.font_bold]}> 177 177 + {state.activeStep === SignupStep.INFO ? ( 178 178 + <Trans>Your account</Trans> 179 179 + ) : state.activeStep === SignupStep.HANDLE ? ( 180 180 + <Trans>Choose your username</Trans> 181 181 + ) : ( 182 182 + <Trans>Complete the challenge</Trans> 183 183 + )} 184 184 + </Text> 185 185 + </View> 186 186 + 187 187 + {state.activeStep === SignupStep.INFO ? ( 188 188 + <StepInfo 189 189 + onPressBack={onPressBack} 190 190 + isLoadingStarterPack={ 191 191 + isFetchingStarterPack && !isErrorStarterPack 192 192 + } 193 193 + isServerError={isError} 194 194 + refetchServer={refetch} 195 195 + /> 196 196 + ) : state.activeStep === SignupStep.HANDLE ? ( 197 197 + <StepHandle /> 143 198 ) : ( 144 144 - <Trans> 145 145 - You'll follow the suggested users once you finish creating 146 146 - your account! 147 147 - </Trans> 199 199 + <StepCaptcha /> 148 200 )} 149 149 - </Text> 150 150 - </LinearGradientBackground> 151 151 - </Animated.View> 152 152 - ) : null} 153 153 - <View 154 154 - style={[ 155 155 - a.flex_1, 156 156 - a.px_xl, 157 157 - a.pt_2xl, 158 158 - !gtMobile && {paddingBottom: 100}, 159 159 - ]}> 160 160 - <View style={[a.gap_sm, a.pb_sm]}> 161 161 - <Text 162 162 - style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium]}> 163 163 - <Trans> 164 164 - Step {state.activeStep + 1} of{' '} 165 165 - {state.serviceDescription && 166 166 - !state.serviceDescription.phoneVerificationRequired 167 167 - ? '2' 168 168 - : '3'} 169 169 - </Trans> 170 170 - </Text> 171 171 - <Text style={[a.text_3xl, a.font_heavy]}> 172 172 - {state.activeStep === SignupStep.INFO ? ( 173 173 - <Trans>Your account</Trans> 174 174 - ) : state.activeStep === SignupStep.HANDLE ? ( 175 175 - <Trans>Choose your username</Trans> 176 176 - ) : ( 177 177 - <Trans>Complete the challenge</Trans> 178 178 - )} 179 179 - </Text> 180 180 - </View> 181 181 - 182 182 - <LayoutAnimationConfig skipEntering skipExiting> 183 183 - {state.activeStep === SignupStep.INFO ? ( 184 184 - <StepInfo 185 185 - onPressBack={onPressBack} 186 186 - isLoadingStarterPack={ 187 187 - isFetchingStarterPack && !isErrorStarterPack 188 188 - } 189 189 - isServerError={isError} 190 190 - refetchServer={refetch} 191 191 - /> 192 192 - ) : state.activeStep === SignupStep.HANDLE ? ( 193 193 - <StepHandle /> 194 194 - ) : ( 195 195 - <StepCaptcha /> 196 196 - )} 197 197 - </LayoutAnimationConfig> 198 201 199 199 - <Divider /> 202 202 + <Divider /> 200 203 201 201 - <View 202 202 - style={[a.w_full, a.py_lg, a.flex_row, a.gap_md, a.align_center]}> 203 203 - <AppLanguageDropdown /> 204 204 - <Text 205 205 - style={[ 206 206 - a.flex_1, 207 207 - t.atoms.text_contrast_medium, 208 208 - !gtMobile && a.text_md, 209 209 - ]}> 210 210 - <Trans>Having trouble?</Trans>{' '} 211 211 - <InlineLinkText 212 212 - label={_(msg`Contact support`)} 213 213 - to={FEEDBACK_FORM_URL({email: state.email})} 214 214 - style={[!gtMobile && a.text_md]}> 215 215 - <Trans>Contact support</Trans> 216 216 - </InlineLinkText> 217 217 - </Text> 218 218 - </View> 204 204 + <View 205 205 + style={[ 206 206 + a.w_full, 207 207 + a.py_lg, 208 208 + a.flex_row, 209 209 + a.gap_md, 210 210 + a.align_center, 211 211 + ]}> 212 212 + <AppLanguageDropdown /> 213 213 + <Text 214 214 + style={[ 215 215 + a.flex_1, 216 216 + t.atoms.text_contrast_medium, 217 217 + !gtMobile && a.text_md, 218 218 + ]}> 219 219 + <Trans>Having trouble?</Trans>{' '} 220 220 + <InlineLinkText 221 221 + label={_(msg`Contact support`)} 222 222 + to={FEEDBACK_FORM_URL({email: state.email})} 223 223 + style={[!gtMobile && a.text_md]}> 224 224 + <Trans>Contact support</Trans> 225 225 + </InlineLinkText> 226 226 + </Text> 227 227 + </View> 228 228 + </View> 229 229 + </ScreenTransition> 230 230 + </LayoutAnimationConfig> 219 231 </View> 220 220 - </View> 221 221 - </LoggedOutLayout> 222 222 - </SignupContext.Provider> 232 232 + </LoggedOutLayout> 233 233 + </SignupContext.Provider> 234 234 + </Animated.View> 223 235 ) 224 236 }

+4 -2

src/screens/Signup/state.ts

··· 41 41 export type SignupState = { 42 42 hasPrev: boolean 43 43 activeStep: SignupStep 44 44 + screenTransitionDirection: 'Forward' | 'Backward' 44 45 45 46 serviceUrl: string 46 47 serviceDescription?: ServiceDescription ··· 84 85 export const initialState: SignupState = { 85 86 hasPrev: false, 86 87 activeStep: SignupStep.INFO, 88 88 + screenTransitionDirection: 'Forward', 87 89 88 90 serviceUrl: DEFAULT_SERVICE, 89 91 serviceDescription: undefined, ··· 126 128 switch (a.type) { 127 129 case 'prev': { 128 130 if (s.activeStep !== SignupStep.INFO) { 129 129 - LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) 131 131 + next.screenTransitionDirection = 'Backward' 130 132 next.activeStep-- 131 133 next.error = '' 132 134 next.errorField = undefined ··· 135 137 } 136 138 case 'next': { 137 139 if (s.activeStep !== SignupStep.CAPTCHA) { 138 138 - LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) 140 140 + next.screenTransitionDirection = 'Forward' 139 141 next.activeStep++ 140 142 next.error = '' 141 143 next.errorField = undefined

+2 -2

src/screens/StarterPack/Wizard/StepDetails.tsx

··· 8 8 import {atoms as a, useTheme} from '#/alf' 9 9 import * as TextField from '#/components/forms/TextField' 10 10 import {StarterPack} from '#/components/icons/StarterPack' 11 11 - import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition' 11 11 + import {ScreenTransition} from '#/components/ScreenTransition' 12 12 import {Text} from '#/components/Typography' 13 13 14 14 export function StepDetails() { ··· 23 23 }) 24 24 25 25 return ( 26 26 - <ScreenTransition direction={state.transitionDirection}> 26 26 + <ScreenTransition direction={state.transitionDirection} enabledWeb> 27 27 <View style={[a.px_xl, a.gap_xl, a.mt_4xl]}> 28 28 <View style={[a.gap_md, a.align_center, a.px_md, a.mb_md]}> 29 29 <StarterPack width={90} gradient="sky" />

+5 -2

src/screens/StarterPack/Wizard/StepFeeds.tsx

··· 17 17 import {SearchInput} from '#/components/forms/SearchInput' 18 18 import {useThrottledValue} from '#/components/hooks/useThrottledValue' 19 19 import {Loader} from '#/components/Loader' 20 20 - import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition' 20 20 + import {ScreenTransition} from '#/components/ScreenTransition' 21 21 import {WizardFeedCard} from '#/components/StarterPack/Wizard/WizardListCard' 22 22 import {Text} from '#/components/Typography' 23 23 ··· 79 79 } 80 80 81 81 return ( 82 82 - <ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}> 82 82 + <ScreenTransition 83 83 + style={[a.flex_1]} 84 84 + direction={state.transitionDirection} 85 85 + enabledWeb> 83 86 <View style={[a.border_b, t.atoms.border_contrast_medium]}> 84 87 <View style={[a.py_sm, a.px_md, {height: 60}]}> 85 88 <SearchInput

+5 -2

src/screens/StarterPack/Wizard/StepProfiles.tsx

··· 13 13 import {atoms as a, useTheme} from '#/alf' 14 14 import {SearchInput} from '#/components/forms/SearchInput' 15 15 import {Loader} from '#/components/Loader' 16 16 - import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition' 16 16 + import {ScreenTransition} from '#/components/ScreenTransition' 17 17 import {WizardProfileCard} from '#/components/StarterPack/Wizard/WizardListCard' 18 18 import {Text} from '#/components/Typography' 19 19 import type * as bsky from '#/types/bsky' ··· 64 64 } 65 65 66 66 return ( 67 67 - <ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}> 67 67 + <ScreenTransition 68 68 + style={[a.flex_1]} 69 69 + direction={state.transitionDirection} 70 70 + enabledWeb> 68 71 <View style={[a.border_b, t.atoms.border_contrast_medium]}> 69 72 <View style={[a.py_sm, a.px_md, {height: 60}]}> 70 73 <SearchInput

+76 -55

src/view/com/auth/SplashScreen.tsx

··· 1 1 import {View} from 'react-native' 2 2 + import Animated, {FadeIn, FadeOut} from 'react-native-reanimated' 2 3 import {useSafeAreaInsets} from 'react-native-safe-area-context' 3 4 import {msg, Trans} from '@lingui/macro' 4 5 import {useLingui} from '@lingui/react' 5 6 7 7 + import {useHaptics} from '#/lib/haptics' 6 8 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' 9 9 + import {CenteredView} from '#/view/com/util/Views' 7 10 import {Logo} from '#/view/icons/Logo' 8 11 import {Logotype} from '#/view/icons/Logotype' 9 12 import {atoms as a, useTheme} from '#/alf' 10 13 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown' 11 14 import {Button, ButtonText} from '#/components/Button' 12 15 import {Text} from '#/components/Typography' 13 13 - import {CenteredView} from '../util/Views' 14 16 15 17 export const SplashScreen = ({ 16 18 onPressSignin, ··· 22 24 const t = useTheme() 23 25 const {_} = useLingui() 24 26 27 27 + const playHaptic = useHaptics() 25 28 const insets = useSafeAreaInsets() 26 29 27 30 return ( 28 31 <CenteredView style={[a.h_full, a.flex_1]}> 29 29 - <ErrorBoundary> 30 30 - <View style={[{flex: 1}, a.justify_center, a.align_center]}> 31 31 - <Logo width={92} fill="sky" /> 32 32 + <Animated.View 33 33 + entering={FadeIn.duration(90)} 34 34 + exiting={FadeOut.duration(90)} 35 35 + style={[a.flex_1]}> 36 36 + <ErrorBoundary> 37 37 + <View style={[a.flex_1, a.justify_center, a.align_center]}> 38 38 + <Logo width={92} fill="sky" /> 39 39 + 40 40 + <View style={[a.pb_sm, a.pt_5xl]}> 41 41 + <Logotype width={161} fill={t.atoms.text.color} /> 42 42 + </View> 32 43 33 33 - <View style={[a.pb_sm, a.pt_5xl]}> 34 34 - <Logotype width={161} fill={t.atoms.text.color} /> 44 44 + <Text 45 45 + style={[ 46 46 + a.text_md, 47 47 + a.font_bold, 48 48 + t.atoms.text_contrast_medium, 49 49 + a.text_center, 50 50 + ]}> 51 51 + <Trans>What's up?</Trans> 52 52 + </Text> 35 53 </View> 36 54 37 37 - <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}> 38 38 - <Trans>What's up?</Trans> 39 39 - </Text> 40 40 - </View> 41 41 - <View 42 42 - testID="signinOrCreateAccount" 43 43 - style={[a.px_xl, a.gap_md, a.pb_2xl]}> 44 44 - <Button 45 45 - testID="createAccountButton" 46 46 - onPress={onPressCreateAccount} 47 47 - label={_(msg`Create new account`)} 48 48 - accessibilityHint={_( 49 49 - msg`Opens flow to create a new Bluesky account`, 50 50 - )} 51 51 - size="large" 52 52 - variant="solid" 53 53 - color="primary"> 54 54 - <ButtonText> 55 55 - <Trans>Create account</Trans> 56 56 - </ButtonText> 57 57 - </Button> 58 58 - <Button 59 59 - testID="signInButton" 60 60 - onPress={onPressSignin} 61 61 - label={_(msg`Sign in`)} 62 62 - accessibilityHint={_( 63 63 - msg`Opens flow to sign in to your existing Bluesky account`, 64 64 - )} 65 65 - size="large" 66 66 - variant="solid" 67 67 - color="secondary"> 68 68 - <ButtonText> 69 69 - <Trans>Sign in</Trans> 70 70 - </ButtonText> 71 71 - </Button> 72 72 - </View> 73 73 - <View 74 74 - style={[ 75 75 - a.px_lg, 76 76 - a.pt_md, 77 77 - a.pb_2xl, 78 78 - a.justify_center, 79 79 - a.align_center, 80 80 - ]}> 81 81 - <View> 82 82 - <AppLanguageDropdown /> 55 55 + <View 56 56 + testID="signinOrCreateAccount" 57 57 + style={[a.px_xl, a.gap_md, a.pb_2xl]}> 58 58 + <Button 59 59 + testID="createAccountButton" 60 60 + onPress={() => { 61 61 + onPressCreateAccount() 62 62 + playHaptic('Light') 63 63 + }} 64 64 + label={_(msg`Create new account`)} 65 65 + accessibilityHint={_( 66 66 + msg`Opens flow to create a new Bluesky account`, 67 67 + )} 68 68 + size="large" 69 69 + variant="solid" 70 70 + color="primary"> 71 71 + <ButtonText> 72 72 + <Trans>Create account</Trans> 73 73 + </ButtonText> 74 74 + </Button> 75 75 + <Button 76 76 + testID="signInButton" 77 77 + onPress={() => { 78 78 + onPressSignin() 79 79 + playHaptic('Light') 80 80 + }} 81 81 + label={_(msg`Sign in`)} 82 82 + accessibilityHint={_( 83 83 + msg`Opens flow to sign in to your existing Bluesky account`, 84 84 + )} 85 85 + size="large" 86 86 + variant="solid" 87 87 + color="secondary"> 88 88 + <ButtonText> 89 89 + <Trans>Sign in</Trans> 90 90 + </ButtonText> 91 91 + </Button> 92 92 + </View> 93 93 + <View 94 94 + style={[ 95 95 + a.px_lg, 96 96 + a.pt_md, 97 97 + a.pb_2xl, 98 98 + a.justify_center, 99 99 + a.align_center, 100 100 + ]}> 101 101 + <View> 102 102 + <AppLanguageDropdown /> 103 103 + </View> 83 104 </View> 84 84 - </View> 85 85 - <View style={{height: insets.bottom}} /> 86 86 - </ErrorBoundary> 105 105 + <View style={{height: insets.bottom}} /> 106 106 + </ErrorBoundary> 107 107 + </Animated.View> 87 108 </CenteredView> 88 109 ) 89 110 }