Shopify / Shopify/react-native-skia

Can only color Paragraph via `pushStyle` in builder

Open
#2,666 2 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
8.6k
Forks
647
Avg merge
1d 17h
Merged PRs (30d)
35

Description

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} />;

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Paragraph component, ParagraphBuilder.Make().pushStyle, and the documented “applying effects” section. Compare the listed color, Paint, Group, and layer inputs to the supported Paragraph behavior; done means identifying a supported approach or documenting the limitation and alternative clearly.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Needs clarification
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.