diff --git a/native/chat/settings/thread-settings-avatar.react.js b/native/chat/settings/thread-settings-avatar.react.js
--- a/native/chat/settings/thread-settings-avatar.react.js
+++ b/native/chat/settings/thread-settings-avatar.react.js
@@ -1,13 +1,15 @@
 // @flow
 
+import { useNavigation } from '@react-navigation/native';
 import * as React from 'react';
-import { View, TouchableWithoutFeedback } from 'react-native';
+import { View } from 'react-native';
 
 import { type ResolvedThreadInfo } from 'lib/types/thread-types.js';
 
-import SWMansionIcon from '../../components/swmansion-icon.react.js';
+import EditAvatar from '../../components/edit-avatar.react.js';
 import ThreadAvatar from '../../components/thread-avatar.react.js';
-import { useColors, useStyles } from '../../themes/colors.js';
+import { EmojiAvatarCreationRouteName } from '../../navigation/route-names.js';
+import { useStyles } from '../../themes/colors.js';
 
 type Props = {
   +threadInfo: ResolvedThreadInfo,
@@ -16,47 +18,28 @@
 function ThreadSettingsAvatar(props: Props): React.Node {
   const { threadInfo, canChangeSettings } = props;
 
-  const colors = useColors();
-  const styles = useStyles(unboundStyles);
-
-  const onPressEditAvatar = React.useCallback(() => {
-    // TODO:
-    // Display action sheet with all the different avatar creation options
-  }, []);
+  const { navigate } = useNavigation();
 
-  const editBadge = React.useMemo(() => {
-    if (!canChangeSettings) {
-      return null;
-    }
+  const styles = useStyles(unboundStyles);
 
-    return (
-      <View style={styles.editAvatarIconContainer}>
-        <SWMansionIcon
-          name="edit-2"
-          size={16}
-          style={styles.editAvatarIcon}
-          color={colors.floatingButtonLabel}
-        />
-      </View>
-    );
-  }, [
-    canChangeSettings,
-    colors.floatingButtonLabel,
-    styles.editAvatarIcon,
-    styles.editAvatarIconContainer,
-  ]);
+  const onPressEmojiAvatarFlow = React.useCallback(() => {
+    navigate<'EmojiAvatarCreation'>({
+      name: EmojiAvatarCreationRouteName,
+      params: {
+        threadID: threadInfo.id,
+        containingThreadID: threadInfo.containingThreadID,
+      },
+    });
+  }, [navigate, threadInfo.containingThreadID, threadInfo.id]);
 
   return (
     <View style={styles.container}>
-      <TouchableWithoutFeedback
-        onPress={onPressEditAvatar}
+      <EditAvatar
+        onPressEmojiAvatarFlow={onPressEmojiAvatarFlow}
         disabled={!canChangeSettings}
       >
-        <View>
-          <ThreadAvatar size="profile" threadInfo={threadInfo} />
-          {editBadge}
-        </View>
-      </TouchableWithoutFeedback>
+        <ThreadAvatar size="profile" threadInfo={threadInfo} />
+      </EditAvatar>
     </View>
   );
 }
@@ -68,21 +51,6 @@
     flex: 1,
     paddingVertical: 16,
   },
-  editAvatarIconContainer: {
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-    borderWidth: 2,
-    borderColor: 'panelForeground',
-    borderRadius: 18,
-    width: 36,
-    height: 36,
-    backgroundColor: 'purpleButton',
-    justifyContent: 'center',
-  },
-  editAvatarIcon: {
-    textAlign: 'center',
-  },
 };
 
 const MemoizedThreadSettingsAvatar: React.ComponentType<Props> =
diff --git a/native/components/edit-avatar.react.js b/native/components/edit-avatar.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/edit-avatar.react.js
@@ -0,0 +1,68 @@
+// @flow
+
+import * as React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+
+import SWMansionIcon from '../components/swmansion-icon.react.js';
+import { useColors, useStyles } from '../themes/colors.js';
+
+type Props = {
+  +children: React.Node,
+  +onPressEmojiAvatarFlow: () => mixed,
+  +disabled?: boolean,
+};
+function EditAvatar(props: Props): React.Node {
+  const { onPressEmojiAvatarFlow, children, disabled } = props;
+
+  const colors = useColors();
+  const styles = useStyles(unboundStyles);
+
+  const editBadge = React.useMemo(() => {
+    if (disabled) {
+      return null;
+    }
+
+    return (
+      <View style={styles.editAvatarIconContainer}>
+        <SWMansionIcon
+          name="edit-2"
+          size={16}
+          style={styles.editAvatarIcon}
+          color={colors.floatingButtonLabel}
+        />
+      </View>
+    );
+  }, [
+    colors.floatingButtonLabel,
+    disabled,
+    styles.editAvatarIcon,
+    styles.editAvatarIconContainer,
+  ]);
+
+  return (
+    <TouchableOpacity onPress={onPressEmojiAvatarFlow} disabled={disabled}>
+      {children}
+      {editBadge}
+    </TouchableOpacity>
+  );
+}
+
+const unboundStyles = {
+  editAvatarIconContainer: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    borderWidth: 2,
+    borderColor: 'panelForeground',
+    borderRadius: 18,
+    width: 36,
+    height: 36,
+    backgroundColor: 'purpleButton',
+    justifyContent: 'center',
+  },
+  editAvatarIcon: {
+    textAlign: 'center',
+  },
+};
+
+export default EditAvatar;
diff --git a/native/profile/profile-screen.react.js b/native/profile/profile-screen.react.js
--- a/native/profile/profile-screen.react.js
+++ b/native/profile/profile-screen.react.js
@@ -1,14 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {
-  View,
-  Text,
-  Alert,
-  Platform,
-  ScrollView,
-  TouchableWithoutFeedback,
-} from 'react-native';
+import { View, Text, Alert, Platform, ScrollView } from 'react-native';
 
 import { logOutActionTypes, logOut } from 'lib/actions/user-actions.js';
 import { useStringForUser } from 'lib/hooks/ens-cache.js';
@@ -28,13 +21,14 @@
 import { deleteNativeCredentialsFor } from '../account/native-credentials.js';
 import Action from '../components/action-row.react.js';
 import Button from '../components/button.react.js';
+import EditAvatar from '../components/edit-avatar.react.js';
 import EditSettingButton from '../components/edit-setting-button.react.js';
 import { SingleLine } from '../components/single-line.react.js';
-import SWMansionIcon from '../components/swmansion-icon.react.js';
 import UserAvatar from '../components/user-avatar.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import {
   EditPasswordRouteName,
+  EmojiAvatarCreationRouteName,
   DeleteAccountRouteName,
   BuildInfoRouteName,
   DevToolsRouteName,
@@ -137,22 +131,12 @@
           <View
             style={[this.props.styles.section, this.props.styles.avatarSection]}
           >
-            <TouchableWithoutFeedback onPress={this.onPressEditAvatar}>
-              <View>
-                <UserAvatar
-                  size="profile"
-                  userID={this.props.currentUserInfo?.id}
-                />
-                <View style={this.props.styles.editAvatarIconContainer}>
-                  <SWMansionIcon
-                    name="edit-2"
-                    size={16}
-                    style={this.props.styles.editAvatarIcon}
-                    color={this.props.colors.floatingButtonLabel}
-                  />
-                </View>
-              </View>
-            </TouchableWithoutFeedback>
+            <EditAvatar onPressEmojiAvatarFlow={this.onPressEmojiAvatarFlow}>
+              <UserAvatar
+                size="profile"
+                userID={this.props.currentUserInfo?.id}
+              />
+            </EditAvatar>
           </View>
         </>
       );
@@ -212,9 +196,11 @@
     );
   }
 
-  onPressEditAvatar = () => {
-    // TODO:
-    // Display action sheet with all the different avatar creation options
+  onPressEmojiAvatarFlow = () => {
+    this.props.navigation.navigate<'EmojiAvatarCreation'>({
+      name: EmojiAvatarCreationRouteName,
+      params: {},
+    });
   };
 
   onPressLogOut = () => {
@@ -333,21 +319,6 @@
     alignItems: 'center',
     paddingVertical: 16,
   },
-  editAvatarIconContainer: {
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-    borderWidth: 2,
-    borderColor: 'panelForeground',
-    borderRadius: 18,
-    width: 36,
-    height: 36,
-    backgroundColor: '#6D49AB',
-    justifyContent: 'center',
-  },
-  editAvatarIcon: {
-    textAlign: 'center',
-  },
   container: {
     flex: 1,
   },