react-native-skia icon indicating copy to clipboard operation
react-native-skia copied to clipboard

Emoji in Paragraph adds whitespace

Open dimovskidamjan opened this issue 3 months ago • 0 comments

Description

When rendering a Paragraph element on screen, adding an emoji in the content messes with the height of the element. By printing out getLineMetrics, I can see that the text height has changed from 23 to 18 after adding the cat emoji to the content. Ironically, this makes the text take up more space. It seems like some whitespace is added to the top of the text, and the emoji itself actually renders smaller than it would if rendered in an equivalent React Native View.

Skia view without emoji: Image

Skia view with emoji: Image

RN equivalent View: Image

React Native Skia Version

2.0.5

React Native Version

0.79.4

Using New Architecture

  • [x] Enabled

Steps to Reproduce

  1. Create a React Native View with a simple text such as: Test 🐈
  2. Observe how it shows on the screen.
  3. Create a Skia Paragraph with plain text content: Test
  4. Render it in a Skia Canvas and observe its frame.
  5. Create a Skia Paragraph with the same content as before: Test 🐈
  6. Observe how the frame changes.

Snack, Code Example, Screenshot, or Link to Repository

Image Image Image

dimovskidamjan avatar Oct 03 '25 18:10 dimovskidamjan