add screen transitions

src/screens/StarterPack/Wizard/StepDetails.tsx

@@ -5,6 +5,7 @@ import {useLingui} from '@lingui/react'
 
 import {useProfileQuery} from 'state/queries/profile'
 import {useSession} from 'state/session'
+import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
@@ -22,6 +23,7 @@ export function StepDetails() {
   })
 
   return (
+    <ScreenTransition>
       <View style={[a.px_xl, a.gap_xl, a.mt_4xl]}>
         <View style={[{height: 65}]}>
           <StarterPackIcon />
@@ -66,5 +68,6 @@ export function StepDetails() {
           </TextField.Root>
         </View>
       </View>
+    </ScreenTransition>
   )
 }

src/screens/StarterPack/Wizard/StepFeeds.tsx

@@ -10,6 +10,7 @@ import {
 } from 'state/queries/feed'
 import {SearchInput} from 'view/com/util/forms/SearchInput'
 import {List} from 'view/com/util/List'
+import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a} from '#/alf'
 import {Loader} from '#/components/Loader'
@@ -53,7 +54,7 @@ export function StepFeeds() {
   }
 
   return (
-    <>
+    <ScreenTransition>
       <View style={[a.my_sm, a.px_md, {height: 40}]}>
         <SearchInput
           query={query}
@@ -76,6 +77,6 @@ export function StepFeeds() {
           </View>
         }
       />
-    </>
+    </ScreenTransition>
   )
 }

src/screens/StarterPack/Wizard/StepProfiles.tsx

@@ -8,6 +8,7 @@ import {useProfileFollowsQuery} from 'state/queries/profile-follows'
 import {useSession} from 'state/session'
 import {SearchInput} from 'view/com/util/forms/SearchInput'
 import {List} from 'view/com/util/List'
+import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a} from '#/alf'
 import {Loader} from '#/components/Loader'
@@ -42,7 +43,7 @@ export function StepProfiles() {
   }
 
   return (
-    <>
+    <ScreenTransition>
       <View style={[a.my_sm, a.px_md, {height: 40}]}>
         <SearchInput
           query={query}
@@ -64,6 +65,6 @@ export function StepProfiles() {
           </View>
         }
       />
-    </>
+    </ScreenTransition>
   )
 }

src/screens/StarterPack/Wizard/index.tsx

@@ -221,17 +221,21 @@ function WizardInner() {
           isWeb && [a.py_md],
         ]}>
         <View style={[{width: 65}]}>
-          {state.currentStep !== 'Details' && (
           <TouchableOpacity
             testID="viewHeaderDrawerBtn"
-              onPress={() => dispatch({type: 'Back'})}
             hitSlop={HITSLOP_10}
             accessibilityRole="button"
             accessibilityLabel={_(msg`Back`)}
-              accessibilityHint={_(msg`Go back to the previous step`)}>
+            accessibilityHint={_(msg`Go back to the previous step`)}
+            onPress={() => {
+              if (state.currentStep === 'Details') {
+                navigation.goBack()
+              } else {
+                dispatch({type: 'Back'})
+              }
+            }}>
             <FontAwesomeIcon size={18} icon="angle-left" />
           </TouchableOpacity>
-          )}
         </View>
         <Text style={[a.flex_1, a.font_bold, a.text_lg, a.text_center]}>
           {uiStrings.header}