lift state up to allow going back freely

src/components/contacts/FindContactsFlow.tsx

@@ -12,7 +12,7 @@ export function FindContactsFlow({
   context = 'Standalone',
 }: {
   state: State
-  dispatch: React.Dispatch<Action>
+  dispatch: React.ActionDispatch<[Action]>
   onBack?: () => void
   onCancel: () => void
   context: 'Onboarding' | 'Standalone'

src/screens/Onboarding/StepFindContacts/index.tsx

@@ -1,37 +1,50 @@
-import {useCallback} from 'react'
+import {useCallback, useState} from 'react'
 import {LayoutAnimationConfig} from 'react-native-reanimated'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
 import {FindContactsFlow} from '#/components/contacts/FindContactsFlow'
-import {useFindContactsFlowState} from '#/components/contacts/state'
+import {type Action, type State} from '#/components/contacts/state'
 import {ScreenTransition} from '#/components/ScreenTransition'
 import {useOnboardingInternalState} from '../state'
 
-export function StepFindContacts() {
+export function StepFindContacts({
-  const [fcfState, fcfDispatch] = useFindContactsFlowState()
+  flowState,
+  flowDispatch,
+}: {
+  flowState: State
+  flowDispatch: React.ActionDispatch<[Action]>
+}) {
   const {dispatch} = useOnboardingInternalState()
 
+  const [transitionDirection, setTransitionDirection] = useState<
+    'Forward' | 'Backward'
+  >('Forward')
+
   const onSkip = useCallback(() => {
     dispatch({type: 'next'})
   }, [dispatch])
 
-  const canGoBack = fcfState.step === '2: verify number'
+  const canGoBack = flowState.step === '2: verify number'
   const onBack = useCallback(() => {
     if (canGoBack) {
-      fcfDispatch({type: 'BACK'})
+      setTransitionDirection('Backward')
+      flowDispatch({type: 'BACK'})
+      setTimeout(() => {
+        setTransitionDirection('Forward')
+      })
     } else {
       dispatch({type: 'prev'})
     }
-  }, [dispatch, fcfDispatch, canGoBack])
+  }, [dispatch, flowDispatch, canGoBack])
 
   return (
     <SafeAreaView edges={['left', 'top', 'right']}>
       <LayoutAnimationConfig skipEntering skipExiting>
-        <ScreenTransition key={fcfState.step} direction="Forward">
+        <ScreenTransition key={flowState.step} direction={transitionDirection}>
           <FindContactsFlow
             context="Onboarding"
-            state={fcfState}
+            state={flowState}
-            dispatch={fcfDispatch}
+            dispatch={flowDispatch}
             onCancel={onSkip}
             onBack={onBack}
           />

src/screens/Onboarding/index.tsx

@@ -20,6 +20,7 @@ import {StepFinished} from '#/screens/Onboarding/StepFinished'
 import {StepInterests} from '#/screens/Onboarding/StepInterests'
 import {StepProfile} from '#/screens/Onboarding/StepProfile'
 import {atoms as a, useTheme} from '#/alf'
+import {useFindContactsFlowState} from '#/components/contacts/state'
 import {Portal} from '#/components/Portal'
 import {ScreenTransition} from '#/components/ScreenTransition'
 import {ENV} from '#/env'
@@ -54,6 +55,7 @@ export function Onboarding() {
     },
     createInitialOnboardingState,
   )
+  const [contactsFlowState, contactsFlowDispatch] = useFindContactsFlowState()
 
   useEnableKeyboardControllerScreen(true)
 
@@ -70,7 +72,10 @@ export function Onboarding() {
                 style={a.flex_1}>
                 {/* FindContactsFlow cannot be nested in Layout */}
                 {state.activeStep === 'find-contacts' ? (
-                  <StepFindContacts />
+                  <StepFindContacts
+                    flowState={contactsFlowState}
+                    flowDispatch={contactsFlowDispatch}
+                  />
                 ) : (
                   <Layout>
                     {state.activeStep === 'profile' && <StepProfile />}

src/screens/Onboarding/state.ts

@@ -135,13 +135,7 @@ export function reducer(
       const prevIndex = stepOrder.indexOf(next.activeStep) - 1
       const prevStep = stepOrder[prevIndex]
       if (prevStep) {
-        // override back behaviour for the find contacts screen
+        next.activeStep = prevStep
-        // so returning to the flow takes you to the intro screen
-        if (prevStep === 'find-contacts') {
-          next.activeStep = 'find-contacts-intro'
-        } else {
-          next.activeStep = prevStep
-        }
       }
       next.stepTransitionDirection = 'Backward'
       break