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

fix: web paragraph styles not working

Open samuelscheit opened this issue 1 year ago • 1 comments

I've tried to use the paragraph api on the web, however the paragraph didn't render and show up on the canvas. After debugging I found out that paragraph.getHeight() returned 0 and the style.textStyle.fontSize was -1 and style.textStyle.fontFamilies was undefined.

I've tried to directly create the style using new CanvasKit.ParagraphStyle(...) and that returned a style object with correct fontSize/fontFamily and when used also returned the correct paragraph height.

That means the issue lies in the JsiSkParagraphStyle.toParagraphStyle() function:

https://github.com/Shopify/react-native-skia/blob/4a2d7afc0fa547aee9938a0339594b88c3618d20/packages/skia/src/skia/web/JsiSkParagraphStyle.ts#L7-L65

Inside of the toParagraphStyle() function I've changed the assignments from strutStyle to textStyle (except for leading, forceStrutHeight and strutEnabled) and also added some properties like textDecoration, backgroundColor and shadows.

This fixed the issue and now the paragraph correctly renders:

image

const paragraphBuilder = Skia.ParagraphBuilder.Make(
	{
		textStyle: {
			color: Skia.Color("red"),
			fontSize: 50,
			fontFamilies: ["Roboto"],
			decoration: TextDecoration.Underline,
			decorationColor: Skia.Color("green"),
			decorationStyle: TextDecorationStyle.Wavy,
			decorationThickness: 1,
			letterSpacing: 1,
			fontStyle: {
				slant: FontSlant.Italic,
				weight: FontWeight.Normal,
				width: FontWidth.Normal,
			},
			shadows: [
				{
					blurRadius: 10,
					color: Skia.Color("blue"),
					offset: { x: 10, y: 10 },
				},
			],
			textBaseline: TextBaseline.Ideographic,
		},
	},
    fontManager
)

samuelscheit avatar Oct 30 '24 22:10 samuelscheit

Nice, we have some tests for the paragraph API available at https://github.com/Shopify/react-native-skia/blob/main/packages/skia/src/renderer/tests/e2e/Paragraphs.spec.tsx Any tests you could suggest that would highlight the bug fix?

wcandillon avatar Oct 31 '24 14:10 wcandillon