Skip to content

fix: keep emoji intact in avatar initials - #3923

Open
RaphaelFakhri wants to merge 1 commit into
GetStream:developfrom
RaphaelFakhri:fix/avatar-initials-surrogate-pairs
Open

RaphaelFakhri wants to merge 1 commit into
GetStream:developfrom
RaphaelFakhri:fix/avatar-initials-surrogate-pairs

Conversation

@RaphaelFakhri

Copy link
Copy Markdown

🎯 Goal

Avatar initials show a broken glyph (�) when a user name starts with an emoji or another character outside the Basic Multilingual Plane. getInitialsFromName used charAt(0), which returns a single UTF-16 code unit and splits surrogate pairs. UserAvatar and MessageUserReactionsAvatar both use this helper.

🛠 Implementation details

  • getInitialsFromName now takes the first code point of each word with Array.from(word)[0] instead of word.charAt(0). Output for BMP names is unchanged.
  • toUpperCase() runs on the full code point, so non-BMP letters with case mappings (for example Deseret 𐐨 → 𐐀) are uppercased correctly.
  • Added unit tests for getInitialsFromName in src/utils/__tests__/utils.test.ts, covering regular names, extra whitespace, numberOfInitials, and non-BMP first characters.

🎨 UI Changes

Avatar initials for a user named 😀 Smiley change from �S to 😀S. No layout change.

iOS
Before After
Android
Before After

🧪 Testing

cd package && TZ=UTC npx jest src/utils/__tests__/utils.test.ts

The new test should not split characters outside the BMP into lone surrogates fails without the change (Expected: "😀S", Received: "�S") and passes with it.

☑️ Checklist

  • I have signed the Stream CLA (required)
  • PR targets the develop branch
  • Documentation is updated
  • New code is tested in main example apps, including all possible scenarios
    • SampleApp iOS and Android
    • Expo iOS and Android

Fixes #3922

getInitialsFromName took the first UTF-16 code unit of each word, so a
name that starts with an emoji or another character outside the BMP
rendered a lone surrogate in UserAvatar and the reactions avatar.
Take the first code point instead.

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.

Avatar initials show a broken character when a user name starts with an emoji

1 participant