Gradient color in Text

[maulik54e]

I'm want to apply gardient color in text Something like below image .

I don't have static text so not able to use method mentioned in this tutorial.
https://www.youtube.com/watch?v=7SCzL-XnfUU&ab_channel=WilliamCandillon

Can anyone help me how can i achieve this in skia ..?

[wcandillon]

Absolutely you can simply add a gradient to the text component:
https://shopify.github.io/react-native-skia/docs/text/text#simple-text
https://shopify.github.io/react-native-skia/docs/shaders/gradients

It would look like this:

<Text ...>
  <LinearGradient ... />
</Text>

[maulik54e]

Thank you for the response . will try it out

[marcel-happyfloat]

@wcandillon How does this work with the new paragraph component? Is it possible?

[wcandillon]

yes it's possible, we will update the documentation for it, here is the PR: https://github.com/Shopify/react-native-skia/pull/2119/files#diff-c39d16d0af0f024ca85c8617ad3c02edc2f3bf930294dcc9524012221b396667

[marcel-happyfloat]

@wcandillon Perfect, thank you very much! Is it possible to animate the center or radius of the gradient? Doesn't seem to work.

[marcel-happyfloat]

My shared/derived values are not updating or animating; they only change after a React re-render when applied with the Builder. Does anyone have any idea how to make this work? Is it even possible? Thank you!

 foregroundPaint.setShader(
      Skia.Shader.MakeRadialGradient(
        {x: 0, y: 0},
        radius.value, // shared value
        colors.value.map((c) => Skia.Color(c)), // derived value
        null,
        TileMode.Clamp,
      ),
    );