fix: custom emoji align vertically in message

[Rohit3523]

Proposed changes

Right now custom emojis are not vertically center aligned in the chat which make the UI look bad. After some research i found that we can't vertically align image inside text and only way to make is center is applying translateY to the image

I can confirm that sending single emoji will not have different behaviour

Issue(s)

How to test or reproduce

Screenshots

Platform	Before	After
Android
iOS

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 emoji vertical alignment and positioning — when emojis are displayed they now have better vertical offset handling for big emojis, avatar-sized emojis, and regular emojis, reducing visual jitter and ensuring more consistent appearance across messages and components.

[coderabbitai]

Walkthrough

Emoji rendering was changed to wrap CustomEmoji in a View with a conditional vertical translateY transform: 0 when isBigEmoji or isAvatar is true, otherwise 3.

Changes

Cohort / File(s)	Summary
Emoji component rendering app/containers/markdown/components/emoji/Emoji.tsx	Added View import from react-native; when an emoji exists, wrap CustomEmoji in a View that applies `transform: [{ translateY: isBigEmoji

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

• diegolmello
• OtavioStasiak

Poem

🐰 A little hop, a three-pixel sway,
We tuck the emoji gently away.
Big or avatar—stay straight and tall,
Small ones drift just a tad, not all.
Wrapped and snug, they bounce with glee.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "fix: custom emoji align vertically in message" directly and accurately describes the main change in the changeset. The modification wraps custom emoji components in a View with a translateY transform to adjust their vertical alignment in chat messages, which is exactly what the title conveys. The title is concise, clear, and uses appropriate conventional commit formatting, making it easy for reviewers scanning the history to understand the primary purpose of the change.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch align-custom-emoji-in-chat

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between cec0ab8 and 39de1a1.

📒 Files selected for processing (1)

• app/containers/markdown/components/emoji/Emoji.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• app/containers/markdown/components/emoji/Emoji.tsx

---

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.}

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 390dc39 and cec0ab8.

📒 Files selected for processing (1)

• app/containers/markdown/components/emoji/Emoji.tsx (2 hunks)

🧰 Additional context used

🪛 ESLint

app/containers/markdown/components/emoji/Emoji.tsx

[error] 3-3: All imports in the declaration are only used as types. Use import type.

(@typescript-eslint/consistent-type-imports)

🪛 GitHub Check: ESLint and Test / run-eslint-and-test

app/containers/markdown/components/emoji/Emoji.tsx

[failure] 3-3:
All imports in the declaration are only used as types. Use import type