react-native-skia
react-native-skia copied to clipboard
Can only color Paragraph via `pushStyle` in builder
Description
I note that in the docs it mentions The Paragraph component doesn't follow the same painting rules as other components
, so potentially this isn't a bug.
I'm trying to color some Paragraphs
via components rather than the builder to avoid some expensive layout calculations because changing only the color doesn't require a full layout. I'm finding that the only way to set the color on a Paragraph
is via pushStyle
on the builder:
export const ThisWorks = () => {
const paragraph = Skia.ParagraphBuilder.Make()
.pushStyle({
color: Skia.Color("black"),
fontSize: 25,
})
.addText("Hello Skia")
.build();
return (
<Canvas style={{ flex: 1 }}>
<Paragraph paragraph={paragraph} x={0} y={0} width={width} />
</Canvas>
);
};
But this means I have to recreate the SkParagraph
when I want to change the text color.
Are any of these methods intended to be supported? Am I doing something wrong? Is there an alternative I could use instead? Thanks in advance!
Version
1.2.3
Steps to reproduce
Attempt to use any method available on the TypeScript types and components other than Skia.ParagraphBuilder.Make().pushStyle
to apply color to Paragraph
text and note it doesn't work
Snack, code example, screenshot, or link to a repository
I've tried these other methods without success:
Color prop on Paragraph
:
<Paragraph paragraph={paragraph} x={0} y={0} width={width} color="lightblue" />
Nested Paint
:
<Paragraph paragraph={paragraph} x={0} y={0} width={width}>
<Paint color="lightblue" />
</Paragraph>
Group
layer:
<Group layer={<Paint color="lightblue" />}>
<Paragraph paragraph={paragraph} x={0} y={0} width={width} />
</Group>
Layer prop:
const paint = Skia.Paint();
paint.setColor(Skia.Color('lightblue'));
const BlueParagraph = () => <Paragraph paragraph={paragraph} x={0} y={0} width={width} layer={paint} />;