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,7 +1,14 @@ // @flow import * as React from 'react'; -import { View, Text, Alert, Platform, ScrollView } from 'react-native'; +import { + View, + Text, + Alert, + Platform, + ScrollView, + TouchableWithoutFeedback, +} from 'react-native'; import { logOutActionTypes, logOut } from 'lib/actions/user-actions.js'; import { useStringForUser } from 'lib/hooks/ens-cache.js'; @@ -23,6 +30,7 @@ import Button from '../components/button.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 { @@ -121,18 +129,31 @@ ); } - const avatar = ( - - - - ); - let avatarSection; if (this.props.shouldRenderAvatars) { avatarSection = ( <> USER AVATAR - {avatar} + + + + + + + + + + ); } @@ -191,6 +212,11 @@ ); } + onPressEditAvatar = () => { + // TODO: + // Display action sheet with all the different avatar creation options + }; + onPressLogOut = () => { if (this.loggedOutOrLoggingOut) { return; @@ -307,6 +333,21 @@ 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, },