fix: web paragraph styles not working

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:


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
)

Shopify / react-native-skia

fix: web paragraph styles not working #2716