Revert animation change in signup (#4693)

src/screens/Signup/StepInfo/index.tsx

@@ -1,5 +1,5 @@
-import React, {useEffect} from 'react'
+import React from 'react'
-import {LayoutAnimation, View} from 'react-native'
+import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -35,10 +35,6 @@ export function StepInfo({
   const {_} = useLingui()
   const {state, dispatch} = useSignupContext()
 
-  useEffect(() => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
-  }, [state.isLoading, isLoadingStarterPack])
-
   return (
     <ScreenTransition>
       <View style={[a.gap_md]}>

src/screens/Signup/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {View} from 'react-native'
-import {LayoutAnimationConfig} from 'react-native-reanimated'
+import Animated, {FadeIn, LayoutAnimationConfig} from 'react-native-reanimated'
 import {AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -50,6 +50,8 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
   } = useStarterPackQuery({
     uri: activeStarterPack?.uri,
   })
+
+  const [isFetchedAtMount] = React.useState(starterPack != null)
   const showStarterPackCard =
     activeStarterPack?.uri && !isFetchingStarterPack && starterPack
 
@@ -159,6 +161,7 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
         <View testID="createAccount" style={a.flex_1}>
           {showStarterPackCard &&
           AppBskyGraphStarterpack.isRecord(starterPack.record) ? (
+            <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'}]}>
@@ -167,8 +170,8 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
                 <Text style={[{color: 'white'}]}>
                   {starterPack.feeds?.length ? (
                     <Trans>
-                    You'll follow the suggested users and feeds once you finish
+                      You'll follow the suggested users and feeds once you
-                    creating your account!
+                      finish creating your account!
                     </Trans>
                   ) : (
                     <Trans>
@@ -178,6 +181,7 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
                   )}
                 </Text>
               </LinearGradientBackground>
+            </Animated.View>
           ) : null}
           <View
             style={[

src/screens/Signup/state.ts

@@ -116,6 +116,8 @@ export function reducer(s: SignupState, a: SignupAction): SignupState {
       break
     }
     case 'setServiceDescription': {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+
       next.serviceDescription = a.value
       next.userDomain = a.value?.availableUserDomains[0] ?? ''
       next.isLoading = false