How to avoid flickering when conditionally wrapping a Shader

[krisidmisso]

Thank you @william-candillon for this great tutorial : https://www.youtube.com/watch?v=vKYEFpO06Tk&ab_channel=WilliamCandillon.

I got inspired by it and wanted to achieve a more advanced animation but I get a flickering whenever I try to show the transition between 2 images. I know this is because I conditionally show <Fill> and apparently <ImageShader> needs a bit more time to show the image from the re-render.

Is there any other way to achieve image transitions without this flickering(instant showing of a Fill background)? Maybe another way of wrapping <Shader> or preloading and then delaying a bit the and its childrens?

Code:

Render:

<Canvas style={StyleSheet.absoluteFill} pointerEvents={'none'}>
          {themeData.overlay1 && (
            <Fill color={'white'}>
              <Shader source={shaderSource} uniforms={uniforms}>
                <ImageShader
                  image={themeData.overlay1}
                  fit="cover"
                  x={0}
                  y={0}
                  width={width}
                  height={height}
                />

                <ImageShader
                  image={themeData.overlay2}
                  fit="cover"
                  x={0}
                  y={0}
                  width={width}
                  height={height}
                />
              </Shader>
            </Fill>
          )}
        </Canvas>

Shader Source:

const shaderSource = Skia.RuntimeEffect.Make(`
uniform shader image1;
uniform shader image2;

uniform float progress;

vec4 getFromColor(vec2 p) {
    return image1.eval(p);
}

vec4 getToColor(vec2 p) {
    return image2.eval(p);
}

float scale = 4.0;
float smoothness = 0.01;

float seed = 12.9898;

// http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0/
float random(vec2 co)
{
    highp float a = seed;
    highp float b = 78.233;
    highp float c = 43758.5453;
    highp float dt= dot(co.xy ,vec2(a,b));
    highp float sn= mod(dt,3.14);
    return fract(sin(sn) * c);
}

// 2D Noise based on Morgan McGuire @morgan3d
// https://www.shadertoy.com/view/4dS3Wd
float noise (in vec2 st) {
    vec2 i = floor(st);
    vec2 f = fract(st);

    // Four corners in 2D of a tile
    float a = random(i);
    float b = random(i + vec2(1.0, 0.0));
    float c = random(i + vec2(0.0, 1.0));
    float d = random(i + vec2(1.0, 1.0));

    // Smooth Interpolation

    // Cubic Hermine Curve.  Same as SmoothStep()
    vec2 u = f*f*(3.0-2.0*f);
    // u = smoothstep(0.,1.,f);

    // Mix 4 coorners porcentages
    return mix(a, b, u.x) +
            (c - a)* u.y * (1.0 - u.x) +
            (d - b) * u.x * u.y;
}

vec4 transition (vec2 uv) {
  vec4 from = getFromColor(uv);
  vec4 to = getToColor(uv);
  float n = noise(uv * scale);
  
  float p = mix(-smoothness, 1.0 + smoothness, progress);
  float lower = p - smoothness;
  float higher = p + smoothness;
  
  float q = smoothstep(lower, higher, n);
  
  return mix(
    from,
    to,
    1.0 - q
  );
}
 
half4 main(float2 xy) {  
  vec2 uv = xy; 
  return transition(uv);
}
`);

Uniforms:

  const uniforms = useDerivedValue(() => {
    return {
      progress: progress.value,
    };
  });