[Reduced Onboarding] Fix forward/backward nav with profile step (#3997)

* WIP

* Fix forward-backward to profile step

* [Reduced Onboarding] Add avatar metric (#3999)

* Add prop to finished event

* Fix type

* Use separate event

1 files changed, 11 insertions, 4 deletions

diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx
index d480a32af..93d8a4020 100644
--- a/src/screens/Onboarding/StepProfile/index.tsx
+++ b/src/screens/Onboarding/StepProfile/index.tsx
@@ -79,9 +79,10 @@ export function StepProfile() {
   const {state, dispatch} = React.useContext(Context)
   const [avatar, setAvatar] = React.useState<Avatar>({
     image: state.profileStepResults?.image,
-    placeholder: emojiItems.at,
-    backgroundColor: randomColor,
-    useCreatedAvatar: false,
+    placeholder: state.profileStepResults.creatorState?.emoji || emojiItems.at,
+    backgroundColor:
+      state.profileStepResults.creatorState?.backgroundColor || randomColor,
+    useCreatedAvatar: state.profileStepResults.isCreatedAvatar,
   })
 
   const canvasRef = React.useRef<PlaceholderCanvasRef>(null)
@@ -144,17 +145,23 @@ export function StepProfile() {
         image: avatar.image,
         imageUri,
         imageMime: avatar.image?.mime ?? 'image/jpeg',
+        isCreatedAvatar: avatar.useCreatedAvatar,
+        creatorState: {
+          emoji: avatar.placeholder,
+          backgroundColor: avatar.backgroundColor,
+        },
       })
     }
 
     dispatch({type: 'next'})
     track('OnboardingV2:StepProfile:End')
     logEvent('onboarding:profile:nextPressed', {})
-  }, [avatar.image, avatar.useCreatedAvatar, dispatch, track])
+  }, [avatar, dispatch, track])
 
   const onDoneCreating = React.useCallback(() => {
     setAvatar(prev => ({
       ...prev,
+      image: undefined,
       useCreatedAvatar: true,
     }))
     creatorControl.close()