4 files changed, 37 insertions, 20 deletions
diff --git a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx
index d1d1af6d9..eaad2113f 100644
--- a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx
+++ b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx
@@ -1,14 +1,19 @@
 import React from 'react'
 import {View} from 'react-native'
-import ViewShot from 'react-native-view-shot'
+import type ViewShot from 'react-native-view-shot'
 
 import {useAvatar} from '#/screens/Onboarding/StepProfile/index'
 import {atoms as a} from '#/alf'
 
+const LazyViewShot = React.lazy(
+  // @ts-expect-error dynamic import
+  () => import('react-native-view-shot/src/index'),
+)
+
 const SIZE_MULTIPLIER = 5
 
 export interface PlaceholderCanvasRef {
-  capture: () => Promise<string>
+  capture: () => Promise<string | undefined>
 }
 
 // This component is supposed to be invisible to the user. We only need this for ViewShot to have something to
@@ -16,7 +21,7 @@ export interface PlaceholderCanvasRef {
 export const PlaceholderCanvas = React.forwardRef<PlaceholderCanvasRef, {}>(
   function PlaceholderCanvas({}, ref) {
     const {avatar} = useAvatar()
-    const viewshotRef = React.useRef()
+    const viewshotRef = React.useRef<ViewShot>(null)
     const Icon = avatar.placeholder.component
 
     const styles = React.useMemo(
@@ -32,13 +37,16 @@ export const PlaceholderCanvas = React.forwardRef<PlaceholderCanvasRef, {}>(
     )
 
     React.useImperativeHandle(ref, () => ({
-      // @ts-ignore this library doesn't have types
-      capture: viewshotRef.current.capture,
+      capture: async () => {
+        if (viewshotRef.current?.capture) {
+          return await viewshotRef.current.capture()
+        }
+      },
     }))
 
     return (
       <View style={styles.container}>
-        <ViewShot
+        <LazyViewShot
           // @ts-ignore this library doesn't have types
           ref={viewshotRef}
           options={{
@@ -60,7 +68,7 @@ export const PlaceholderCanvas = React.forwardRef<PlaceholderCanvasRef, {}>(
               style={{color: 'white'}}
             />
           </View>
-        </ViewShot>
+        </LazyViewShot>
       </View>
     )
   },
diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx
index 5304aa503..79957da31 100644
--- a/src/screens/Onboarding/StepProfile/index.tsx
+++ b/src/screens/Onboarding/StepProfile/index.tsx
@@ -10,13 +10,13 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useAnalytics} from '#/lib/analytics/analytics'
+import {usePhotoLibraryPermission} from '#/lib/hooks/usePermissions'
+import {compressIfNeeded} from '#/lib/media/manip'
+import {openCropper} from '#/lib/media/picker'
+import {getDataUriSize} from '#/lib/media/util'
+import {useRequestNotificationsPermission} from '#/lib/notifications/notifications'
 import {logEvent, useGate} from '#/lib/statsig/statsig'
-import {usePhotoLibraryPermission} from 'lib/hooks/usePermissions'
-import {compressIfNeeded} from 'lib/media/manip'
-import {openCropper} from 'lib/media/picker'
-import {getDataUriSize} from 'lib/media/util'
-import {useRequestNotificationsPermission} from 'lib/notifications/notifications'
-import {isNative, isWeb} from 'platform/detection'
+import {isNative, isWeb} from '#/platform/detection'
 import {
   DescriptionText,
   OnboardingControls,
@@ -132,6 +132,10 @@ export function StepProfile() {
 
   const onContinue = React.useCallback(async () => {
     let imageUri = avatar?.image?.path
+
+    // In the event that view-shot didn't load in time and the user pressed continue, this will just be undefined
+    // and the default avatar will be used. We don't want to block getting through create if this fails for some
+    // reason
     if (!imageUri || avatar.useCreatedAvatar) {
       imageUri = await canvasRef.current?.capture()
     }
diff --git a/src/screens/Onboarding/state.ts b/src/screens/Onboarding/state.ts
index c41db5c3b..70fa69640 100644
--- a/src/screens/Onboarding/state.ts
+++ b/src/screens/Onboarding/state.ts
@@ -51,13 +51,15 @@ export type OnboardingAction =
   | {
       type: 'setProfileStepResults'
       isCreatedAvatar: boolean
-      image?: OnboardingState['profileStepResults']['image']
-      imageUri: string
+      image: OnboardingState['profileStepResults']['image'] | undefined
+      imageUri: string | undefined
       imageMime: string
-      creatorState?: {
-        emoji: Emoji
-        backgroundColor: AvatarColor
-      }
+      creatorState:
+        | {
+            emoji: Emoji
+            backgroundColor: AvatarColor
+          }
+        | undefined
     }
 
 export type ApiResponseMap = {
diff --git a/src/screens/Signup/StepInfo/index.tsx b/src/screens/Signup/StepInfo/index.tsx
index 2cdb4b722..d9b680602 100644
--- a/src/screens/Signup/StepInfo/index.tsx
+++ b/src/screens/Signup/StepInfo/index.tsx
@@ -6,8 +6,8 @@ import * as EmailValidator from 'email-validator'
 import type tldts from 'tldts'
 
 import {logEvent} from '#/lib/statsig/statsig'
+import {isEmailMaybeInvalid} from '#/lib/strings/email'
 import {logger} from '#/logger'
-import {isEmailMaybeInvalid} from 'lib/strings/email'
 import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {is13, is18, useSignupContext} from '#/screens/Signup/state'
 import {Policies} from '#/screens/Signup/StepInfo/Policies'
@@ -59,6 +59,9 @@ export function StepInfo({
     import('tldts/dist/index.cjs.min.js').then(tldts => {
       tldtsRef.current = tldts
     })
+    // This will get used in the avatar creator a few steps later, so lets preload it now
+    // @ts-expect-error - valid path
+    import('react-native-view-shot/src/index')
   }, [])
 
   const onNextPress = () => {