Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FIX: Support inline images in Text with lineHeight #48994

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

rodriguescarson
Copy link

Summary:

This pull request addresses the image overflow issue in React Native's component when lineHeight is specified. By modifying the native code for RCTTextView.mm, we have:

  1. Added a method to embed images into attributed text.
  2. Updated the setTextStorage method to handle images within NSTextStorage.
  3. Adjusted the drawRect: method to ensure images are drawn correctly.

These changes ensure proper positioning and rendering of images, fixing the long-standing overflow issue.

Changelog:

[IOS] [FIXED] - Resolved image overflow issue in component when lineHeight is specified by updating RCTTextView.mm.

Test Plan:

  1. Verified that images embedded within the component are properly positioned and do not overflow.
  2. Tested with various line heights and image sizes to confirm consistent behavior.
  3. Ran the React Native test suite to ensure no regressions in functionality.

Example test steps:

  • Use a component containing both text and images.
  • Apply different lineHeight values and observe rendering.
  • Verify no overlap or misalignment issues occur.

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Jan 28, 2025
Copy link
Contributor

@cipolleschi cipolleschi left a comment

Choose a reason for hiding this comment

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

This fix is for the Old Architecture only. Can you check how the New Architecture behaves and, eventually, fix it there as well?

The text component for the New Architecture is RCTParagraphComponentView. It uses the AttributedString abstraction.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants