diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx
index 2be7d7a9be..ab9a1dd5d6 100644
--- a/src/screens/Onboarding/StepProfile/index.tsx
+++ b/src/screens/Onboarding/StepProfile/index.tsx
@@ -68,6 +68,7 @@ export function StepProfile() {
+
@@ -117,6 +118,14 @@ function AvatarCircle({
const colors = ['image', 'red', 'blue', 'green', 'orange'] as const
type Color = (typeof colors)[number]
+const emojis = ['smile', 'frown', 'eyes'] as const
+type Emoji = (typeof emojis)[number]
+const emojiItems: Record = {
+ smile: 'đ',
+ frown: 'âšī¸',
+ eyes: 'đ',
+}
+
function ColorItem({color}: {color: Color}) {
if (color === 'image') return null
@@ -134,11 +143,34 @@ function colorRenderItem({item}: ListRenderItemInfo) {
return
}
-function Items({type}: {type: 'icons' | 'colors'}) {
+function EmojiItem({emoji}: {emoji: Emoji}) {
return (
-
+ {emojiItems[emoji]}
+
+ )
+}
+function emojiRenderItem({item}: ListRenderItemInfo) {
+ return
+}
+
+function Items({type}: {type: 'emojis' | 'colors'}) {
+ if (type === 'colors') {
+ return (
+
+ style={{height: 100}}
+ data={colors}
+ renderItem={colorRenderItem}
+ horizontal
+ contentContainerStyle={styles.flatListContainer}
+ />
+ )
+ }
+
+ return (
+
+ data={emojis}
+ renderItem={emojiRenderItem}
horizontal
contentContainerStyle={styles.flatListContainer}
/>