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,49 +23,51 @@ export function StepDetails() {
   })
 
   return (
-    <View style={[a.px_xl, a.gap_xl, a.mt_4xl]}>
+    <ScreenTransition>
-      <View style={[{height: 65}]}>
+      <View style={[a.px_xl, a.gap_xl, a.mt_4xl]}>
-        <StarterPackIcon />
+        <View style={[{height: 65}]}>
-      </View>
+          <StarterPackIcon />
-      <View style={[a.gap_md, a.align_center, a.px_md, a.mb_md]}>
+        </View>
-        <Text style={[a.font_bold, a.text_3xl]}>
+        <View style={[a.gap_md, a.align_center, a.px_md, a.mb_md]}>
-          <Trans>Invites, but personal</Trans>
+          <Text style={[a.font_bold, a.text_3xl]}>
-        </Text>
+            <Trans>Invites, but personal</Trans>
-        <Text style={[a.text_center, a.text_md, a.px_md]}>
+          </Text>
-          <Trans>
+          <Text style={[a.text_center, a.text_md, a.px_md]}>
-            Create a starter pack to invite new users to Bluesky and give them
+            <Trans>
-            your favorite feeds and follows.
+              Create a starter pack to invite new users to Bluesky and give them
-          </Trans>
+              your favorite feeds and follows.
-        </Text>
+            </Trans>
-      </View>
+          </Text>
-      <View>
+        </View>
-        <TextField.LabelText>{_(msg`Name`)}</TextField.LabelText>
+        <View>
-        <TextField.Input
+          <TextField.LabelText>{_(msg`Name`)}</TextField.LabelText>
-          label={_(
-            msg`${
-              currentProfile?.displayName || currentProfile?.handle
-            }'s starter pack`,
-          )}
-          value={state.name}
-          onChangeText={text => dispatch({type: 'SetName', name: text})}
-        />
-      </View>
-      <View>
-        <TextField.LabelText>{_(msg`Description`)}</TextField.LabelText>
-        <TextField.Root>
           <TextField.Input
             label={_(
-              msg`Write a short description of your starter pack. What can new users expect?`,
+              msg`${
+                currentProfile?.displayName || currentProfile?.handle
+              }'s starter pack`,
             )}
-            value={state.description}
+            value={state.name}
-            onChangeText={text =>
+            onChangeText={text => dispatch({type: 'SetName', name: text})}
-              dispatch({type: 'SetDescription', description: text})
-            }
-            multiline
-            style={{minHeight: 150}}
           />
-        </TextField.Root>
+        </View>
+        <View>
+          <TextField.LabelText>{_(msg`Description`)}</TextField.LabelText>
+          <TextField.Root>
+            <TextField.Input
+              label={_(
+                msg`Write a short description of your starter pack. What can new users expect?`,
+              )}
+              value={state.description}
+              onChangeText={text =>
+                dispatch({type: 'SetDescription', description: text})
+              }
+              multiline
+              style={{minHeight: 150}}
+            />
+          </TextField.Root>
+        </View>
       </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
-            <TouchableOpacity
+            testID="viewHeaderDrawerBtn"
-              testID="viewHeaderDrawerBtn"
+            hitSlop={HITSLOP_10}
-              onPress={() => dispatch({type: 'Back'})}
+            accessibilityRole="button"
-              hitSlop={HITSLOP_10}
+            accessibilityLabel={_(msg`Back`)}
-              accessibilityRole="button"
+            accessibilityHint={_(msg`Go back to the previous step`)}
-              accessibilityLabel={_(msg`Back`)}
+            onPress={() => {
-              accessibilityHint={_(msg`Go back to the previous step`)}>
+              if (state.currentStep === 'Details') {
-              <FontAwesomeIcon size={18} icon="angle-left" />
+                navigation.goBack()
-            </TouchableOpacity>
+              } 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}