react-native-skia
react-native-skia copied to clipboard
Emoji in Paragraph adds whitespace
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:
Skia view with emoji:
RN equivalent View:
React Native Skia Version
2.0.5
React Native Version
0.79.4
Using New Architecture
- [x] Enabled
Steps to Reproduce
- Create a React Native View with a simple text such as: Test 🐈
- Observe how it shows on the screen.
- Create a Skia Paragraph with plain text content: Test
- Render it in a Skia Canvas and observe its frame.
- Create a Skia Paragraph with the same content as before: Test 🐈
- Observe how the frame changes.