RuntimeShader: second shader uniform causes incorrect rendering

[Antgue01]

Hi,

I'm new to React Native Skia and I'm trying to understand how RuntimeShader interacts with Group layer rendering.

My goal is to render a layer, access it from a runtime shader, and use an additional ImageShader as a mask texture.

I created a minimal example and noticed that introducing a second uniform shader appears to change the behavior significantly. Before assuming this is a bug, I'd like to confirm whether I'm misunderstanding how shader uniforms are supposed to be passed and evaluated in this setup.

Could someone clarify whether the following usage is expected to work?

There are three shaders in the file.

Variant 1 (my intended effect)

This shader uses:

• currentFrameTexture (the layer contents)
• alphaTexture (a noise texture)

The goal is to apply the noise texture as an alpha mask over the layer contents.

Currently, it renders a solid opaque circle instead of a masked one.

Screenrecorder-2026-06-04-23-09-46-459.mp4

Variant 2

If I uncomment the second shader, it renders a semi-transparent circle that continuously scrolls horizontally, which is the expected result.

Screenrecorder-2026-06-04-23-09-17-866.mp4

Variant 3

If I uncomment the third shader, which is identical to Variant 2 except for an additional unused line:
uniform shader image2;

the result changes back to a solid opaque circle.

In other words, simply declaring a second shader uniform appears to affect the behavior, even though that uniform is never sampled.

Here's the full code:

import React, { useMemo } from "react"
import { Canvas, Circle, FilterMode, Group, MipmapMode, Paint, Skia, TileMode, useClock, useImage, RuntimeShader, ImageShader } from "@shopify/react-native-skia"
import { useDerivedValue } from "react-native-reanimated"

let shaderCode = `uniform float iTime;
    uniform vec2 iResolution;
    uniform shader currentFrameTexture;
    uniform shader alphaTexture;

    half4 main(float2 fragCoord){
    vec2 uv = fragCoord.xy/iResolution.xy;
    half4 sample=currentFrameTexture.eval(fragCoord);
    half4 noiseColor = alphaTexture.eval(fragCoord);

    float newAlpha = noiseColor.r;
    float finalAlpha = sample.a * newAlpha;
    return half4(sample.rgb*finalAlpha,finalAlpha);
    }`

// shaderCode = ` uniform shader image;
//         uniform vec2 iResolution;
//         uniform float iTime;

//         half4 main(float2 xy) {
//          vec2 uv= xy/iResolution;
//          uv.x= mod(uv.x -iTime*0.5*.001,1.0);
//          vec4 color = image.eval(uv*iResolution);
//          float a = .15;
//          return half4(color.rgb*a,a);
//         }`

// shaderCode = `uniform shader image;
//         uniform shader image2;
//         uniform vec2 iResolution;
//         uniform float iTime;

//         half4 main(float2 xy) {
//          vec2 uv= xy/iResolution;
//          uv.x= mod(uv.x -iTime*0.5*.001,1.0);
//          vec4 color = image.eval(uv*iResolution);
//          float a = .15;
//          return half4(color.rgb*a,a);
//         }`

const compiledShader = Skia.RuntimeEffect.Make(shaderCode)
export const Repro = React.memo(() => {

    const noiseImage = useImage(require('../assets/shaders/tex/noise.jpg'))
    const imageShaderObj = useMemo(() => {
        return noiseImage?.makeShaderOptions(TileMode.Repeat, TileMode.Repeat, FilterMode.Linear, MipmapMode.None) || null
    }, [noiseImage])
    const clock = useClock();
    const uniforms = useDerivedValue(() => ({
        iResolution: [200, 200],
        iTime: clock.value,
    }))



    return (
        noiseImage && imageShaderObj && compiledShader ?
            <Canvas style={{ width: 200, height: 200, }}>
                <Group layer={
                    <Paint >
                        <RuntimeShader source={compiledShader} uniforms={uniforms} >
                        <ImageShader image={noiseImage} fit={'cover'} tx={'repeat'} ty={'repeat'} />
                        </RuntimeShader>
                    </Paint>


                } transform={[{ scale: .39 }]}>

                    <Circle cx={100} cy={100} r={100} color="red" />
                </Group>
            </Canvas>
            : <></>
    )
})

I'm happy to open an issue if this turns out to be unintended behavior.

Thanks!

Environment

Device: Physical Android
@shopify/react-native-skia: 2.6.3
react-native:0.83.1
react:19.2.0
react-native-reanimated:4.3.1