better screen transitions

src/components/StarterPack/Wizard/ScreenTransition.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import {StyleProp, ViewStyle} from 'react-native'
+import Animated, {
+  FadeOut,
+  SlideInLeft,
+  SlideInRight,
+} from 'react-native-reanimated'
+
+export function ScreenTransition({
+  direction,
+  style,
+  children,
+}: {
+  direction: 'Backward' | 'Forward'
+  style?: StyleProp<ViewStyle>
+  children: React.ReactNode
+}) {
+  const entering = direction === 'Forward' ? SlideInRight : SlideInLeft
+
+  return (
+    <Animated.View
+      entering={entering}
+      exiting={FadeOut.duration(90)} // Totally vibes based
+      style={style}>
+      {children}
+    </Animated.View>
+  )
+}

src/screens/StarterPack/Wizard/State.tsx

@@ -34,6 +34,7 @@ interface State {
   feeds: GeneratorView[]
   processing: boolean
   error?: string
+  transitionDirection: 'Backward' | 'Forward'
 }
 
 type TStateContext = [State, (action: Action) => void]
@@ -50,9 +51,17 @@ function reducer(state: State, action: Action): State {
   // -- Navigation
   const currentIndex = steps.indexOf(state.currentStep)
   if (action.type === 'Next' && state.currentStep !== 'Feeds') {
-    updatedState = {...state, currentStep: steps[currentIndex + 1]}
+    updatedState = {
+      ...state,
+      currentStep: steps[currentIndex + 1],
+      transitionDirection: 'Forward',
+    }
   } else if (action.type === 'Back' && state.currentStep !== 'Details') {
-    updatedState = {...state, currentStep: steps[currentIndex - 1]}
+    updatedState = {
+      ...state,
+      currentStep: steps[currentIndex - 1],
+      transitionDirection: 'Backward',
+    }
   }
 
   switch (action.type) {
@@ -122,6 +131,7 @@ export function Provider({
         profiles: listItems?.map(i => i.subject) ?? [],
         feeds: starterPack.feeds ?? [],
         processing: false,
+        transitionDirection: 'Forward',
       }
     }
 
@@ -131,6 +141,7 @@ export function Provider({
       profiles: [profile],
       feeds: [],
       processing: false,
+      transitionDirection: 'Forward',
     }
   }
 

src/screens/StarterPack/Wizard/StepDetails.tsx

@@ -5,11 +5,11 @@ 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'
 import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
+import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
 import {Text} from '#/components/Typography'
 
 export function StepDetails() {
@@ -23,7 +23,7 @@ export function StepDetails() {
   })
 
   return (
-    <ScreenTransition>
+    <ScreenTransition direction={state.transitionDirection}>
       <View style={[a.px_xl, a.gap_xl, a.mt_4xl]}>
         <View style={[{height: 90}]}>
           <StarterPackIcon />

src/screens/StarterPack/Wizard/StepFeeds.tsx

@@ -11,10 +11,10 @@ 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, useTheme} from '#/alf'
 import {Loader} from '#/components/Loader'
+import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
 import {WizardFeedCard} from '#/components/StarterPack/Wizard/WizardFeedCard'
 
 function keyExtractor(item: GeneratorView) {
@@ -59,7 +59,7 @@ export function StepFeeds() {
   }
 
   return (
-    <ScreenTransition style={[a.flex_1]}>
+    <ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}>
       <View style={[a.border_b, t.atoms.border_contrast_medium]}>
         <View style={[a.my_sm, a.px_md, {height: 40}]}>
           <SearchInput

src/screens/StarterPack/Wizard/StepProfiles.tsx

@@ -8,10 +8,10 @@ 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, useTheme} from '#/alf'
 import {Loader} from '#/components/Loader'
+import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
 import {WizardProfileCard} from '#/components/StarterPack/Wizard/WizardProfileCard'
 
 function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic) {
@@ -44,7 +44,7 @@ export function StepProfiles() {
   }
 
   return (
-    <ScreenTransition style={[a.flex_1]}>
+    <ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}>
       <View style={[a.border_b, t.atoms.border_contrast_medium]}>
         <View style={[a.my_sm, a.px_md, {height: 40}]}>
           <SearchInput