diff --git a/lib/shared/avatar-utils.js b/lib/shared/avatar-utils.js --- a/lib/shared/avatar-utils.js +++ b/lib/shared/avatar-utils.js @@ -347,6 +347,7 @@ export { getRandomDefaultEmojiAvatar, + getDefaultAvatar, getAvatarForUser, getUserAvatarForThread, getAvatarForThread, diff --git a/native/account/registration/emoji-avatar-selection.react.js b/native/account/registration/emoji-avatar-selection.react.js new file mode 100644 --- /dev/null +++ b/native/account/registration/emoji-avatar-selection.react.js @@ -0,0 +1,74 @@ +// @flow + +import invariant from 'invariant'; +import * as React from 'react'; +import { Text } from 'react-native'; + +import { getDefaultAvatar } from 'lib/shared/avatar-utils.js'; + +import RegistrationContainer from './registration-container.react.js'; +import RegistrationContentContainer from './registration-content-container.react.js'; +import type { RegistrationNavigationProp } from './registration-navigator.react.js'; +import { EditUserAvatarContext } from '../../avatars/edit-user-avatar-provider.react.js'; +import EmojiAvatarCreation from '../../avatars/emoji-avatar-creation.react.js'; +import type { NavigationRoute } from '../../navigation/route-names.js'; +import { useStyles } from '../../themes/colors.js'; + +export type EmojiAvatarSelectionParams = { + +usernameOrEthAddress: string, +}; + +type Props = { + +navigation: RegistrationNavigationProp<'EmojiAvatarSelection'>, + +route: NavigationRoute<'EmojiAvatarSelection'>, +}; +function EmojiAvatarSelection(props: Props): React.Node { + const editUserAvatarContext = React.useContext(EditUserAvatarContext); + invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); + + const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext; + + const { usernameOrEthAddress } = props.route.params; + const savedEmojiAvatarFunc = React.useCallback( + () => getDefaultAvatar(usernameOrEthAddress), + [usernameOrEthAddress], + ); + + const { goBack } = props.navigation; + const onSuccess = React.useCallback( + avatarRequest => { + goBack(); + return setUserAvatar(avatarRequest); + }, + [goBack, setUserAvatar], + ); + + const styles = useStyles(unboundStyles); + return ( + + + Select an emoji + + + + ); +} + +const unboundStyles = { + scrollViewContentContainer: { + flexGrow: 1, + paddingHorizontal: 0, + }, + header: { + fontSize: 24, + color: 'panelForegroundLabel', + paddingBottom: 16, + paddingHorizontal: 16, + }, +}; + +export default EmojiAvatarSelection; diff --git a/native/account/registration/registration-navigator.react.js b/native/account/registration/registration-navigator.react.js --- a/native/account/registration/registration-navigator.react.js +++ b/native/account/registration/registration-navigator.react.js @@ -10,6 +10,7 @@ import AvatarSelection from './avatar-selection.react.js'; import ConnectEthereum from './connect-ethereum.react.js'; import CoolOrNerdModeSelection from './cool-or-nerd-mode-selection.react.js'; +import EmojiAvatarSelection from './emoji-avatar-selection.react.js'; import ExistingEthereumAccount from './existing-ethereum-account.react.js'; import KeyserverSelection from './keyserver-selection.react.js'; import PasswordSelection from './password-selection.react.js'; @@ -23,6 +24,7 @@ UsernameSelectionRouteName, PasswordSelectionRouteName, AvatarSelectionRouteName, + EmojiAvatarSelectionRouteName, type ScreenParamList, type RegistrationParamList, } from '../../navigation/route-names.js'; @@ -83,6 +85,10 @@ name={AvatarSelectionRouteName} component={AvatarSelection} /> + ); } diff --git a/native/avatars/emoji-avatar-creation.react.js b/native/avatars/emoji-avatar-creation.react.js --- a/native/avatars/emoji-avatar-creation.react.js +++ b/native/avatars/emoji-avatar-creation.react.js @@ -139,6 +139,7 @@ const unboundStyles = { container: { + flexGrow: 1, flex: 1, justifyContent: 'space-between', }, @@ -168,8 +169,10 @@ backgroundColor: 'modalSubtext', }, buttonsContainer: { + flexGrow: 1, paddingHorizontal: 16, paddingBottom: 8, + justifyContent: 'flex-end', }, saveButton: { backgroundColor: 'purpleButton', diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js --- a/native/navigation/route-names.js +++ b/native/navigation/route-names.js @@ -6,6 +6,7 @@ import type { InviteLinkModalParams } from './invite-link-modal.react'; import type { AvatarSelectionParams } from '../account/registration/avatar-selection.react.js'; import type { ConnectEthereumParams } from '../account/registration/connect-ethereum.react.js'; +import type { EmojiAvatarSelectionParams } from '../account/registration/emoji-avatar-selection.react.js'; import type { ExistingEthereumAccountParams } from '../account/registration/existing-ethereum-account.react.js'; import type { KeyserverSelectionParams } from '../account/registration/keyserver-selection.react.js'; import type { PasswordSelectionParams } from '../account/registration/password-selection.react.js'; @@ -113,6 +114,7 @@ export const MessageSearchRouteName = 'MessageSearch'; export const PasswordSelectionRouteName = 'PasswordSelection'; export const AvatarSelectionRouteName = 'AvatarSelection'; +export const EmojiAvatarSelectionRouteName = 'EmojiAvatarSelection'; export type RootParamList = { +LoggedOutModal: void, @@ -211,6 +213,7 @@ +UsernameSelection: UsernameSelectionParams, +PasswordSelection: PasswordSelectionParams, +AvatarSelection: AvatarSelectionParams, + +EmojiAvatarSelection: EmojiAvatarSelectionParams, }; export type InviteLinkParamList = {