Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can only color Paragraph via pushStyle in builder #2666

Open
strewhella opened this issue Sep 30, 2024 · 1 comment
Open

Can only color Paragraph via pushStyle in builder #2666

strewhella opened this issue Sep 30, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@strewhella
Copy link

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} />;
@strewhella strewhella added the bug Something isn't working label Sep 30, 2024
@bfricka
Copy link

bfricka commented Oct 24, 2024

At the very least, it seems odd that the types for Paragraph imply that it has the same interface (where ParagraphProps extends GroupProps). If it's somehow special, it shouldn't accept color and other paint props.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants