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