1 files changed, 43 insertions, 0 deletions
diff --git a/src/screens/Onboarding/StepProfile/AvatarCreatorCircle.tsx b/src/screens/Onboarding/StepProfile/AvatarCreatorCircle.tsx
new file mode 100644
index 000000000..1cd68eb61
--- /dev/null
+++ b/src/screens/Onboarding/StepProfile/AvatarCreatorCircle.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {Avatar} from '#/screens/Onboarding/StepProfile/index'
+import {atoms as a, useTheme} from '#/alf'
+
+export function AvatarCreatorCircle({
+  avatar,
+  size = 125,
+}: {
+  avatar: Avatar
+  size?: number
+}) {
+  const t = useTheme()
+  const Icon = avatar.placeholder.component
+
+  const styles = React.useMemo(
+    () => ({
+      imageContainer: [
+        a.rounded_full,
+        a.overflow_hidden,
+        a.align_center,
+        a.justify_center,
+        a.border,
+        t.atoms.border_contrast_high,
+        {
+          height: size,
+          width: size,
+          backgroundColor: avatar.backgroundColor,
+        },
+      ],
+    }),
+    [avatar.backgroundColor, size, t.atoms.border_contrast_high],
+  )
+
+  return (
+    <View>
+      <View style={styles.imageContainer}>
+        <Icon height={85} width={85} style={{color: t.palette.white}} />
+      </View>
+    </View>
+  )
+}