1 files changed, 15 insertions, 7 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>
     )
   },