Skip to content

feat(avatar): render initials from name - #1926

Open
bataevvlad wants to merge 2 commits into
masterfrom
feat/avatar-initials
Open

bataevvlad wants to merge 2 commits into
masterfrom
feat/avatar-initials

Conversation

@bataevvlad

@bataevvlad bataevvlad commented Sep 28, 2026 •

Copy link
Copy Markdown
Collaborator

Problem

Avatar is an Image with a mapped size and shape; there is no way to show a user without a picture (#1806 asks for initials, as in react-native-user-avatar).

Fix

  • name?: string: rendered as initials (first letter of the first two words, initialsOf exported) in a View with the avatar's size, shape and border radius when there is no source or the image fires onError (the consumer onError still runs). With a loading image, name is only its accessible name. The fallback resets when the image uri changes, comparing by uri so an inline source={{ uri }} literal does not clear it on every parent render.
  • status?: EvaStatus (default basic): background and text colour of the initials frame.
  • Eva and Material Avatar mappings: textFontSize per size (10 / 13 / 16 / 22 / 30), textFontFamily / textFontWeight (text-font-family, text-subtitle-1-font-weight), and a status variant group (basic = color-basic-default / text-basic-color; primary ... danger = color-<status>-default / text-control-color; control = color-control-default / color-basic-800). Edited in place inside the Avatar block only.
  • Showcase AvatarInitials (sizes without a source, statuses, a failing uri next to a loading asset) at the end of SHOWCASES; Storybook Initials and InitialsFallback stories; docs rows and an "Initials" section in avatar.mdx.

Verification

  • Specs (avatar.spec.tsx, 8 new, 5 fail on master): initials derivation; initials without a source; image kept when it loads; fallback on onError and onError forwarded; nothing but the image without a name; frame sized / rounded like the image with the mapped text size; status colours; fallback kept for the same uri passed as a new object and retried for a new uri.
  • Android emulator (Pixel 7, Eva light, section-AvatarInitials): five sizes of "JD" in grey round frames, six statuses of "AL" in the status colours, the failing uri shows "BL" once the emulator's DNS lookup times out (a few seconds), the asset avatar keeps its image.
  • iOS simulator and yarn e2e:ios: see "iOS verification (2026-09-28)" below.
  • Gates: yarn turbo run build --filter=@ui-kitten/components, yarn typecheck:all, yarn lint (0 errors, 50 pre-existing warnings), yarn test --runInBand (74 suites, 1894 tests) pass.

Changeset: @ui-kitten/components minor, @ui-kitten/eva minor, @ui-kitten/material minor.

Closes #1806

iOS verification (2026-09-28)

iPhone 17 simulator (iOS 26.2), debug build on Metro from a clean worktree of this branch, driven with agent-device.

  • section-AvatarInitials: five sizes of JD, six statuses of AL, the failing uri shows BL next to the loaded asset, in Eva/Light, Eva/Dark, Material/Light, Material/Dark.
  • Found while testing: with status='basic' (the default) the initials were unreadable in both dark themes because text-basic-color and color-basic-default both resolve to near-white there. Fixed in e8e2c5d: the basic textColor is color-basic-800 in both mappings (what the filled basic Button uses); new spec renders with the Eva dark theme and asserts it.
  • Old Avatar section (image sizes and shapes) unchanged.
  • yarn e2e:ios against a Metro serving this branch (the flags injected into a scratch copy of the scripts; without them agent-device test loads the bundle from :8081): smoke.ad and icon-touchable.ad pass (icon-touchable.ad failed once at a scroll step and passed on two solo reruns); modal-nested.ad (step 51) and autocomplete.ad fail exactly as on master (both fixed in test(e2e): keep modals inside the snapshot budget #1918). An earlier run reported here had loaded another checkout's bundle from :8081 and did not test this branch.

Android verification (2026-09-28, second pass)

Pixel 7 emulator (API 34), debug build on Metro from a clean worktree of this branch, driven with agent-device.

Avatar was an Image only, so an account without a picture had nothing to
show. `name` renders as initials in a frame of the same size and shape
when there is no source or the image fails to load, coloured by the new
`status` variant of the Avatar mapping. Closes #1806.
The basic status used text-basic-color on color-basic-default. In the
Eva and Material dark themes both resolve to near-white, so the initials
vanished. Use color-basic-800 like the filled basic Button.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature of Initials in Avatar component

1 participant