fix: in app notification is not showing channel name and content

[Rohit3523]

Proposed changes

When we are using the app and receive a message in any channel, the app renders a blank area in the in-app notification
Regression introduced in #6997

Issue(s)

https://rocketchat.atlassian.net/browse/CORE-1937

How to test or reproduce

Screenshots

Before	After

Stories

1. Channel Message

2. Direct Message

3. Black Theme

4. Dark Theme

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

• Style

  • Adjusted in-app notification layout by removing a flex constraint so title and message size more naturally.

• Documentation

  • Added Storybook examples demonstrating multiple notification variants and theme previews (light, dark, black).

• Tests

  • Added snapshot tests for the notification stories and updated test setup to preserve real module exports while applying targeted mocks.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2eea8710-76b7-4daa-9bb2-054e2a6f13bb

📥 Commits

Reviewing files that changed from the base of the PR and between 50de750 and 235e231.

⛔ Files ignored due to path filters (1)

• app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (2)

• app/containers/InAppNotification/NotifierComponent.stories.tsx
• jest.setup.js

📜 Recent review details

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7046
File: app/containers/InAppNotification/NotifierComponent.stories.tsx:46-75
Timestamp: 2026-03-10T15:21:38.113Z
Learning: In `app/containers/InAppNotification/NotifierComponent.tsx` (React Native, Rocket.Chat), `NotifierComponent` is exported as a Redux-connected component via `connect(mapStateToProps)`. The `isMasterDetail` prop is automatically injected from `state.app.isMasterDetail` and does not need to be passed explicitly at call sites or in Storybook stories that use the default (connected) export.

📚 Learning: 2026-03-10T15:21:38.113Z

Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7046
File: app/containers/InAppNotification/NotifierComponent.stories.tsx:46-75
Timestamp: 2026-03-10T15:21:38.113Z
Learning: In `app/containers/InAppNotification/NotifierComponent.tsx` (React Native, Rocket.Chat), `NotifierComponent` is exported as a Redux-connected component via `connect(mapStateToProps)`. The `isMasterDetail` prop is automatically injected from `state.app.isMasterDetail` and does not need to be passed explicitly at call sites or in Storybook stories that use the default (connected) export.

Applied to files:

• app/containers/InAppNotification/NotifierComponent.stories.tsx

🔇 Additional comments (4)

jest.setup.js (1)

94-109: LGTM! Mock now provides the complete responsive layout contract.

The mock correctly:

• Preserves all real module exports via spread
• Returns all 8 fields required by IResponsiveLayoutContextData
• Uses actual constants (BASE_ROW_HEIGHT, BASE_ROW_HEIGHT_CONDENSED, FONT_SCALE_LIMIT) instead of hardcoded values, ensuring consistency with the real module

app/containers/InAppNotification/NotifierComponent.stories.tsx (3)

13-21: LGTM! Context provider value matches the interface contract.

The responsiveLayoutProviderValue object provides all 8 fields required by IResponsiveLayoutContextData and correctly uses the imported constants for row heights.

---

36-40: Clean wrapper pattern for Storybook stories.

The Wrapper component properly composes both ThemeContext and ResponsiveLayoutContext providers, with a sensible default of 'light' theme. This allows stories to easily test theme variants via the theme prop.

---

46-76: Good coverage of notification variants and themes.

The stories effectively cover:

• DirectMessage: Tests SubscriptionType.DIRECT with modified sender/title/avatar
• ChannelMessage: Tests SubscriptionType.CHANNEL with base notification
• WithDarkTheme / WithBlackTheme: Visual regression coverage for dark themes

Based on learnings, the isMasterDetail prop is correctly omitted since NotifierComponent is exported as a Redux-connected component that injects this prop automatically from state.app.isMasterDetail.

---

Walkthrough

Removed a flex: 1 layout constraint from NotifierComponent's inner View. Added Storybook stories and a snapshot test for the component. Adjusted jest.setup mock to merge real exports with mocked responsive-layout members.

Changes

Cohort / File(s)	Summary
Layout constraint removal app/containers/InAppNotification/NotifierComponent.tsx	Deleted inner stylesheet entry (flex: 1) and removed style={styles.inner} from the inner <View> around title/message.
Storybook stories app/containers/InAppNotification/NotifierComponent.stories.tsx	Added Storybook file with a Wrapper providing ThemeContext and ResponsiveLayoutContext and four exported stories: DirectMessage, ChannelMessage, WithDarkTheme, WithBlackTheme.
Snapshot tests app/containers/InAppNotification/NotifierComponent.test.tsx	Added test that imports the stories and calls generateSnapshots(stories) to produce story-based snapshots.
Jest mock adjustment jest.setup.js	Replaced a static mock for ./app/lib/hooks/useResponsiveLayout/useResponsiveLayout with a wrapper using jest.requireActual(...), spreading actual exports and overriding useResponsiveLayout and FONT_SCALE_LIMIT.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 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 PR title clearly identifies the bug fix addressing the in-app notification display issue mentioned in the linked issue CORE-1937.
Linked Issues check	✅ Passed	The changes fix the in-app notification rendering by removing flex:1 constraint from the inner view that was causing blank display, and add comprehensive Storybook stories and tests to verify channel name and message content display.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the notification display issue: the component fix removes the problematic layout constraint, stories provide visual verification, tests automate snapshot generation, and jest.setup updates support proper testing context.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[diegolmello]

Can you write unit tests and stories?

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/containers/InAppNotification/NotifierComponent.stories.tsx`:
- Around line 46-75: The stories (DirectMessage, ChannelMessage, WithDarkTheme,
WithBlackTheme) render NotifierComponent without the required isMasterDetail
prop, producing an invalid prop shape for snapshot tests; update each story to
pass isMasterDetail explicitly (true or false depending on intended layout) when
rendering NotifierComponent so the component receives the correct prop shape and
snapshots reflect the correct handset vs master-detail layout.

In `@jest.setup.js`:
- Around line 94-107: The test mock for the responsive layout is returning a
partial context from useResponsiveLayout and omitting width and height, causing
destructuring in tests to see undefined; update the jest.mock for
'./app/lib/hooks/useResponsiveLayout/useResponsiveLayout' so the mocked
useResponsiveLayout includes width and height (e.g., sensible numeric defaults)
alongside fontScale, isLargeFontScale, fontScaleLimited, rowHeight,
rowHeightCondensed, and still export FONT_SCALE_LIMIT, ensuring tests receive
the full contract returned by the real module.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c28fdd13-622a-42bb-b174-fb9cb9cb43b7

📥 Commits

Reviewing files that changed from the base of the PR and between bc4f71b and 50de750.

⛔ Files ignored due to path filters (1)

• app/containers/InAppNotification/__snapshots__/NotifierComponent.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (3)

• app/containers/InAppNotification/NotifierComponent.stories.tsx
• app/containers/InAppNotification/NotifierComponent.test.tsx
• jest.setup.js

📜 Review details

🔇 Additional comments (2)

app/containers/InAppNotification/NotifierComponent.test.tsx (1)

1-4: Nice coverage path for this regression.

Reusing the Storybook fixtures here keeps the notifier variants and the snapshot test in sync, which is a good fit for this UI-only fix.

app/containers/InAppNotification/NotifierComponent.stories.tsx (1)

13-40: Good call making the stories self-contained.

Providing ThemeContext and ResponsiveLayoutContext inside the story wrapper keeps these snapshots independent from global decorator setup.