Fix forward-backward to profile step

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)
@@ -145,17 +146,22 @@ export function StepProfile() {
         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()

src/screens/Onboarding/state.ts

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import {logger} from '#/logger'
+import {AvatarColor, Emoji} from '#/screens/Onboarding/StepProfile/types'
 
 export type OnboardingState = {
   hasPrev: boolean
@@ -41,6 +42,10 @@ export type OnboardingState = {
     }
     imageUri?: string
     imageMime?: string
+    creatorState?: {
+      emoji: Emoji
+      backgroundColor: AvatarColor
+    }
   }
 }
 
@@ -77,6 +82,10 @@ export type OnboardingAction =
       image?: OnboardingState['profileStepResults']['image']
       imageUri: string
       imageMime: string
+      creatorState?: {
+        emoji: Emoji
+        backgroundColor: string
+      }
     }
 
 export type ApiResponseMap = {
@@ -349,6 +358,7 @@ export function reducerReduced(
         image: a.image,
         imageUri: a.imageUri,
         imageMime: a.imageMime,
+        creatorState: a.creatorState,
       }
       break
     }