fix: UIKit block messages rendering with smaller font size by OtavioStasiak · Pull Request #7531 · RocketChat/Rocket.Chat.ReactNative

OtavioStasiak · 2026-07-30T13:17:25Z

Proposed changes

App (UIKit block) messages were rendering smaller than every other message in the list.

MessageParser.mrkdwn() passed a hardcoded textStyle={{ fontSize: 14 }} to Markdown, overriding the 16px message default while keeping lineHeight: 22 so app messages looked both smaller and cramped. It was inconsistent even within blocks, since plain_text() right above it already renders at 16.

Dropping the override makes block mrkdwn inherit the default message font size. The textStyle prop itself stays, so callers that genuinely need a different size can still opt in.

Note this also affects UIKit modals (ModalParser reuses MessageParser.prototype.mrkdwn) and info cards (InfoCard calls parser.mrkdwn), which now match the plain_text size in the same block.

Added a Section + Message font size parity story rendering a regular Markdown message next to the equivalent mrkdwn section, so any future divergence shows up as a snapshot diff.

Issue(s)

https://rocketchat.atlassian.net/browse/NATIVE-1186

How to test or reproduce

Open a channel with an app that posts block messages (e.g. the workspace-update message from Apps.QA)
Confirm its text now renders at the same size as regular messages around it

Screenshots

Before	After

Voip Components

After	Before

After	Before

After	Before

After	Before

Types of changes

Bugfix (non-breaking change which fixes an issue)
Improvement (non-breaking change which improves a current function)
New feature (non-breaking change which adds functionality)
Documentation update (if none of the other choices apply)

Checklist

I have read the CONTRIBUTING doc
I have signed the CLA
Lint and unit tests pass locally with my changes
I have added tests that prove my fix is effective or that my feature works (if applicable)
I have added necessary documentation (if applicable)
Any dependent changes have been merged and published in downstream modules

Further comments

Summary by CodeRabbit

Bug Fixes
- Improved Markdown rendering in UIKit messages by ensuring section content uses consistent font sizing.
- Updated multiline app-message Markdown presentation for better visual parity with equivalent UIKit-formatted content.
Tests
- Added Storybook coverage to compare regular Markdown rendering with UIKit section formatting.

OtavioStasiak · 2026-07-30T13:19:27Z

 		if (isContext) {
 			return <MarkdownPreview msg={element.text} numberOfLines={0} />;
 		}
-		return <Markdown msg={element.i18n ? I18n.t(element.i18n.key) : element.text} textStyle={{ fontSize: 14 }} />;


Removing it the fontSize is 16 and it's the same that the other messages.

coderabbitai · 2026-07-30T13:21:30Z

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (2)

app/containers/UIKit/__snapshots__/UiKitMessage.test.tsx.snap is excluded by !**/*.snap
app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap is excluded by !**/*.snap

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c52503fb-859f-4395-8569-a8a06195ae41

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

Walkthrough

The UIKit mrkdwn renderer stops forcing a 14px text style. A Storybook story compares regular Markdown rendering with UIKit message sections using short and multiline content.

Changes

Markdown font-size parity

Layer / File(s)	Summary
Renderer update and parity story `app/containers/UIKit/index.tsx`, `app/containers/UIKit/UiKitMessage.stories.tsx`	The mrkdwn renderer relies on default Markdown styling. The new `SectionFontSizeParity` story compares regular Markdown with UIKit section rendering using short and multiline content.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested labels: type: bug

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the UIKit block message font-size bug fixed by the pull request.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (2)

NATIVE-1186: Request failed with status code 401
FD31-4452: Request failed with status code 401

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

coderabbitai

🧹 Nitpick comments (1)

app/containers/UIKit/UiKitMessage.stories.tsx (1)
65-65: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add an explicit return type to the new story component.

SectionFontSizeParity relies on inferred return typing. Add the repository’s preferred React element type annotation to comply with the TypeScript guideline. As per coding guidelines, TypeScript functions must declare explicit parameter and return types. Please verify the existing React type import before applying the annotation.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/containers/UIKit/UiKitMessage.stories.tsx` at line 65, Update the
SectionFontSizeParity story component to declare the repository-preferred
explicit React element return type, reusing the existing React type import or
adding the appropriate type import if needed. Keep its current JSX output
unchanged and do not alter its parameters.
Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@app/containers/UIKit/UiKitMessage.stories.tsx`:
- Line 65: Update the SectionFontSizeParity story component to declare the
repository-preferred explicit React element return type, reusing the existing
React type import or adding the appropriate type import if needed. Keep its
current JSX output unchanged and do not alter its parameters.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 6cbffa55-970c-4bc1-815d-c67835271466

📥 Commits

Reviewing files that changed from the base of the PR and between 7ae3df2 and 1947ec0.

⛔ Files ignored due to path filters (2)

app/containers/UIKit/__snapshots__/UiKitMessage.test.tsx.snap is excluded by !**/*.snap
app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (2)

app/containers/UIKit/UiKitMessage.stories.tsx
app/containers/UIKit/index.tsx

📜 Review details

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{js,ts,jsx,tsx}: Use descriptive names for functions, variables, and classes that clearly convey their purpose
Write comments that explain the 'why' behind code decisions, not the 'what'
Keep functions small and focused on a single responsibility
Use const by default, let when reassignment is needed, and avoid var
Prefer async/await over .then() chains for handling asynchronous operations
Use explicit error handling with try/catch blocks for async operations
Avoid deeply nested code; refactor complex logic into helper functions

Files:

app/containers/UIKit/index.tsx
app/containers/UIKit/UiKitMessage.stories.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Use TypeScript for type safety; add explicit type annotations to function parameters and return types
Prefer interfaces over type aliases for defining object shapes in TypeScript
Use enums for sets of related constants rather than magic strings or numbers

Files:

app/containers/UIKit/index.tsx
app/containers/UIKit/UiKitMessage.stories.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{js,jsx,ts,tsx}: Before committing changes to JavaScript or TypeScript files, run pnpm prettier-lint and TZ=UTC pnpm test for the modified files.
Use the local-first data flow: the UI reads from WatermelonDB, while sagas synchronize data with the server.
Use Redux and Redux-Saga for global or server state, and use Zustand for feature-local stores; do not assume all state is in Redux.

Files:

app/containers/UIKit/index.tsx
app/containers/UIKit/UiKitMessage.stories.tsx

🧠 Learnings (3)

📚 Learning: 2026-04-30T17:07:51.020Z

Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7274
File: app/lib/services/voip/MediaCallEvents.ts:0-0
Timestamp: 2026-04-30T17:07:51.020Z
Learning: In this Rocket.Chat React Native codebase, the ESLint rule `no-void: error` is enforced. When you see a promise returned from an async call that is not awaited (a “floating promise”), do not silence it with the `void somePromise()` pattern. Instead, handle the promise explicitly by attaching `.catch(...)` (or otherwise awaiting/handling the error) so unhandled-rejection risks are addressed in a way that satisfies the existing ESLint configuration.

Applied to files:

app/containers/UIKit/index.tsx
app/containers/UIKit/UiKitMessage.stories.tsx

📚 Learning: 2026-06-25T18:37:44.793Z

Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7434
File: app/views/ScreenLockConfigView.tsx:101-141
Timestamp: 2026-06-25T18:37:44.793Z
Learning: In the Rocket.Chat React Native codebase, do not treat passing an `async` function directly to an event prop in React/React Native UI components (e.g., `onPress={async () => ...}` in TSX) as a “floating promises” CI-blocking lint issue—this repo does not enable the ESLint `no-floating-promises` rule (while `no-void` is enforced). Only raise robustness follow-ups when there are genuinely unhandled promise paths (e.g., fire-and-forget calls like `save()` that return a Promise that is neither awaited nor handled), and prefer making sure failure paths are explicitly handled/reported rather than blocking on lint-style floating-promise concerns.

Applied to files:

app/containers/UIKit/index.tsx
app/containers/UIKit/UiKitMessage.stories.tsx

📚 Learning: 2026-03-15T13:55:42.038Z

Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6911
File: app/containers/markdown/Markdown.stories.tsx:104-104
Timestamp: 2026-03-15T13:55:42.038Z
Learning: In Rocket.Chat React Native, the markdown parser requires a space between the underscore wrapping italic text and a mention sigil (_ mention _ instead of _mention_). Ensure stories and tests that include italic-wrapped mentions follow this form to guarantee proper parsing. Specifically, for files like app/containers/markdown/Markdown.stories.tsx, and any test/content strings that exercise italic-mentions, use the pattern _ mention _ (with spaces) to prevent the mention from being treated as plain text. Validate any test strings or story content accordingly.

Applied to files:

app/containers/UIKit/UiKitMessage.stories.tsx

🔇 Additional comments (2)

app/containers/UIKit/index.tsx (1)

96-96: LGTM!

app/containers/UIKit/UiKitMessage.stories.tsx (1)

5-5: LGTM!

coderabbitai · 2026-08-06T15:39:42Z

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

* fix: render mentions, emojis, and inline elements inside headings (#6911) * chore: OXC (#7515) * chore: replace ESLint with Oxlint Migrate linting from ESLint 8 to Oxlint. `pnpm lint` drops from ~1min to ~0.6s and 17 eslint packages are removed from devDependencies. Config lives in `.oxlintrc.json`, generated with `@oxlint/migrate` from the old `.eslintrc.js` and then tuned: - `eslint-plugin-react-native` is loaded through `jsPlugins`, since Oxlint has no built-in equivalent. - `import/extensions` is off. Its old options (`js: 'warning'`, ...) were not valid values for the rule, so it never reported anything under ESLint. - `no-unused-vars` sets `caughtErrors: 'none'` to match the ESLint 8 default. - `import/no-cycle` and the React Compiler rules report as warnings. They surface findings ESLint never showed, so they are not gated yet. Rules with no Oxlint equivalent are dropped: `no-restricted-syntax` (the ban on `React.*` member syntax), `import/order`, `import/no-unresolved` and `import/named`. ESLint 8 skipped dot-directories, so files under `.rnstorybook/` and `.maestro/` were never linted. Oxlint does lint them, which surfaced four violations that are fixed here. The CI workflow keeps its filename and job id so branch protection checks stay valid. * chore: replace Prettier with Oxfmt Migrate formatting from Prettier 2.8.8 to Oxfmt via `oxfmt --migrate prettier`. - `.oxfmtrc.json` carries every previous Prettier option unchanged (tabs, single quotes, printWidth 130, no trailing comma, avoid arrow parens, bracketSameLine) plus the `.prettierignore` patterns as `ignorePatterns`. `sortPackageJson` is disabled to match previous behavior. - `.prettierrc.js` and `.prettierignore` removed; `prettier` dropped from devDependencies. - `prettier-lint` script renamed to `format-lint` and now runs `oxfmt`. - 44 files reformatted: Oxfmt follows Prettier 3 style, so nested ternaries and `extends`/type-argument wrapping indent differently than under Prettier 2. No semantic changes. - prettier.yml still ran `eslint --fix`, missed in the Oxlint migration; it now runs `oxfmt` and `oxlint --fix`. `react/exhaustive-deps` is allowed there because its autofix rewrites dependency arrays, which changes behavior and must not land unreviewed from CI. - Workflow filename kept as prettier.yml to avoid disturbing branch protection checks, same as eslint.yml. Verified: `pnpm lint` exit 0 (0 errors), `tsc` clean, 217/217 suites and 2032/2032 tests pass, `oxfmt --check` clean. * chore: update lockfile for oxfmt * chore: migrate typecheck to TypeScript 7.0 (#7516) * chore: bump TypeScript to 6.0 Baseline hop ahead of the TypeScript 7.0 (native compiler) migration, so the 7.0 cut is a version swap against a config that is already 7.0-shaped. TypeScript 6.0 raises both `moduleResolution: node10` and `baseUrl` as errors rather than warnings, and `ignoreDeprecations: "6.0"` stops working in 7.0, so clearing them properly is the only route: - `moduleResolution` -> `bundler` (Metro is a bundler), which requires an esnext-shaped `module`. - `baseUrl` removed. Exactly one import relied on it; it is now relative. - `types` enumerated, since a resolution mode that honours package `exports` no longer auto-includes every `@types` package. `@types/node` becomes an explicit devDependency. Honouring `exports` also stranded the bundled `.d.ts` of three dependencies whose maps expose only JavaScript. Each gets a `types` condition via patch-package; this is visible to the type checker only, as Metro ignores that condition. A `paths` mapping was tried first and rejected, because the jest-expo resolver reads `paths` and then loads those `.d.ts` files at runtime. The inherited block of commented-out option documentation is dropped. * chore: migrate typecheck to TypeScript 7.0 Replaces TypeScript 6.0.3 with the native Go compiler. The version is pinned exactly, since the platform binaries ship as version-matched optional dependencies; the lockfile records the linux-x64 target CI resolves. Typecheck wall time drops from 5.77s on 5.9.3 to ~1.0s. No configuration change was required: the 6.0 hop already left tsconfig in a 7.0-shaped state, and the default parallelism saturates without `--checkers`. `@react-navigation/core` needs a patch to type-check. TypeScript 7.0.2 resolves the mutual recursion between `StaticParamList` and `ParamListForScreens` eagerly where earlier versions defer it, reports the alias as circular, and degrades it to a non-generic symbol -- surfacing as `TS2315: Type 'StaticParamList' is not generic` at our call sites. The patch drops a `FlatType<>` wrapper from the alias, which only flattens intersections for editor display, so the type is unchanged and the misfire stops. * chore: Bump version to 4.76.0 (#7542) * chore(ci): apply least privilege permission to GitHub Actions (#7350) * chore: switch React Compiler to infer mode (#7545) * ci: route Maestro e2e selection through sniffler impact analysis (#7476) * fix(iOS): RoomItem Swipe not working after scroll (#7532) * fix(ci): select shards for changes outside app and honor the release label (#7555) * fix: delete background taller than its row on ServersHistory (#7536) * fix: delete background taller than its row on server items * chore: code improvements --------- Co-authored-by: Diego Mello <diegolmello@gmail.com> * fix: UIKit block messages rendering with smaller font size (#7531) * fix: UIKit block messages rendering with smaller font size * fix: snapshot * fix(db): move deleteMessage finds and prepares inside the writer lock (#7550) * fix: quote has no effect on older thread messages (#7535) * fix: Quote has no effect on older thread messages * fix: Quote has no effect on older thread messages * chore: e2e test * fix: e2e test * chore: format code and fix lint issues * fix(MessageComposer): resolve quoted thread messages and guard stale lookups * fix: test --------- Co-authored-by: OtavioStasiak <OtavioStasiak@users.noreply.github.com> * fix(db): move persistMessage lookups and prepares inside the writer lock (#7551) * fix: test case 11 and 12 flaky tests (#7564) * fix: test * fix: room last messa test * fix: jumptomessage test * chore: remove comments * fix: jump to message e2e test iOS * remove unused comment * fix(db): move sendMessage reads and prepares inside the writer lock (#7546) * fix(db): move sendMessage reads and prepares inside the writer lock * fix: test improvements * chore: remove comments * fix: Admin Panel content hidden behind bottom navigation bar (#7538) * feat: add tabular numbers (#7568) * feat: tabular numbers across the app, upgrade Inter to 4.1 * update snapshot * chore: pin @rocket.chat/sdk to a specific commit hash (#7569) * fix(e2ee): re-fetch subscription inside the write in toggleRoomE2EE (#7554) * fix(e2ee): re-fetch subscription inside the write in toggleRoomE2EE * code improvements * removed unused comment * fix: run handleDelete finds and prepares inside the writer lock (#7552) * fix: run handleDelete finds and prepares inside the writer lock * chore: reuse mockWMDB * fix: crop screen hidden behind navigation bar on iOS 26 (#7529) * fix: re-fetch message inside the write in getThreadName (#7557) * fix: re-fetch message inside the write in getThreadName * fix: re-fetch message inside the write in getThreadName * chore: new test cases * remove unecessary async * fix(db): move decryptPendingMessages prepares inside the writer lock (#7548) * fix(db): move decryptPendingMessages prepares inside the writer lock * code improvements * chore: new test case encryption * chore: format code and fix lint issues --------- Co-authored-by: OtavioStasiak <OtavioStasiak@users.noreply.github.com> * fix(android): VideoConf notification accept and decline button hidden and touch not working (#7533) * fix: in-app notification buttons ignoring taps on Android * fix: Decline and Accept invisible on the incoming call notification * fix: UIKit buttons not responding on some Android devices (#7573) * fix: force Google account chooser on OAuth login (#7572) * fix: ISO format support in markdown component (#6943) * fix: resolve deep links by room id for channels and groups (#7111) * Merge pull request #7570 from RocketChat/deeplink-saml-auth feat: SAML deeplink auth * fix: grant pull-requests write to build call sites in build-develop (#7599) The reusable workflows build-android.yml and build-ios.yml declare pull-requests: write on their upload jobs. GitHub validates these at call time regardless of job conditionals, so build-develop.yml (caller) must grant the permission or the workflow fails validation. build-pr.yml already grants it; this mirrors that. --------- Co-authored-by: Rohit Bansal <40559587+Rohit3523@users.noreply.github.com> Co-authored-by: Yasmim Nagat <117310290+yasnagat@users.noreply.github.com> Co-authored-by: Otávio Stasiak <91474186+OtavioStasiak@users.noreply.github.com> Co-authored-by: OtavioStasiak <OtavioStasiak@users.noreply.github.com> Co-authored-by: Yash Rajpal <58601732+yash-rajpal@users.noreply.github.com>

fix: UIKit block messages rendering with smaller font size

1947ec0

OtavioStasiak temporarily deployed to approve_e2e_testing July 30, 2026 13:17 — with GitHub Actions Inactive

OtavioStasiak commented Jul 30, 2026

View reviewed changes

OtavioStasiak had a problem deploying to android_build July 30, 2026 13:21 — with GitHub Actions Error

OtavioStasiak had a problem deploying to ios_build July 30, 2026 13:21 — with GitHub Actions Error

coderabbitai Bot added the type: bug label Jul 30, 2026

coderabbitai Bot reviewed Jul 30, 2026

View reviewed changes

OtavioStasiak had a problem deploying to android_build July 30, 2026 15:26 — with GitHub Actions Error

OtavioStasiak had a problem deploying to ios_build July 30, 2026 15:26 — with GitHub Actions Error

diegolmello approved these changes Aug 4, 2026

View reviewed changes

OtavioStasiak had a problem deploying to ios_build August 4, 2026 20:07 — with GitHub Actions Error

OtavioStasiak had a problem deploying to android_build August 4, 2026 20:07 — with GitHub Actions Error

OtavioStasiak had a problem deploying to android_build August 4, 2026 22:56 — with GitHub Actions Error

OtavioStasiak had a problem deploying to ios_build August 4, 2026 22:56 — with GitHub Actions Error

OtavioStasiak had a problem deploying to ios_build August 5, 2026 20:24 — with GitHub Actions Error

OtavioStasiak had a problem deploying to android_build August 5, 2026 20:24 — with GitHub Actions Error

OtavioStasiak had a problem deploying to ios_build August 5, 2026 21:07 — with GitHub Actions Error

OtavioStasiak had a problem deploying to android_build August 5, 2026 21:07 — with GitHub Actions Error

Merge branch 'develop' into fix.apps-fontsize

6b247e0

OtavioStasiak and others added 2 commits August 6, 2026 13:38

fix: snapshot

d489337

Merge branch 'develop' into fix.apps-fontsize

abba2ea

OtavioStasiak had a problem deploying to approve_e2e_testing August 10, 2026 17:49 — with GitHub Actions Failure

OtavioStasiak had a problem deploying to android_build August 10, 2026 17:51 — with GitHub Actions Failure

OtavioStasiak had a problem deploying to ios_build August 10, 2026 17:51 — with GitHub Actions Failure

OtavioStasiak merged commit 52f5bff into develop Aug 10, 2026
8 of 11 checks passed

OtavioStasiak deleted the fix.apps-fontsize branch August 10, 2026 19:13

Navigation Menu

Uh oh!

fix: UIKit block messages rendering with smaller font size - #7531

fix: UIKit block messages rendering with smaller font size#7531
OtavioStasiak merged 4 commits into
developfrom
fix.apps-fontsize

OtavioStasiak commented Jul 30, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

OtavioStasiak Jul 30, 2026

Uh oh!

coderabbitai Bot commented Jul 30, 2026 •

edited

Loading

Review skipped

Review ran into problems

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot commented Aug 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

OtavioStasiak commented Jul 30, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Issue(s)

How to test or reproduce

Screenshots

Voip Components

Types of changes

Checklist

Further comments

Summary by CodeRabbit

Uh oh!

OtavioStasiak Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Changes

Review ran into problems

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot commented Aug 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

OtavioStasiak commented Jul 30, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 30, 2026 •

edited

Loading