Opacity is not working on Paragraph

[laxman-stan]

Description

When opacity is applied to a Paragraph node or its parent container, (such as a Group), the text content does not inherit this opacity change.

It is acknowledged that opacity settings can be directly applied to text via the SkParagraphBuilder.pushStyle method. However, this approach presents challenges for implementing animations.

Version

0.1.237

Steps to reproduce

create a paragraph and try to apply opacity prop to it.

Snack, code example, screenshot, or link to a repository

import {
  Canvas,
  Group,
  Paragraph,
  Skia,
} from '@shopify/react-native-skia';

export default function Test() {

  const para = Skia.ParagraphBuilder.Make({})
    .pushStyle({
      fontSize: 60,
      color: Skia.Color('white'),
    })
    .addText('👋 hello')
    .build();

  return (
    <Canvas
      style={{flex: 1, backgroundColor: 'black'}}>
      <Group opacity={0.5}>
        <Paragraph
          opacity={0.3}
          x={0}
          y={0}
          paragraph={para}
          width={200}
        />
      </Group>
    </Canvas>
  );
}

[wcandillon]

If changing the opacity via the color is not an option please refer to this technic: https://shopify.github.io/react-native-skia/docs/text/paragraph/#applying-effects

…

On Wed, Feb 7, 2024 at 3:22 PM Laxman-stan ***@***.***> wrote: Description When opacity is applied to a Paragraph node or its parent container, (such as a Group), the text content does not inherit this opacity change. It is acknowledged that opacity settings can be directly applied to text via the SkParagraphBuilder.pushStyle method. However, this approach presents challenges for implementing animations. image.png (view on web) Version 0.1.237 Steps to reproduce create a paragraph and try to apply opacity prop to it. Snack, code example, screenshot, or link to a repository import { Canvas, Group, Paragraph, Skia, } from ***@***.***/react-native-skia'; export default function Test() { const para = Skia.ParagraphBuilder.Make({}) .pushStyle({ fontSize: 60, color: Skia.Color('white'), }) .addText('👋 hello') .build(); return ( <Canvas style={{flex: 1, backgroundColor: 'black'}}> <Group opacity={0.5}> <Paragraph opacity={0.3} x={0} y={0} paragraph={para} width={200} /> </Group> </Canvas> ); } — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you are subscribed to this thread. Triage notifications on the go with GitHub Mobile for iOS or Android.

[laxman-stan]

Thankyou for your prompt response.
It worked this way

<Group layer={<Paint opacity={0.5} />}>
        <Paragraph
          x={0}
          y={0}
          paragraph={para}
          width={200}
        />
</Group>