How to use stroke in a paragraph, or achieve a similar effect to stroke="purple" using other methods?

[xiaoosnggao]

The link provided is the effect implemented in SVG.
https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md#text

[andrew-azzuu]

I've been looking for a method of doing this too and the best solution I can come up with is to add multiple shadows on the group layer as so:

let blurLevel = 2;
<Group
    origin={{ y: a.calculatedDimensions.height / 2, x: width / 2 }}
    matrix={a.matrix}
    layer={<Paint blendMode={a.blendMode === 'none'? undefined : a.blendMode} opacity={opacity_dv}>
        <Shadow dx={5} dy={5} color={'purple'} blur={blurLevel}></Shadow>
        <Shadow dx={-5} dy={5} color={'purple'} blur={blurLevel}></Shadow>
        <Shadow dx={-5} dy={-5} color={'purple'} blur={blurLevel}></Shadow>
        <Shadow dx={5} dy={-5} color={'purple'} blur={blurLevel}></Shadow>
    </Paint>}
    opacity={opacity_dv}
    >
    {bg}
    <Paragraph paragraph={paragraph}
        x={0} y={0} width={width} />
</Group>

This then produces this output:

It's not particularly ideal as you need a blur on it otherwise the shadows create an ugly stepping effect (blurLevel = 0)

It's a bit of a shame that Paragraph doesn't support the Style={'stroke'} like Text does (usage as suggested by this answer here: #2401)

If anyone else has a better method then I would love to hear it.

[andrew-azzuu]

After testing on device, I'm going to have to abandon the above method as it reduces the frame rate to single digits, even on a simple piece of text.

It may work for others, but not for our use case.

If anyone else has any ideas or solutions (would a shader be able to do this?) then some help would be appreciated.

[andrew-azzuu]

As previously mentioned, I wasn't happy with the solution of using shadows to achieve this effect, so I did some more research and reading through the documents and I came across the Morphology Image Filter which should be applied on the Group Layer.

By applying this on a text, and then overlaying a duplicate text over the top, you can create a pretty good outline/stroke effect.

`

let outline = <Paint><Morphology radius={strokeWidth} operator={'dilate'} /></Paint>;


return (
<>
<Group
    origin={{ y: a.calculatedDimensions.height / 2, x: width / 2 }}
    matrix={a.matrix}
    layer={outline}
    >
    {bg}
    <Paragraph paragraph={paragraph_outline}
        x={0} y={0} width={width} />
</Group>
<Group
    origin={{ y: a.calculatedDimensions.height / 2, x: width / 2 }}
    matrix={a.matrix}
    >
    <Paragraph paragraph={paragraph}
        x={0} y={0} width={width} />

</Group>
</>
);

`

with the result looking like this:

I hope this has helped someone.

[vadimshahray]

@andrew-azzuu Please show the code in full. I can't implement the stroke as you showed

[andrew-azzuu]

I've found a third, and much more performant method of doing this.

When building a a paragraph you can use pushStyle() to add your style, a foreground and background paint (as demoed here)

The foreground allows us to provide a Skia paint object which we can then set the stye of drawing - from the default of Fill to PaintStyle.Stroke, then you just have to set the stroke width and the colour.

    const foregroundOutlinePaint = Skia.Paint();
    foregroundOutlinePaint.setStrokeWidth(9);
    foregroundOutlinePaint.setStyle(PaintStyle.Stroke);
    foregroundOutlinePaint.setColor(Skia.Color('red'));
    
    
    const paragraph_outline = Skia.ParagraphBuilder.Make({
        antiAlias: true,
    }, customFontManager)
        .pushStyle({fontSize: 30}, 
            foregroundOutlinePaint,
        )
        .addText('Some text', textTransform)
        .pop()
        .build();
    
    
    
    return (<Group
	origin={{ y: a.calculatedDimensions.height / 2, x: width / 2 }}
        matrix={a.matrix}
        antiAlias={true}
        layer={layer}
        >
        	<Paragraph paragraph={paragraph_outline}
            	x={0} y={0} width={width} />            
    </Group>);
    
    

The downsize of that is that you will just get an outlined piece of text with a transparent centre (which is cool if that's what you want). But to create a filled text just add another <Paragraph> inside of the group but set the paragraph prop to be a constructed SKParagraph that has the paint set to PaintStyle.Fill

And this is what the result will look like: