Skip to content

fix: RTL mode fixes#3546

Draft
szuperaz wants to merge 5 commits intodevelopfrom
rtl-fixes
Draft

fix: RTL mode fixes#3546
szuperaz wants to merge 5 commits intodevelopfrom
rtl-fixes

Conversation

@szuperaz
Copy link
Copy Markdown

@szuperaz szuperaz commented Apr 10, 2026

🎯 Goal

RTL mode fixes from QA test

🛠 Implementation details

1. Mirror icons based on Figma

All icons from this table should be mirrored after this PR is merged:

Old name New name src already mirrored
IconArrowBoxLeft leave package/src/icons/leave.tsx (ArrowBoxLeft) no
IconArrowLeft arrow-left examples/SampleApp/src/icons/GoBack.tsx (GoBack) — back chevron; in core, closest directional stroke icon is package/src/icons/chevron-left.tsx (ChevronLeft) yes (SampleApp GoBack only)
IconArrowRight arrow-right examples/SampleApp/src/icons/RightArrow.tsx (RightArrow) — arrow path flipped with a fixed matrix(-1 …); optional chevron-style: examples/SampleApp/src/icons/GoForward.tsx (GoForward) no for RightArrow; yes for GoForward
IconArrowUpRight arrow-left package/src/icons/arrow-up-right.tsx (ArrowUpRight) no
IconBubbles message-bubbles No message-bubbles file. Closest in SampleApp: examples/SampleApp/src/icons/ChatsTab.tsx (overlapping chat bubbles). In core, only single-outline bubble: package/src/icons/message-bubble.tsx (MessageBubbleEmpty) no
IconBubbleText6ChatMessage thread package/src/icons/thread.tsx (ThreadReply) no
IconBubbleText6Solid thread-fill (none — no filled thread / thread-fill icon in these folders)
IconBubble2 message-bubble package/src/icons/message-bubble.tsx (MessageBubbleEmpty) no
IconBubble2Solid message-bubble-fill (none — no filled message-bubble variant in these folders)
IconChevronLeft chevron-left package/src/icons/chevron-left.tsx (ChevronLeft) — not re-exported from package/src/icons/index.ts but used via direct import no
IconChevronRight chevron-right No chevron-right in core icons. examples/SampleApp/src/icons/GoForward.tsx (GoForward) matches chevron-right behavior yes
IconArrowShareLeft reply package/src/icons/reply.tsx (CurveLineLeftUp / alias ArrowShareLeft) no
IconLayoutLeft sidebar (none — no sidebar / layout-left icon in these folders)
IconMagnifyingGlassSearch search package/src/icons/search.tsx (Search); SampleApp duplicate: examples/SampleApp/src/icons/Search.tsx no
IconMinusSmall mute package/src/icons/mute.tsx (Mute); SampleApp: examples/SampleApp/src/icons/Mute.tsx no
IconPaperPlane send package/src/icons/send.tsx (SendRight) no
IconVideo video package/src/icons/video.tsx (VideoIcon) no
IconVideoSolid video-fill package/src/icons/video-fill.tsx (Recorder — filled camera / video glyph; filename is video-fill) no
IconVolumeFull audio package/src/icons/audio.tsx (Sound) no

Relevant issues from QA Notion:

  • Some issues with channel preview -> Muted icon wrong direction
  • Some issues with channel preview -> Video icon wrong direction
  • Some issues with Channel info screen -> Arrows (wrong direction)
  • Some issues with Channel info screen -> Muted icon (wrong direction)
  • [RTL] Swipe to reply icon has a wrong direction
  • [RTL] Some issues with composer -> Send button (wrong direction)

2. Channel preview fixes

Relevant block in Notion:

  • [RTL] Some issues with channel preview -> Voice recording (expected order: mic icon, text, duration)
  • [RTL] Some issues with channel preview ->  Multiple attachments (expected order: attachments icon, count, text)

useMessagePreviewText didn't translate message labels like "Voice Recording (0:05)"

Screenshot 2026-04-10 at 13 06 36

3. Mirroring switch in RTL mode

Relevant Notion block:
[RTL] Some issues with Polls screen -> The pointer moves to the wrong direction when user is typing

Added a mirroring to all switch elements (off state is on the right side, instead of left). Questions:

  • Is this the correct solution? How come RN doesn't do this automatically?
  • Should we have the mirroring only in iOS? Or in Android too?
Screenshot 2026-04-10 at 15 18 31

4. Search bar not mirrored in RTL mode

These are changes in the SampleApp:

From Notion: [RTL] Search field is not mirrored, both channel search and user search

Channel search:

Screenshot 2026-04-10 at 16 32 31

User search - I assume this is the new DM screen, but this one seems fine to me without any change:

Screenshot 2026-04-10 at 16 29 28

🎨 UI Changes

🧪 Testing

I only tested on iOS

☑️ 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

@Stream-SDK-Bot
Copy link
Copy Markdown
Contributor

Stream-SDK-Bot commented Apr 10, 2026

SDK Size

title develop branch diff status
js_bundle_size 351 KB 353 KB +2160 B 🔴

"{{count}} Files_many": "{{count}} Files",
"{{count}} Files_one": "{{count}} File",
"{{count}} Files_other": "{{count}} Files",
"{{count}} Photos_many": "{{count}} Photos",
Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO: ask Ivan, because these don't seem to work but Voice message ({{duration}}) does

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.

2 participants